Hot reloading within Docker

• Before the world of Docker, you probably wrote some code and executed your build directly.

• See the changes just about instantly.

• Compared to Docker, it was probably a lot faster.

• There is a way of directly editing your code within your container so you don’t have to constantly rebuild.

---

Docker mounts

• Is actually another form of persisting data within Docker.

• Allows us to choose where to mount our data.

docker run -dp 3000:3000 \
     -w /app -v "$(pwd):/app" \
     node:12-alpine \
     sh -c "yarn install && yarn run dev"

Lets break this down

-w /app # Sets the current directory that the command will run from.

-v "${pwd}:/app" # Bind mount to the current directory from the host in the container into the `/app` directory

• pwd is a Linux command that prints the current directory

node:12-alpine # Image to use

sh -c "yarn install && yarn run dev" 
# Start a shell using `sh` then install dependencies & run the dev script.
# We are using a Node library called nodemon to accomplish the hot reloading.

Lets check the logs

docker ps
docker logs {containerName} -f

Once we see Listening on port 3000 then we are good to go - hit control + c

Lets reverse our changes so go to src/static/js/app.js and update line 56 with the below content or do your own change

<p className="text-center">No todo items yet...</p>

Note

Refresh localhost if you have it open already and you should see the changes. You might get a temporary error, just refresh again.

You'll still need to build the image for future use

• The image isn't getting rebuilt each time.
• So if you restart the container without rebuilding the image, you'll lose your changes