Simple, Optimized and Secure Dockerizing of a React App

Dockerizing React
Dockerizing of a React App

Have you ever wondered whats the best way to Dockerize your React App?
You might find 1000s of articles that guide you on how to dockerize your app but how simple, optimized and secure are those? How much size does your final Docker image occupy?

Well, after going through a lot of articles and documentations I finally found the secret formula for Dockerizing react apps.

This article will be useful to you :
1) If you want to Dockerize yours react app.

2) If you want to reduce your current Docker image size.

3) If you want to optimize your Docker image build process.

4) If you want to secure your project source code present inside Docker Image.

If you are already aware of Docker, you can skip this section:

What is Docker?
Docker is a tool designed to make it easier to create, deploy, and run applications by using containers.

Who is Docker for?
Docker is a tool that is designed to benefit both developers and system administrators, making it a part of many DevOps (developers + operations) toolchains.

What is dockerfile?
A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

Getting started
Here are some resources that will help you get started using Docker in your workflow. Docker provides a web-based tutorial with a command-line simulator that you can try out basic Docker commands with and begin to understand how it works. There is also a beginners guide to Docker that introduces you to some basic commands and container terminology. Or watch the video below for a more in-depth look:

Source: https://opensource.com/resources/what-docker

Place the Dockerfile at the root of your project and write all the below commands to assemble your docker image.

Here I am choosing the Alpine version of the node as the base image so that I have a straightaway advantage of Size reduction.
You can get some advantages of it in this article. https://nickjanetakis.com/blog/the-3-biggest-wins-when-using-alpine-as-a-base-docker-image

Here I am Setting up the working directory and setting up the Env which will help us during installing the npm packages.

I am copying the entire project to go inside the docker images /usr/src/app/ location

These are 3 different commands combined together. For every command, Docker creates a separate layer of images so to avoid multiple layers I have combined them.

  1. apk add — no-cache git => Git is required for few npm packages to install. Since the Alpine version does not come up with bloatware we need to install packages we require manually.
  2. apk add python make g++ => Installing the command line tools which are also required for few npm packages.
  3. npm i — silent => Since we are using nodes alpine version no need to install node again we can directly do npm install. –silent will reduce the warnings thrown.

This will give us the files which are ready to be deployed.

Here I am copying the production files which were ready before and discarding the rest of the project files. It will be copied to a new Image that is freshly created from the base image. This ensures our project files are not copied into the image. Only production files are copied.

Serve is the server we are using because of the many advantages it provides out of the box. So we are installing the serve npm package and running it in the 8004 port.

If you have made it up to this point than congrats, now you can have a Simple, Optimized and Secure Dockerizing of a React App.

Your final Dockerfile would be looking like below:

If you feel the post was great, please clap for the post. Click the clap button on the post page. You can clap up to 50 times per post.

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