Laravel Valet, Mix, SSL & Hot Reloading

Posted on 7th Oct 2020

I tend to use Laravel Valet to host sites locally and when in comes to Laravel projects in particular I like to use Laravel Mix to deal with asset build processes.

Laravel Mix, built on top of Webpack, comes with Hot Module Replacement out of the box which is fantastic, but on a recent project that used Vue.js I found I needed to jump through a couple of configuration hoops to get it working, especially since I had Laravel Valet securing the development domain with an SSL certificate.

Cut to the chase – how can we get it working

Step 1.

Within your webpack.mix.js file add some additional configuration options for Hot Module Replacement.

You'll need your local development domain and to choose an available port. Chances are port 443 won't be available so use something else.

mix.options({
    hmrOptions: {
        host: 'local-domain.test',
        port: 8080
    }
});

Note: I have Valet setup to use .test as the Top Level Domain (TLD). You might have something else like .dev for example.

Step 2.

Within your package.json file you should have a script called 'hot'. This will need some adjustment to tell the webpack-dev-server that is run behind the scenes to connect over HTTPS and where to find the SSL certificate and key files on your local machine.

Here's mine:

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --key /Users/abcd/.config/valet/Certificates/local-domain.test.key --cert /Users/abcd/.config/valet/Certificates/local-domain.test.crt --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js"

See the addition of the --https --key and --cert flags which don't come as standard.

Note: You'll need to find where Valet is storing the certificate files for your development domain once you've secured the domain having run the command

valet secure local-domain

Done.

You should be able to run

npm run hot

and see changes to your Vue and javascript files update the site in the browser.