How to configure setup so that the browser reloads on a file change


I am creating my first ghost theme and I have an issue with live reloading/refreshing the browser on a file change. I run nodemon to automatically update Ghost with a theme change and I use webpack to watch and bundle JavaScript and scss files.
The only issue I have is refreshing the browser on a file change, it gets really annoying to have to manually refresh it every time. So I was hoping I could get some help/suggestions on how to refresh the browser automatically on a file change.

Thanks in advance for any help!


Would adding something like Webpack Dev Server work?


Hey, thanks for your reply.

Unfortunately not, because it only provides you with a simple web server that has live reloading. It’s not able to serve the handlebars files, at least not with the basic setup.
I think webpack-dev-middleware could probably be used. It can emit files processed by webpack to a server. But I don’t know if this would be a good solution because it would most likely require changes to the ghost server to work.

However I was able to automatically reload the browser on file changes with this plugin But webpack is not watching the hbs files so the browser only refreshes on js or scss file changes. I shall try and see if I can get it to watch the hbs files without bundling them.

Okey so I was actually able to watch hbs files with webpack(4), with this loader: Now I have a fully working project setup that reloads the project on any file changes.