HMR + Browsersync about inertia-laravel

[sebastiandedeyne]

I got HMR working with Inertia in most cases. There's one issue where there's odd behaviour when a hot reload happens after you've navigated with Inertia, but I solved that by doing a full refresh in those cases.

I'm not using Laravel Mix, but my webpack is set up to mirror Mix as much as possible, so I don't think it really matters much. However this is without BrowserSync.

I added this to my main app.js file and it seems to work:

if (module.hot) {
    const firstVisit = window.location.pathname;

    module.hot.accept();

    module.hot.dispose(() => {
        if (firstVisit !== window.location.pathname) {
            window.location.reload();
        }
    });
}

I assume this doesn't work for CSS either though (CSS changes cause full reloads), but that's not a problem for us since we're using Tailwind, so actual CSS changes are minimal.

[jpmaga]

I got HMR working with Inertia in most cases. There's one issue where there's odd behaviour when a hot reload happens after you've navigated with Inertia, but I solved that by doing a full refresh in those cases.

I'm not using Laravel Mix, but my webpack is set up to mirror Mix as much as possible, so I don't think it really matters much. However this is without BrowserSync.

I added this to my main app.js file and it seems to work:

if (module.hot) {
    const firstVisit = window.location.pathname;

    module.hot.accept();

    module.hot.dispose(() => {
        if (firstVisit !== window.location.pathname) {
            window.location.reload();
        }
    });
}

I assume this doesn't work for CSS either though (CSS changes cause full reloads), but that's not a problem for us since we're using Tailwind, so actual CSS changes are minimal.

I feel like this could very well be in the documentation somewhere. Thanks for the snippet, btw.

[nckrtl]

Thx for your replies. @sebastiandedeyne your snippet doesn't seem to work for me. I alternatively got it working with mix like this:

const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const mix = require('laravel-mix')
const path = require('path')
const tailwindcss = require('tailwindcss')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.options({
  hmrOptions: {
    host: 'pingcrm.test',  // site's host name
  }
});

mix.js('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css', [
    cssImport(),
    cssNesting(),
    tailwindcss('tailwind.js'),
  ])
  .webpackConfig({
    output: { chunkFilename: 'js/[name].[contenthash].js' },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.runtime.js',
        '@': path.resolve('resources/js'),
      },
    },
    devServer: {
      proxy: {
        host: '0.0.0.0',  // host machine ip
        port: 8080,
      },
      watchOptions:{
        aggregateTimeout:200,
        poll:5000
      },
    },
  })
  .version()
  .sourceMaps()

With adding (tailwind) classes / inline styling for development is actually working pretty well. It was something I haven't thought about yet. It's also pushing me to use tailwind more, which I like. Thx!

[reinink]

Pinging @sebastiandedeyne. I know he's done some work to get hot reloading working that might be related to this.