Now in the development environment, if we change the code, we are required to build a new image for changes to reflect. But what we want is as soon as we make any change in the code, it must reflect into the webpage. This is called Hot Reload.
We can incorporate Hot Reload implementing volumes using docker-compose.
Command to install docker compose
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
Command to make the file executable
sudo chmod +x /usr/local/bin/docker-compose
Command to check the version
docker-compose --version
Open docker-compose.yml to check out all commands we have written for building docker image.
version: '3'
services:
web:
tty: true # Terminal
# We are defining the custom Dockerfile
build:
context: .
dockerfile: Dockerfile_dev
# Map local machine's 8000 port to container's port 3000
# React app runs on port 3000 by default
ports:
- "8000:3000"
# Volumes
volumes:
# Do not touch node_modules folder in the container
# As node_modules folder in container has all the required packages
- /react-project/node_modules
# Reference local machine's folder to react-project in container
# Map
# local-machine-folder:container-folder
- .:/react-project
Build the image using the following command -
docker-compose build
Now run the container with this image using the following command -
docker-compose up
Loading comments...