I ❤️ Laravel Inertia. When you install Laravel with Inertia using Jetstream, it comes with some default values until you start getting errors.
-
http://localhost:3000/browser-sync/browser-sync-client.js net::ERR_CONNECTION_REFUSED
-
https://superapp.test:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=NsBKpSo net::ERR_SSL_PROTOCOL_ERROR
How to solve it.
- 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
- 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.
- Install webpack mix extension mix-env-file.
npm install mix-env-file
- 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
})
}
- 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