Laravel mix 6 hot with https

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

Alexander Bakautov · Answer 1 · 2021-04-03T09:07:16.567

3

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')
        }
      }
    })

edited Apr 03 '21 at 09:07

answered Apr 03 '21 at 08:59

Alexander Bakautov

61
6

1

Thank you. Works fine using a local dev server. However, I still faced the mixed content issue but it was quickly solved by using this approach: https://stackoverflow.com/a/57646910/3088867 – bakis Apr 06 '21 at 09:37
Yeah) Thank you for your comment, I'll add this as a part of the solution!) – Alexander Bakautov Apr 09 '21 at 02:10

Viraj Singh · Answer 2 · 2021-11-10T08:38:31.657

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

score 0 · Answer 3 · answered Nov 16 '22 at 09:48

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
            }
        }
    });
}

Laravel mix 6 hot with https

3 Answers3