Local Laravel development and SSL on Homestead

Since december 2017, Google made a change to the Chrome browser. I don’t know the exact details (you can find more information here), but in short the effect was that urls ending on .dev are automatically redirected to the https protocol. This means adding SSL certificates for your local environment or changing all your local sites to end with .test or .local (these seem safe for the moment).

Photo by Jordan Harrison on Unsplash

Something else. Progressive web apps (PWAs) are hot at the moment. They supply a user experience that is much closer to native. Moreover, Google seems to (or will in the nearby future) rank PWAs higher in the search results. Moving your current webapplication to a PWA is not that hard. You simply need a manifest.json file and a service worker. But here is the clue: to load the service worker your app needs to run on the https protocol.

Installing a SSL certificate for your Homestead project

So we need to install a certificate for our local projects. It’s not hard, only cumbersome as I found out recently. I followed the steps from this tutorial and we have to repeat this for each local site we like to run under https. Although it also seems possible to create a single certificate for all sites but I haven’t looked into this. To be honest, I was very happy that the current setup worked out!

I found the steps in the before mentioned tutorial rather clear. However, how to add the certificate to Keychain and trusting the certificate was not totally obvious. So I try to elaborate on that a little here.

After copying the certificate.crt file from the /etc/nginx/ssl directory to the folder with all your Homestead projects (and put it in a folder of its own, /ssl), you can access the file from finder.

Simply look it up in finder and double click the file. This will open the Keychain app on your mac. Under ‘Category’, you’ll find ‘Certificates’ and in that list you’ll find your certificate. Double clicking it opens the certificate. Now you open the block ‘Trust’ and in the dropdown ‘When using this certificate’ you choose ‘Always Trust’.

That is all there is to it, your site can now be accessed through the https protocol.

Remember to repeat these steps for all your local projects you like to run under https!

Redirect to https

With the preceding steps it is still possible to arrive at your website under the http protocol. And then the service worker won’t work due to the Chrome limitation. However, you can update the nginx configuration file in Homestead for the project and make it redirect to https when attempting to access the website via http. You’ll find these configuration files in /etc/nginx/sites-available.

Here is my config of /etc/nginx/sites-available/plint-sites.local

server { 
    listen 80; 
    listen [::]:80; 
    server_name plint-sites.local; 
    return 301 https://plint-sites.local; 
} 
server { 
    listen 443 default_server ssl http2; 
    server_name plint-sites.local; 
    # 
    # Rest of your config 
    # 
}

This code snippet was found on Stack Overflow in DELETEDACC’s answer.

Danger: when adding a new site to Homestead you have to run vagrant reload –provision. This command will overwrite the changes we just made. EDIT: see below for the solution to this issue!

Preventing overwrite when provisioning

What happens exactly when you run the vagrant reload –provision command when you setup a new website? The Homestead.yaml file is read and the projects are configured. Inside the Homestead folder you’ll find a scripts folder in which you see a list of serve files. Assuming we are talking about Laravel projects here, the serve-laravel.sh script is executed for each of your projects. Have a look at the serve-laravel.sh script and you’ll find out that it will overwrite the changes we made before.

Here comes the clue: by adding the type variable in the Homestead.yaml file you can choose which serve script is executed. That means we can make our own. I created a serve-pwahttps.sh script that will write the nginx configuration as in the code block below, making sure that http requests are redirected to https. I found this solution here (scroll down to the bottom of the thread).

So here is the code snippet for your Homestead.yaml:

- map: plint-sites.local 
  to: /home/vagrant/Code/PLint-sites/public 
  type: pwahttps

For Homestead version 5, the gist below will do the trick. However, scroll down for the Homestead v6 version.

Homestead v5 script

Homestead v6 script

Originally published at www.blog.plint-sites.nl on April 27, 2018.