Build a Production-Ready React App with Docker ( Part 1)

If you are a Developer then you must have heard the term Docker and its usage, if you don't know what is docker? or want to learn docker, in brief, you can visit here Understanding Concept of Docker in the Easiest Way.

Now coming on today's tutorial on the total workflow that is required for a production-ready app using Docker.

Since we are working on React App you will require Node to be installed on your Windows/Mac, you can do so by visiting this website https://nodejs.org/en/download/ to download and install node on your local machine.

The first step is to install React globally on our machine since we have never installed react earlier.

$ npm install -g create-react-app

After React has been installed globally we need to make the create-react-app boilerplate in order to work.

$ create-react-app frontend

create-react-app will install the boilerplate for React-app so that you can focus on your coding part only.

Next step is to cd into the frontend folder that was created by React. I am guessing you know react so all the commands will be familiar to you.

We have 3 different commands on react by default:

1. npm run start — This is used to start the development server.
2. npm run test — This is used to run tests associated with the project.
3. npm run build- This will build a production Version of the application.

So the first part of making a React App is done now we will move towards Docker.

We will have 2 separate containers one container for development and another container for Production.

Open up the frontend folder in your code editor and in the root directory make a file name Dockerfile.dev ( we are providing .dev as an extension since we will make this for development purpose ).

A Dockerfile is a configuration file for the Docker to work. The docker file will make a configuration of your app on a container so that it can work on any environment without installing dependencies.

Open up the Dockerfile.dev and add the following code

FROM node:alpine 
WORKDIR ‘/app’
COPY package.json .
RUN npm install
COPY . .
CMD [“npm”, “run”, “start”]

1st line FROM node:alpine is the base image from where it will install the node. If you want to see more you can visit https://hub.docker.com/ and click on explore and see more base images.

2nd line WORKDIR ‘/app’ basically creates a directory named app where we will store the development files of our app.

3rd line COPY package.json will copy all the dependencies to the docker container.

4th Line is just installing all the dependencies to the container by running npm install.

5th line COPY . . will copy all the files and folders from the current working directory (frontend) to /app that we have created.

6th line CMD [“npm”, “run”, “start”] is making a command in order to run the dev server on the container itself.

Next step is to build the Dockerfile.dev that we have just created. Run the following command on your terminal.

$ docker build -f Dockerfile.dev .

Don't forget to include the dot(.) at the last which is important.

After you have successfully build the Dockerfile.dev you will get a container id stating “ successfully build 5797ad787fh”, just simply copy the ID as we will be requiring in the next step.

To run the container where we have stored all the files of the app. Run the command on your terminal.

$ docker run -p 3000:3000 <container-Id>
$ docker run -p 3000:3000 5797ad787fh 

This will run the dev server on the machine now if you visit https://localhost:3000 on your browser you will see React app loading up.

Great Job this far, we have successfully created a container copied all the app files and dependencies, build it and also ran on the dev server.

In the Next Part, we will be Looking at the Testing process and then deployment, so stay tuned.