▶ Video: How to enable SSL / TLS / HTTPS on Laravel Homestead

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.1 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.1"

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.

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


Alex Aguilar, Partner, Software Engineer

Alex Aguilar

Partner, Software Engineer