Dockerizing React App With NodeJS Backend

Learn How to Dockerize and make it a deployable image

Bhargav Bachina
Jun 15 · 5 min read
Image for post
Image for post
Photo by Lucian Alexe on Unsplash

Docker is an enterprise-ready container platform that enables organizations to seamlessly build, share, and run any application, anywhere. Almost every company is containerizing its applications for faster production workloads so that they can deploy anytime and sometimes several times a day. There are so many ways we can build a React App. One way is to dockerize the React app with nodejs backend and create a docker image so that we can deploy that image any time or sometimes several times a day.

In this post, we look at the example project and see the step by step guide on how we can dockerizing the React app with nodejs as a server.

Introduction

Nowadays, it’s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarn or Kubernetes. We are going to Dockerize the app and create an image and run it on Docker on our local machine. We could also push that Image into Docker hub and pull it whenever and wherever we need it.

Here is the complete guide on how to develop a React app with nodejs as a backend server. If you are not familiar with the process or you want to know before studying this guide, I would recommend you going through it.

Prerequisite

As a prerequisite, you have to install Docker for Desktop (whatever your OS is). Please follow this link to install Docker on your laptop. Once installed you can check the Docker info or version with the following commands.

docker info
docker --version

Example Project

This is a simple project which demonstrates developing and running React application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Image for post
Image for post
Example Project

Here is a Github link to this project. You can clone it and run it on your machine.

// clone the project
git clone https://github.com/bbachi/react-nodejs-example.git
// strat the apicd api
npm install
npm run dev
// start the react appcd my-app
npm install
npm start

If you want to create a Docker image and run it on the local Docker, here are the steps.

// create an image
docker build -t react-node-image .
// running on Image
docker run -it -p 3080:3080 --name react-node-ui react-node-image

Dockerizing the App

We use the multi-stage builds for efficient docker images. Building efficient Docker images are very important for faster downloads and lesser surface attacks. In this multi-stage build, building a React app and put those static assets in the build folder is the first step. The second step involves taking those static build files and serve those with node server.

Let’s build an image with the Dockerfile. Here are the things we need for building an image.

Stage 1

  • Start from the base image node:10
  • There are two package.json files: one is for nodejs server and another is for React UI. We need to copy these into the Docker file system and install all the dependencies.
  • We need this step first to build images faster in case there is a change in the source later. We don’t want to repeat installing dependencies every time we change any source files.
  • Copy all the source files.
  • Install all the dependencies.
  • Run npm run build to build the React App and all the assets will be created under build a folder within a my-app folder.

Stage 2

  • Start from the base image node:10
  • Take the build from stage 1 and copy all the files into .folder.
  • Copy the nodejs package.json into folder
  • Install all the dependencies
  • Finally, copy the server.js into the same folder
  • Have this command node ./api/server.js with the CMD. This automatically runs when we run the image.

Here is the complete Dockerfile

Dockerfile

Let’s build the image with the following command.

// build the image
docker build -t react-node-image .
// check the images
docker images

Running The App on Docker

Once the Docker image is built. You can run the image with the following command.

// run the image
docker run -d -p 3080:3080 --name react-node-ui react-node-image
// check the container
docker ps
Image for post
Image for post
Running Docker container on port 3080

You can access the application on the web at this address http://localhost:3080.

Image for post
Image for post
Project Running on Docker

Exec into a running container

You can exec into the running container with this command and explore the file system.

docker exec -it react-node-ui /bin/sh
Image for post
Image for post
exec into the running container

Summary

  • Nowadays, it’s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarn or Kubernetes.
  • We use the multi-stage builds for efficient docker images.
  • Building efficient Docker images are very important for faster downloads and lesser surface attacks.
  • You can build the image with this command docker build -t react-node-image .
  • You can run the image with this command docker run -d -p 3080:3080 --name react-node-ui react-node-image
  • You can exec into the running container to explore the file system docker exec -it react-node-ui /bin/sh
  • You can access container logs with this command docker logs react-node-ui

Conclusion

Always use multi-stage builds with this type of architecture. It makes Docker images smaller and less prone to attacks.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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