Laravel-mix: Hot reloading on https

[jericopulvera]

Description:
'http://localhost:8080/js/app.js'. This request has been blocked; the content must be served over HTTPS.

Steps To Reproduce:

1. Valet Secure
2. npm run hot
3. access the site

[stephan-v]

The laravel mix helper in the helpers.php file should probably explain why this happens:

return $shouldHotReload = file_exists(public_path('hot'))
                    ? new HtmlString("http://localhost:8080{$manifest[$path]}")
                    : new HtmlString(url($manifest[$path]));

I guess a check needs to be added with something like $request->secure() or you could hardcode it for now. I currently can not test any of this but hopefully this points you in the right direction.

[JeffreyWay]

We have a PR for this. Will merge soon.

[oscarmorrison]

Hey @JeffreyWay I was wondering if there was any update on this?

Mixed Content: The page at <MY_DOMAIN> was loaded over HTTPS, but requested an insecure stylesheet 'http://localhost:8080/css/app.css'. 

This request has been blocked; the content must be served over HTTPS.

[connor11528]

I am getting the same error. Is there a fix for this? When I deploy my Laravel 5 app to Heroku I get the following error and am unsure how to fix it.

Mixed Content: The page at 'https://laravel5boilerplate.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://laravel5boilerplate.herokuapp.com/css/frontend.css?id=8c9be6a9c6b0ffb6b0ab'. This request has been blocked; the content must be served over HTTPS.
laravel5boilerplate.herokuapp.com/:1 Mixed Content: The page at 'https://laravel5boilerplate.herokuapp.com/' was loaded over HTTPS, but requested an insecure script 'http://laravel5boilerplate.herokuapp.com/js/frontend.js?id=4a60179c1d3f89b5b37e'. This request has been blocked; the content must be served over HTTPS.
laravel5boilerplate.herokuapp.com/:1 Mixed Content: The page at 'https://laravel5boilerplate.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://laravel5boilerplate.herokuapp.com/css/frontend.css?id=8c9be6a9c6b0ffb6b0ab'. This request has been blocked; the content must be served over HTTPS.

[btkostner]

I have an app being served with https at https://katayama.dev.

I was able to get browserSync to work just by setting the configuration to this:

mix.browserSync({
    proxy: 'https://katayama.dev'
})

And hot reloading by adding --https to my hot scripts like so:

        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --config=node_modules/laravel-mix/setup/webpack.config.js",

Hope this helps you.

[cerw]

If I use my cert (from Valet example) How do I overwrite localhost to project.test? SO the SSL match?

[ricnic]

@cerw to use the Valet certificate I needed to tackle this in two places (replace your-app and base path placeholders):

1. In webpack.mix.js:

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

1. In package.json for the "hot" entry add the following params after '--https':

--key /your/base/path/.valet/Certificates/your-app.test.key 
--cert  /your/base/path/.valet/Certificates/your-app.test.cert

Hope that helps

[cerw]

@ricnic Hi there,

I solved it like this too but I used the .env variable. (for dev only)
`js let hosts = process.env.APP_URL.split('//') mix.options({ hmrOptions: { host: hosts[1], port: '8080' } })

[simensen]

Has anyone found a way to handle this that also allows for some .env configuration of the package.json file?

[theixbass]

@cerw to use the Valet certificate I needed to tackle this in two places (replace your-app and base path placeholders):

1. In webpack.mix.js:

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

1. In package.json for the "hot" entry add the following params after '--https':

--key /your/base/path/.valet/Certificates/your-app.test.key 
--cert  /your/base/path/.valet/Certificates/your-app.test.cert

Hope that helps

It is now

--key /your/base/path/.config/valet/Certificates/your-app.test.key
--key /your/base/path/.config/valet/Certificates/your-app.test.crt

[cerw]

@theixbass correct I have new hotssl command in packages

  "hotssl": "cross-env APP_VERSION=`git describe` NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --https --key ~/.config/valet/Certificates/operations.test.key --cert ~/.config/valet/Certificates/operations.test.crt --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

[nelson6e65]

There is a way to set --key and --cert paths from a .env variable or something like that?

[BenjaminBrandtner]

@nelson6e65 and other Valet users: I got it working so it reads the hostname from your .env file.
I'm assuming you've executed valet secure and set APP_URL to something like https://my-project.test.

Add --https to the hot-script in package.json, nothing else:

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --config=node_modules/laravel-mix/setup/webpack.config.js",

The rest happens in webpack.mix.js:

const mix = require('laravel-mix');
const fs = require('fs');
const path = require('path');

const homeDir = process.env.HOME;
const host = process.env.APP_URL.split('//')[1];

mix
    //your project-specific .js .sass etc. calls
    .options({
        hmrOptions: {
            host: host,
            port: '8080',
        }
    })
    .webpackConfig({
        devServer: {
            https: true,
            key: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.key`)),
            cert: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.crt`)),
        }
    })

These docs helped me solve it:

• https://laravel-mix.com/docs/4.0/quick-webpack-configuration
• https://webpack.js.org/configuration/dev-server/#devserverhttps