Laravel mix 6 hot with https

user_5598081 0
Viewed 1443

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
webpack-5 laravel-8 laravel-mix laravel
2 Answers

I found the solution.

  1. Remove --https from script definition in package.json

  2. 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')
        }
      }
    })
user_55980810

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();
user_92796820
Related