It’s a real­ly good idea that the tech stack of your pro­duc­tion & devel­op­ment envi­ron­ments are as sim­i­lar as pos­si­ble.¹ While most devel­op­ers make sure that PHP, data­base & web serv­er some­what match across envi­ron­ments. One item that tends to get over­looked on the local envi­ron­ment is SSL/TLS — aka https://.

Lar­avel Home­stead gen­er­ates self-signed cer­tifi­cates for your sites. But you’ll need to get your brows­er to trust them. And depend­ing on the brows­er, it’s not very clear what you need to do (🤜 Chrome).

I’m going to secure our web­site local­ly with Home­stead run­ning on macOS Mojave. I’ll step through each of the major browsers: Chrome, Safari and Firefox.

Pre­req­ui­sites #

1. I assume you already have your site run­ning local­ly on Homestead.

2. You’ve checked that your Homestead.yaml is cor­rect­ly con­fig­ured for SSL.

In the top sec­tion of your Homestead.yaml, make sure you have ssl: true.

ip: "192.168.10.10"
memory: 2048
cpus: 2
provider: vmware_fusion 
mariadb: true
ssl: true

Also, your local domain should be explic­it­ly defined in the sites section.

sites:
    - map: eaglepeakweb.test
      to: /home/vagrant/Code/ep-craft/web     
      php: "7.3"

Trust­ing self-signed cer­tifi­cates on Chrome #

1. Start Home­stead & vis­it your local site. ex: https://eaglepeakweb.test/
   You’ll see a warn­ing that Your con­nec­tion is not pri­vate.
2. Up in the address bar, click Not Secure. And then click Cer­tifi­cate.

3. Cre­ate a fold­er on your com­put­er where you’ll store the Home­stead self-signed cer­tifi­cates. ex: ~/Code/laravel/homestead-certs/
   Drag the cer­tifi­cate from your brows­er to that folder. 

4. Launch the Key­chain Access macOS util­i­ty. Click on Cer­tifi­cates in the left side Cat­e­go­ry pane. Now drag the cer­tifi­cate from your com­put­er to Key­chain Access.

5. Dou­ble-click on the certificate. 
   Open the Trust sec­tion. And change the first option to Always Trust.
   When you close the win­dow you’ll be prompt­ed for admin­is­tra­tor pass­word to autho­rize this trust­ed certificate.
6. Impor­tant Quit Chrome. 
   Yes. Shut it down com­plete­ly to save your­self some grief. 
7. Relaunch Chrome & vis­it your local site. It should now load secure­ly using https://

Trust­ing self-signed cer­tifi­cates on Safari #

1. Start Home­stead & vis­it your local site. ex: https://eaglepeakweb.test/
   You’ll see a warn­ing that This Con­nec­tion is Not Pri­vate.
2. Click the Show Details but­ton. And then click the view the cer­tifi­cate link.
3. Cre­ate a fold­er on your com­put­er where you’ll store the Home­stead self-signed cer­tifi­cates. ex: ~/Code/laravel/homestead-certs/
   Drag the cer­tifi­cate from your brows­er to that folder.
   
4. Launch the Key­chain Access macOS util­i­ty. Click on Cer­tifi­cates in the left side Cat­e­go­ry pane. Now drag the cer­tifi­cate from your com­put­er to Key­chain Access.
5. Dou­ble-click on the certificate. 
   Open the Trust sec­tion. And change the first option to Always Trust.
   When you close the win­dow you’ll be prompt­ed for admin­is­tra­tor pass­word to autho­rize this trust­ed certificate.
6. Vis­it your local site. It should now load secure­ly using https://

Trust­ing self-signed cer­tifi­cates on Fire­fox #

1. Start Home­stead & vis­it your local site. ex: https://eaglepeakweb.test/
   You’ll see a warn­ing that Your con­nec­tion is not secure.
2. Click the Advanced button. 
3. Click the Add Excep­tion… button. 
4. Click the Get Cer­tifi­cate button. 
5. Click the Con­firm Secu­ri­ty Excep­tion button. 
6. Fire­fox will auto­mat­i­cal­ly reload your local URL but now using https:// 
   NOTE Fire­fox will still dis­play a ⚠️ icon in the address bar but it’s to denote that you added a Secu­ri­ty Excep­tion for the self-signed certificate.

¹ https://​12fac​tor​.net/​d​e​v​-​p​r​o​d​-​p​arity