How To Run a React App As a Container On GCP VM
By: Bhargav Bachina
Tags: Google Cloud Platform, Programming, Docker, React, JavaScript

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.

Example Project

Since we are focusing on running the whole project on the GCP VM we are not going to develop this project in this post. If you are not familiar with the whole process of developing a React app with the NodeJS backend you can go through the below post.

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



git clone // clone the projectgit clone https://github.com/bbachi/react-nodejs-minikube.git // strat the apicd api

npm install

npm run dev // start the react appcd my-app

npm install

npm start

Run it On Docker

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 the 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 . /my-app/build folder.

folder. Copy the nodejs package.json into ./api folder

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

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

Once you run the container you can the application on port 3080.

Project Running on Docker

Publishing the Docker Image

Let’s publish the Docker image to Docker Hub with this command docker push <repo name> . Before that, you need to create a Docker Hub account if you dot have one. Here is the link for it.

Let’s create a repository and it’s bbachin1 in my case. We need to login, tag the image, and push it finally.

// login

docker login // tag the image

docker tag react-node-image bbachin1/react-node-webapp // push the image

docker push bbachin1/react-node-webapp