Hello Friends 🙏, in this tutorial we will create React App in Docker Container and will also configure it for Hot Reloading 🚀.
What is a Docker
Docker is used to package applications into containers, it contains all application source code with the operating system (OS) libraries and dependencies required to run that code in any environment.
🔽Setup Docker on Windows/Linux: https://www.docker.com/
Why to use Docker
You must have been in a situation in your career where code must be running in your system but not on others system quoting “mere system me to chal raha hai” 😁. Well, Docker solves that problem by packing application with all required dependencies in a container which can be easily shared and deployed to any OS running Docker 🔥.
Overall it improves ✅Development, ✅Deployment and ✅Business Agility
What’s in this Tutorial
In this docker react tutorial, we
– will configure docker in a react project
– will use Node image from Docker cloud
– will modify it by copying our application code
– will create a modified image
– will run the modified image inside the docker
– will access the Docker port from our localhost
– will also implement Hot Reloading so that browser reflects the code changes automatically.
I am using Windows 11 while writing tutorial, React version is 18 and Docker Engine is 20.10.
You must setup docker on Windows or Mac before proceeding.
Chalo suru kiya jaye!🍻 Lets start! 🕺.
Setup React App in Docker Container
Create React App
First thing! create a React app using create-react-app toolkit
npx create-react-app react-docker
Create Dockerfile
Now create a dockerfile to define the tasks to be execuited by docker.
FROM node – fetch node image from docker cloud
WORKDIR /app – set the docker container root directory
COPY package.json . – copy the package.json to container directory (‘.’ or ‘/app’)
RUN npm install – install the dependencies of the project in container directory
COPY . . – copy all files from current directory to container directory
EXPOSE 3000 – open 3000 port of container
CMD [“npm”, “start”] – start the app in the container
We need Node image because this React app will be build and served from node server.
Create .dockerignore
Thsi file works exactly same as gitignore file, stopping non required files from getting copied to container directory.
Build the project image
docker build -t react-image
Verify the files copied in Docker container
Check if correct files are getting copied to the docker container
docker exec -it react-app bash
Run the project image
docker run -d -p 3000:3000 --name react-app react-image
-d – running the container in background
-p 3000:3000 – this is to connect port of the local machine to docker container port, so that localmachine can access project running inside docker.
–name react-app – define name of the app
react-image – name of the project image created earlier
Verify the image
Now verify if image is created successfully
docker image ls
Verify project in browser
Activate Hot Reloading
Kill the already running container
docker rm reactapp -f
Now add -v flag for volume bind mount in docker run command
dirlocaldirectory is the local directory path – this is full path of the directory
containerdirectory is the directory path of container
Get full path of directory – right click on the left panel in Visualstudio and select Copy Path
run the project image
docker run -v <path to src folder>:/app/src -d -p 3000:3000 --name react-app react-image
Now Hot Reloading will start working.😎
Docker Hot Reload not Working?
🔥To fix docker hot reload react not working in windows, pass below environment variable using -e flag
WATCHPACK_POLLING=true
docker run -e WATCHPACK_POLLING=true -v <path to src folder>:/app/src -d -p 3000:3000 --name react-app react-image
Tada!… we have completed create react app in docker container tutorial. Any query, please do ask in comments!
Thanks 🙏
Do you know how to setup a React project from Scratch without using create-react-app? Check this tutorial.