How to dockerize React App
Tags: react, docker
Published: 2021-10-15 11:45:16

---
title: How to dockerize React App
published: true
date: 2021-05-02 06:41:09 UTC
tags: ReactJs,Docker
canonical_url: https://lagandlog.com/logs/how-to-dockerize-react-app
cover_image: https://lagandlog-uploads.s3.amazonaws.com/dockerize_react_lglg_8adad6d0a4_51acfdc6c3.png
---

Developing apps today requires so much more than writing code. Multiple languages, frameworks, architectures, and discontinuous interfaces between tools for each lifecycle stage create enormous complexity. It helps to speed up the development and deployment processes. If you’re working with microservices, Docker makes it much easier to link together small, independent services.

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. React can be used as a base in the development of single-page or mobile applications. 

I recently came up with a situation to containerize my React application, so learned the steps to containerize  **production-ready**  applications and I'm sharing the same in this log,

## Step 1

To create react application via the command line, you should have  **Node**  installed on your computer. 

[Node Download](https://nodejs.org/en/download/)

```
npx create-react-app my-app
cd my-app
npm start
```

That's it. Open [http://localhost:3000/](http://localhost:3000/) to see your app.

The folder structure will look like this,

```
 my-app/
      README.md
      node_modules/
      package.json
      public/
        index.html
        favicon.ico
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
```

## Step 2

Before we containerize our application, we should create a special file that Docker understands, i.e, _Dockerfile_ in the root of your application.

```
my-app/
      Dockerfile <-
      README.md
      node_modules/
      package.json
      public/
        index.html
        favicon.ico
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
```

Docker builds images automatically by reading the instructions from a `Dockerfile`

A Docker image consists of read-only layers each of which represents a Dockerfile instruction. The layers are stacked and each one is a delta of the changes from the previous layer.

Without further ado, let's write into our Dockerfile,

```
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm i --silent
COPY . ./
RUN npm run build
    
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

Each instruction creates one layer:

- `FROM` creates a layer from the `node:13.12.0-alpine` Docker image.
- `COPY` adds files from your Docker client’s current directory.
- `RUN` builds your application with `make`.
- `CMD` specifies what command to run within the container.

When you run an image and generate a container, you add a new _writable layer_ (the “container layer”) on top of the underlying layers. All changes made to the running container, such as writing new files, modifying existing files, and deleting files, are written to this thin writable container layer.

## Step 3

Now, let's build our Dockerfile,

```
docker build -f Dockerfile -t my_react_app:prod .
```

### In the first 7 lines of the Dockerfile,

it pulls the image that we specified in FROM and starts executes all our commands, and generates a single page react build.

### the rest,

takes that build folder, pulls Nginx image from Dockerhub, and copies our build to the `/html` folder we specified. Now Nginx serves our React application inside  **port 80**  inside the container.

After all the steps/layers in Dockerfile are completed successfully, we can spin up the image using the following command,

```
docker run -it --rm -p 5000:80 my_react_app:prod
```

in this, the port 80 from container listens in 5000 in our machine, which means we can view our application on [http://localhost:5000](http://localhost:5000/)

With this, now you can able to containerize your application in a docker. The steps will be similar to all large react projects.

Follow me on twitter - https://twitter.com/sasiKdharan

### Happy Coding 🤖