Comments (4)
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.
from inertia-laravel.
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.
from inertia-laravel.
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!
from inertia-laravel.
Pinging @sebastiandedeyne. I know he's done some work to get hot reloading working that might be related to this.
from inertia-laravel.
Related Issues (20)
- redirection to /dashboard after login does not work HOT 1
- Prevent a webpage from navigating away HOT 1
- Release notes for 1.0 could make it more clear that "Fix URL generation (#592)" is a breaking change HOT 5
- Ziggy2.0 and Laravel11 and Breeze for Inertia + React, TypeScript and SSR starter kit throws error on initial setting HOT 2
- assertInertia() fails when testing Inertia visits HOT 1
- Inertia components/hooks wrapped with redux Provider stopped working HOT 2
- client-side validation libraries HOT 1
- SSR high CPU usage HOT 1
- Serve Connection Reset HOT 1
- Default Layout HOT 1
- adding to HandleInertiaRequests->share array no longer works in version 1.2.0 HOT 5
- Running inertia:start-ssr continuosly fails with message 'Node.js v18.19.0' HOT 2
- Popups instead of redirects due to the first response to API request is randomly returned as "200 text/html" HOT 1
- Partial reload behaviour change in 1.1.0 causes lazy attributes not to be reloaded correctly HOT 2
- PreserveScroll not working without PreserveState for inertia form HOT 1
- How to update favicon, meta tags like descripiotn, keywords, openGraph(og) etc. HOT 1
- Using inertia component inside blade file HOT 1
- inertia returning encoded html in output for data-page HOT 5
- Problem with URL generation HOT 2
- SSR Not Rendering Content After Changing Default Port HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inertia-laravel.