Containerize your React application using Docker
Tags: react, docker, javascript, beginners
Published: 2022-02-23 13:04:46

## Why Docker?

While developing any kind of software, you may have experienced situations like your application works on your development machine but fails to start in someone else's machine or deployment environment. This can happen because of,

1. The discrepancy between the software version required and the software version available on the machine.
2. Configuration settings are different from the development machine.
3. Missing files.

Docker provides a solution to these problems by containerizing the software.

According to Docker's official website, 

> Containers are a standardized unit of software that allows developers to isolate their app from its environment, solving the “it works on my machine” headache. 

To know more about docker, visit its [official website.](https://www.docker.com/why-docker)

## Installing and running Docker

For installing Docker, go to [this link (for windows)](https://docs.docker.com/desktop/windows/install/).

## Creating React Application

To create a React application, Nodejs is a prerequisite. Install Nodejs [from here.](https://nodejs.org/en/)

Run the command below to create a new react project.

	npx create-react-app react-app

This will create a new react project named react-app.

Now, we can open the project on any IDE to see the folder structure.

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm24q4n9pmeexgtqmipc.png)


To run the react app use the following command on your terminal.

	cd react-app
	npm start

 

Once the app is up and running, the terminal will show messages like this.

![Running React app with npm start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9bn0ydbp4dxipl6dgld.png) *terminal message on starting the react app*

Now the react application is running on the development server; you can view your app on any browser on this address.

	http://localhost:3000

![React app running on dev server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf0w2km8vdh4dlwmh410.png)
 
*react app running on development server.*

## Dockerizing React Application

As we have our basic setup ready, we can start creating a Docker Container to isolate the React Application.

 
Create a file named Dockerfile in the root folder of the react application. Docker can build images automatically by reading the instructions from the Dockerfile.

![Creating a Dockerfile in root folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jub4zt7yehdtcc695e9.png)
 

Copy the following code to the Dockerfile and save it.

	# Pull the latest base image
	FROM node:alpine
	# set working directory
	WORKDIR /app
	# add `/app/node_modules/.bin` to $PATH
	ENV PATH /app/node_modules/.bin:$PATH
	# Copy package.json to /app
	COPY package.json ./
	# Copy package-lock.json to /app
	COPY package-lock.json ./
	# Install dependencies
	RUN npm i
	# add app
	COPY . ./
	# start app
	CMD ["npm", "start"]   

Let's go through the Dockerfile.
![Dockerfile for React Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqmebtpuej1hfn9k4u39.png)
 

- **FROM node:alpine** - This line of code tells Docker to pull the latest base image for Nodejs from DockerHub.
- **WORKDIR /app** - This will define the working directory of a Docker container at any given time. Here the name of the directory is app, you can give any name as you want.
- **ENV PATH /app/node_modules/.bin:$PATH** - Here we use ENV to update the PATH environment variable for the software your container will install. Here we set the environment path for npm command to work.
- **COPY package.json ./** - Here we copy package.json to the working directory.
- **RUN npm i** - This will run the command `npm i` to install all the dependencies.
- **CMD ["npm", "start"]** - This will run `npm start` command to start the application.


Start the Docker Desktop application.

![Search for Docker Desktop App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqpsr9t2crmbpz2dxy5s.png)

In the terminal, go to the root directory of the react application and run the following command to build the Docker Image.

	docker build -t react-app .

The above command will create a Docker Image named react-app, you can view this image in Docker Desktop App or you can use the following command to view all the Docker Images on your machine.

	docker images


Go to the images section in the Docker Desktop app

As we have created the image, we can run the container by the following command.

      docker run -d --rm  -p 3000:3000 -e CHOKIDAR_USEPOLLING=true react-app

Let's breakdown this command

- **-d**, will run the container in the background and print the container ID
- **--rm** will automatically remove the container when it exits
- **-p 3000:3000**, will publish the container's 3000 port to the host's 3000 port
- **-e CHOKIDAR_USEPOLLING=true**, -e will set the environment variable CHOKIDAR_USEPOLLING to true
- **react-app** is the name of the image that we want to run

 **Now you can access the container from localhost:3000.**

You can also view your running container in Docker Desktop.

![React Application running inside docker container in application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxtvqgpxyqhaukn8dxwm.png)
 

To stop the container, you can simply exit the terminal, or use the docker stop command. For more docker commands, **[go to the official website.](https://docs.docker.com/)**