Laravel Inertia using Valete secure and Browser sync error

I ❤️ Laravel Inertia. When you install Laravel with Inertia using Jetstream, it comes with some default values until you start getting errors.

1. http://localhost:3000/browser-sync/browser-sync-client.js net::ERR_CONNECTION_REFUSED

2. https://superapp.test:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=NsBKpSo net::ERR_SSL_PROTOCOL_ERROR

How to solve it.

1. The ERR_CONNECTION_REFUSED error can be solved by calling browser-sync in your webpack.mix.js configuration.

if (!mix.inProduction()) {
    mix.browserSync({open:false});
}

To use the previous statement, you might need to install browser-sync and browser-sync-webpack-plugin

npm install browser-sync browser-sync-webpack-plugin --save-dev

2. The second error related to SSL net::ERR_SSL_PROTOCOL_ERROR happens when you are using an SSL Certificate. When you use one, browser-sync detects the https instead of http and makes a redirect to your current URL. For example
   http://localhost:3000/browser-sync/browser-sync-client.js becomes https://superapp.test:3000/browser-sync/browser-sync-client.js.

Then my suggestion is to change the following code located at your app layout.

@env ('local')
    <script src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
@endenv

To use your APP_URL, which you would have to change to use your https and current custom domain name. In my case APP_URL='https://superapp.test' .

@env ('local')
    <script src="{{config('app.url')}}:3000/browser-sync/browser-sync-client.js"></script>
@endenv

And enable https for localhost development with the location of your certificate files.

if (!mix.inProduction()) {
    mix.browserSync({
    open:false,
    https: {
        key:'/Users/victoryoalli/.config/valet/Certificates/superapp.test.key',
        cert: '/Users/victoryoalli/.config/valet/Certificates/superapp.test.crt'
    });
}

The solution until now will work fine if you are a solo developer, but most of the time, we are not, so we need a way to specify the location of your SSL Certificate files depending on our environment:

Make your SSL Certificate files location configurable.

1. Install webpack mix extension mix-env-file.

npm install mix-env-file

2. Read the location of your certificate files from an environment variable.

https = process.env.SSL_KEY ? { https: { key: process.env.SSL_KEY, cert: process.env.SSL_CERT } } : {}
if (!mix.inProduction()) {
    mix.browserSync({
        open: false,
        ...https
    })
}

3. Add these variables to your .env file.

SSL_KEY='/Users/victoryoalli/.config/valet/Certificates/superapp.test.key'
SSL_CERT='/Users/victoryoalli/.config/valet/Certificates/superapp.test.crt'

That's it!!

References

• Browser Sync https option