neeonline's avatar

Hot Reload (Vue) with Valet (SSL)

I can't figure out how to make the browser sync/hot reload to work with Valet. I'm using https Valet domains, I tried everything...

This is my mix config:

let siteName = 'mysite';
let valetDomain = '.test';
let userName = 'macuser';

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .tailwind()
    .browserSync({
      proxy: 'https://' + siteName + valetDomain,
      host: siteName + valetDomain,
      open: 'external',
      port: 8000,
      https: {
        key:
          '/Users/' +
          userName +
          '/.config/valet/Certificates/' +
          siteName +
          valetDomain + '.key',
        cert:
          '/Users/' +
          userName +
          '/.config/valet/Certificates/' +
          siteName +
          valetDomain + '.crt'
      }
    });

The changes are not reflected. So I changed the blade template to load the css/js via {{ mix('/js/app.js') }} and then it is trying to load assets from http://localhost:8080 and not https://mysite.test:8000/js/app.js

Any help is appreciated.

0 likes
6 replies
neeonline's avatar

I tried to remove all browserSync configuration (and follow the documentation), still no success.

=(

neeonline's avatar

Ok, I give up.

I had to unsecure my valet domain to make it "work". But on the hot reload there is a JS error that is not allowing the reload.

I will search a way to work with Vue CLI inside Laravel.

=(

neeonline's avatar

@SNAPEY - I will give it a shot, in my case the browsersync is related to front-end (Vue) and hot reload.

Your article just prove my point that Laravel mix is a nice touch but is not always the best way to compile assets. If you're using Valet with SSL, etc.

Thanks!

Snapey's avatar

The important bit from my perspective was the ability to use browsersync for server rendered (view template) development, andnot dependent on compiling frontend assets

neeonline's avatar

@SNAPEY - I see your point. But using your general idea, I was able to use vue-cli inside laravel (all frontend is now controlled by vue and not Laravel/Mix).

Thank you!

Please or to participate in this conversation.