Looking for a great (remote only) React Dev? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃
This one really took me a while. I got all the concepts, but there were several coffee (pfft… and cookie) breaks until I figured out exactly what the directory mappings needed to be.
Implementing Hot Reloading with Docker and Next.JS is literally two (2) lines of code!
npm run dev, and a mapping between your local project directory and a directory on your Docker instance, using a volume:
That’s it! (although I use
usr/src/app instead of
src in my app).
Step 1: Build a Next App
No crazy stuff here. Just go ahead and build a Next.JS app the same way you always would. e.g.
npx create-next-app YOUR_APP_NAME
FYI — the app that I implemented Docker Hot Reloading with is a CRUD app that stores and retrieves data from a MongoDB database. You can gaze on the entire app in all its glory here:
Step 2: Create A Dockerfile
Next, you’ll need to create a
Dockerfile. I’m not going to go into how Dockerfiles work in this post. If you’d like to learn about them, check out my Docker tutorial here.
The most important line in this file is the last one. Instead of
npm start, we’re using
npm run dev to handle the hot reloading.
Step 3: Create a Docker Compose File
The most important code in your
docker-compose.yml file is on line 10 and 11.
web container, you define a volume, and then map it from your local project directory to one on the Docker instance.
Now you just need to run the following command and you’re home and hosed.
docker-compose up -d --build
Go to your web browser and navigate to
localhost:3000, and if you then change any code in your project and save it, you’ll see the page update immediately.
Eh voila, you’re done!
I wish that there had been an article as simple and straightforward as this one online when I tried to set this up. Hopefully it saves you having to schlep through tons of tutorials and YouTube videos to get it working.
One last thing. You may be concerned about these development settings polluting your production
docker-compose.yml. Using the
-f flag, you can specify which files you want to use, and you can read up about that more here.
Happy coding! 😃