Dockerizing a react application

Creating react application

npx create-react-app my-app
cd my-app
npm install

Creating Dockerfile

To containerize any application we need to start a docker container, which is nothing but an instance of a docker image. We can get the docker images from the docker hub, images like alpine, Redis, etc. Docker hub contains some popular images but here we want to containerize our own application So, we have to create our own image.

What to add in a Dockerfile

Step 1: Adding a base image

So let's imagine, if someone gives you a system and asks you to run a react application in that system. what is the first thing you need in that system.

FROM node:alpine

Step 2: Adding a working directory

So now you verified that we have a system with an operating system and node installed in it. Now the second step you will do is copy the react application in the system, for that you have to create a new folder or select an existing one, where you will copy all the files.

WORKDIR '/usr/app'

Step 3: Copying application

Now after selecting the folder, you will copy the code there. Similarly, we need to copy data in our docker image, for that we can use this command in our docker file.

COPY ./ ./

Step 4: Running application-specific commands

After copying the application into the system next step you will do is to resolve the dependencies using the ‘npm install’ command.

RUN npm install

Step 5: Adding startup command

Now, after doing all these steps, the application is ready. So we can start it with a start command (‘npm start’) any time we want.

CMD ["npm","start"]

Building Dockerfile

As our docker file is ready, now we will build it to get our docker image. Open your terminal in the same folder where the Dockerfile is present and execute

docker build .

Running docker image

Now we can run our docker image using docker image id :

docker run -it -p 3000:3000 {image-id}

Temporary containers

We saw when we first created our build file, it took some time to build the image but if we build the same image again it will take far less time then before.

Refactoring docker file

As we saw we are running all the steps following the step where changes are made, as we cannot change the docker functionality but we can modify our docker file to overcome this problem.

After making a change in the application

Dockerizing a react project for production.

To run an application in production first we need to make a production version of the application using ‘npm run build’, it processes all the javascript files, puts together, processes them in a single file.

Nginx

Nginx is a very popular web server, there is not much logic associated with it. it is just used for routing the traffic in and out of the application.

Building production docker file

So lets again understand this with an example, what you will do to deploy an application in production in a system.

docker build .

Running production build

Now we need to map the localhost port with the default port of Nginx which is 80.

docker run -it -p 8080:80 {image-id}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store