How to dockerize React App

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

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

That's it. Open 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

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 🤖