There are several benefits to using Docker with ReactJS:
- Consistency: Docker ensures that your ReactJS application is run in the same environment on every machine. This can help to reduce errors and make it easier to deploy your application to production.
- Portability: Docker images can be run on any platform that has Docker installed. This makes it easy to deploy your ReactJS application to different environments, such as your local machine, a development server, or a production server.
- Scalability: Docker makes it easy to scale your ReactJS application by running multiple instances of the application in containers. This can be useful for handling high traffic loads or for running different versions of your application in parallel.
First, let's create a React App. To do this, open terminal and hit command:
npx create-react-app my-app --template typescript
This will open your React project in vscode. You can run and check your project using command:
npm run start
Now, create a build of your react project using command:
npm run build
You should see a build folder getting generated in project root directory that we are going to use later.
Next, let's install Docker on your machine. Once you have installed Docker, you can create a Dockerfile for your ReactJS application.
A Dockerfile is a text file that contains instructions for building a Docker image. The Dockerfile for a ReactJS application will typically include the following steps:
- From: Specify the base image to use for your image. For a ReactJS application, you will typically use the node base image.
- Workdir: Set the working directory for your container.
- Copy: Copy the files from your ReactJS application directory into the container.
Run: Run the
npm installcommands to install the dependencies and build your ReactJS application.
- Expose: Expose the port that your ReactJS application is running on.
- CMD: Specifies the instruction to be executed when Docker container starts.
Once you have created a Dockerfile for your ReactJS application, you can build a Docker image using the docker build command.
To run the Docker image, you can use the docker run command. The docker run command will start a new container from the Docker image.
Let's create a file named
Dockerfile (yes, without file extension) and paste the below code in it:
COPY build/ .
RUN npm install -g serve
CMD ["serve", "-s"]
To build a Docker image from this Dockerfile, you can run the following command:
docker build -t my-app .
Note: For the above command to execute properly, make sure Docker Desktop is running, else it would throw an error like:
ERROR: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
To run the Docker image, you can run the following command:
docker run -p 3000:3000 my-app
That's it!!! You should be able to access your react app using http://localhost:3000
For deflating Docker Image size:
- Always use alpine as base image (node:20-alpine), as it is very small in size
- Always build frontend applications outside of Docker environment and then package the output build folder into Docker instead of copying all the files into Docker and then running npm
npm run build.