I'm starting a new project and I need to build the frontend for it. I decided to use Vue.js and get back to the frontend for a few days.
I'm very used to work with docker, so I created my container, installed everything on it and started working on it.
After reading some nice tutorial about vue I started coding until I realized I needed my build to automatically refresh.
After reading about HMR (Hot Module Replacement) with webpack I realized it's was too much of a hassle for my project. I asked a colleague about what else could I use and he suggested using Parcel since it's very straight forward to use.
It didn't work 😒.
For some reason, whenever I changed a file on my editor Parcel didn't rebuild my app. I read all the docs and try every workaround without any luck.
I did some testing and the only way it worked was if I did a touch on the files from inside the container.
Just to be clear, this is not a problem with Parcel but on how the volume it's working on docker and I guess it might have to be with some cache issue.
After all this, finally I ended up building the following tool:
https://github.com/gdi3d/js-hmr-osx-docker-helper
Sometimes HMR tools don't work quite right when using docker on some OS (OSX) with a mounted volume. You change a file and nothing happens, it doesn't detect the change and no rebuild happens.
This hack-script will make sure your HMR tools (webpack, parcel, etc) sees that a file has been changed/created/deleted/etc.
It uses the command touch to update the file from inside the container helping the HMR tools to be aware of the update.
Photo Credits: (https://instagram.com/burakkostak)[https://instagram.com/burakkostak]
Top comments (0)