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

Hello,
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 GitHub - statianzo/webpack-livereload-plugin: LiveReload during webpack --watch. 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.

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

1 Like