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 moer 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).

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 I think we have to repeat this for each local site. However, 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, I found a workaround. You can change the nginx configuration file in Homestead for the project and make it redirect to https when tried to access the website via http.

Check this thread on Stack Overflow and scroll down to the answer of DELETEDACC. Just following that led me to a website that automatically redirects each request to https.

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

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

Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
Build a progressive web app using Vue CLI 3

Leave a Reply

Your email address will not be published. Required fields are marked *