Docker file for a React application

In this article we will discuss the basics of deploying a simple react application within a docker container. We will use docker file for building image and container.

Create a react app first

Creation of React App

We can simply create a react app using the following command in terminal. Our app name will be “app” in this example. You can use any name.

npx create-react-app <your_app_name>

After creating app, use these commands to open react app in your browser to check if app is working or not.

cd <your_app_name>
npm start

I prefer using visual studio code and it’s terminal. You can use any other as per you convenience.

Docker File

After creating react app. Create a docker file in your react app folder. The docker file will contain commands that would be required to build image and run container. Prefer naming docker file as Dockerfile and donot give any extension docker will itself pick up the file during execution.

The docker file will contain following content:

FROM node

#Create app directory inside container

RUN mkdir /usr/src/app

COPY . /usr/src/app

WORKDIR /usr/src/app

ENV PATH /usr/src/app/node_modules/.bin:$PATH

RUN yarn

CMD [“npm”,”start”]

Your react app will have following structure of files.

React app Code with Docker file

Open Command Prompt, we are using WindowsPowershell. Navigate to the folder containing your react app with docker file and type the following command to build docker image using docker file.

docker image build -t react .

Docker Image Build Command

After successful execution of this command we can verify that whether our image is created on not using “docker images” command. It will show the details of our image as follows

Then we will execute docker run command for our image and give port 3000

docker run -it -p 3000:3000 react

Now we can access the local host using our browser to run our react app.

So our react app runs successfully.

About the Author

Zamin Hassnain is a Senior Software Engineer having working experience of notable Software Companies. He has also worked as technical trainer. He has worked on multiple projects containing technology stack related to AWS Services,Dev Ops, Big Data, ETL, DWH, Python, C# & SQL.