Laravel mix 6 hot with https - laravel

Question

Configuration:
Laravel Mix 6.0.16
Laravel Valet 2.13.19
webpack 5.30.0
webpack-cli 4.6.0
webpack-dev-server 4.0.0-beta.1
Description:
I try to enable https for hot replacement in Laravel 8 on MacOs with Valet. I did my site secure, add --https in my package.json
"hot": "mix watch --hot --https"
Then I launch command in CLI
yarn hot
And it was successful, but when I open my site I saw error in browser console http://joxi.ru/nAypq4ZTwJBP52
net::ERR_CERT_AUTHORITY_INVALID

Answer 1

I found the solution.
Remove --https from script definition in package.json
Add configuration in the file webpack.mix.js
mix.options({
hmrOptions: {
host: url,
port: 8080
}
})
mix.webpackConfig({
devServer: {
https: {
key: fs.readFileSync('/Users/alex/.config/valet/Certificates/castle.test.key'),
cert: fs.readFileSync('/Users/alex/.config/valet/Certificates/castle.test.crt')
}
}
})

Answer 2

In my case I got the mixed content issue. I found out the publicPath was still using http instead of https. I fixed the public path by overriding it. Also made added a few checks to read the certificates if they exist and made the certificate path generic.
const homeDir = process.env.HOME;
const host = process.env.APP_URL.split('//')[1];
const port = '8080';
mix.options({
hmrOptions: {
host,
port
}
});
if (
process.argv.includes("--hot") &&
fs.existsSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.key`)) &&
fs.existsSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.crt`))
) {
mix.webpackConfig({
devServer: {
https: {
key: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.key`)).toString(),
cert: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.crt`)).toString()
},
}
});
// overriding publicPath as it was using http and causing mixed-content
mix.override(c => {
c.output.publicPath = process.env.APP_URL + `:${port}/`
});
}
Update
laravel-mix-valet is available on npm which works with laravel valet
require('laravel-mix-valet');
const host = process.env.APP_URL.split('//')[1];
mix.js('resources/js/app.js', 'public/js')
.valet(host)
.vue();

Answer 3

This works for our team (running "hot": "mix watch --hot", without the --https):
if (!mix.inProduction() && process.env.DEV_SERVER_KEY) {
let proxy = process.env.APP_URL.replace(/^(https?:|)\/\//,'');
mix.options({
hmrOptions: {
host: proxy,
port: '8080',
https: {
key: process.env.DEV_SERVER_KEY,
cert: process.env.DEV_SERVER_CERT
}
}
});
}