Deploy a React application using docker containers

This article helps you to deploy a React application using docker containers. To know about docker and docker containers refer this article. This involves creating a react app using npx, then we use the docker file to deploy the docker containers using nginx images.

Create a React application

First, we need to create a React application. For this we can use npx create-react-app tool.

npx create-react-app react-docker-example
cd react-docker-example && npm install
npm start

Run the app in the localhost at http://localhost:3000/ or if any cloud such as AWS or Azure VMs with the 3000 port to check the app is running.

Create dockerfile

First, create a dockerfile in the React app folder with the following lines of dockerfile code.

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build     

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
  • The FROM is the base image in which React app needed to run here. Here we use node:lts-alpine image to first build the artifacts for the React app, that it set as build-stage.
  • The WORKDIR is the dir where the app is build and run.
  • Then we copy package.json to the workdir /app.
  • Then run npm install to install dependencies and run npm run build to build the dependencies.
  • In production-stage we run the react application using nginx:stable-alpine image.
    For this we need to copy the files to nginx/html folder, then we expose the port 80.

Build the docker image

Next step is to build the docker image using the docker file using the following command

docker build -t dockertutorial/react-example .

The -t is used for tag command here we named as react-example and we need to mention the folder here . used for selecting all. It take some time to build it and shows following result.

Docker-react-app-build-img
React app image build

Run the container

The last step is to run the container. docker run command is used to run the container from the image we created as following

$docker run -d -it -p 80:80 --name reactapp dockertutorial/react-example:latest 
fd2285a0a2e37afc9d0317ce6c668d2c2bf23a71d75a9df8b8d7134c8d223573
  • -d runs the command in detached mode.
  • -p refers to port which expose container to local system, here it expose port 80 of container to port 80 of local machine.
  • -it runs in interactive mode with the tag name and --name refers to name of the container.
Docker-react-app-container-img
React app container run

Then go to http://localhost:80 or if you use cloud VM use the public IP address and select the port 80. It gives the following results

Docker-react-app-img
React app

This react application can also be run with multiple containers using docker compose. This will be our next article.

  • For my docker archive -> go.
  • My programming archives -> go.
  • Any docker reference -> go.

If any suggestion and queries please comment it, so I can improve my self.

 1,105 total views

Git and Version control system introduction

Introduction to the git version control tool and basic operations in the git tool.

 394 total views

Git

Git is an open-source version control system used by millions of users over the world. A version control system is used to track every change we do to a project. This system keeps track of every file changes done accordingly to the time. These changes can be rollbacked whenever needed from the repositories. Linus Torvalds, the person who developed the Linux kernel is also the reason to build this Git version control system.

There are three types of version control system

1. Local VCS – In the local version control system, version control is done within the local computer we use. It only saves the changes in the files over time as a version within the local computer. It saves the changes in the localhost.

2. Centralized version control system – Has the name specifies, there is a centralized hub that is used to store the files including the file changes. The central hub stores the file details and the snapshots over time. We can revert the files when needed from the central repository.

3. Distributed version control system – As in the form of distributed computers, we can have a distributed version control system in which the version control system is set on every computer connected over the network. The file changes are distributed over the servers and they can be retrieved at any time.

These repositories can be a local machine or server machine. An opensource distributed Git platform is called GitHub. By this, we can store and control our opensource projects in a distributed manner. This is also helpful in contributing millions of developers over the world for opensource projects successful. The other platforms are called Bitbucket, SourceForge, etc. Among them, Git is popular due to the following features:

  1. Open-source project.
  2. It tracks files like the snapshots in virtual machines.
  3. It gives security by means of checksum all the files using the SHA1 algorithm.
  4. It uses easy strategies to store the files in three stages as stages modified, staged, committed.
Git-working
Working of git

Git installation

Install git on Linux OS

All linux system comes with all the Linux kernel
To install git on Linux distros

Debian system – using apt

sudo apt-get update
sudo apt-get install git

Fedora system – using yum

sudo yum install git

Install git on Windows OS

Like Linux, windows don’t come with git
To install git on windows system

  1. Download the git installer from here.
  2. Select the installer and then give next and setup git first.
  3. Next, we need to configure it by using Command prompt.
  4. Run the following commands in the cmd and give your user_name and email_id

git config --global user.name "user_name"
git config --global user.email "email_id"

Install git on Mac OS

To install git on Mac OS we use brew package manager

Using the brew package manager

brew install git
After successful installation of git check it by checking version using below command
git --version
It will return the following output according to the version number
git version 2.9.2
To get help type
git --help

 394 total views