How to Dockerize React Application
3 min read
Docker is a tool that allows developers to easily create, deploy, and manage small, modular services called microservices. By using Docker, you can ensure that your code will run consistently in any environment, eliminating the need to troubleshoot environment-specific issues. Additionally, Docker can significantly accelerate the development and deployment process, making it a valuable tool for teams working with microservices.
In this article, I will demonstrate how to dockerize a react application for development and Configure a production-ready image
Basic knowledge of react and node
We will be using:
Create React App
Setting up react application:
Step 1: Create a sample react app using the following terminal command:
npm init react-app myapp --use-npm
This will create a directory named myapp
Step 2: change the directory to myapp
Step 3: Add a Dockerfile to the project root
Write the following commands into the Dockerfile
#pull official base image FROM node:14-alpine #set working directories WORKDIR /myapp #copies the package.json and package-lock.json files into the /myapp directory COPY package.json ./ COPY package-lock.json ./ #install all the dependencies RUN npm install # add app COPY . . #expose port 3000 EXPOSE 3000 CMD ["npm","start"]
This Dockerfile specifies that we want to use the official Node.js Docker image based on Alpine Linux, and then copies the
package-lock.json files into the
It then runs
npm install to install the dependencies, copy all the other files into the
/myapp directory, and exposes port 3000.
Finally, it specifies that the default command for the image is
npm start, which will start the development server for the React application.
This is how it will look like:
Step 4: Add a .dockerignore file
Add the following in dockerignore file:
node_modules build .dockerignore Dockerfile Dockerfile.prod
This will speed up the Docker build process by not sending the "node_modules" directory and other files with local dependencies to the Docker daemon.
Step 5: Build and tag Docker image:
docker build -t myreact .
This command will build a Docker image with the name "myreact" based on the instructions in the Dockerfile. The
. at the end specifies the current directory as the context for the build.
You can check the build image by doing
docker images command, it will show up the image
Step 6: Run the Docker image:
docker run -d -p 3000:3000
This command will start a new container based on the
myreact image and bind the container's port 3000 (the default port for the React development server) to the host's port 3000. You can then access your application by going to
http://localhost:3000 in a web browser. The
-d flag will run the container in detached mode meaning it runs in the background of your terminal. It does not receive input or display output.
You can check the container by doing
docker ps which will show the running containers
I hope that by now you have got the Idea of how to dockerize a react application for development.