Articles → DOCKER → Hosting The React Application On Docker

Hosting The React Application On Docker

In this article, we will host the React application on Docker.

VM Creation

First, create a virtual machine and install docker.

Create A React Application

Create the React application. Once the application is created, copy all the files on the virtual machine. For this article, we will create a folder app and copy all the contents inside it.

Give Permission Of “App” Folder To Root User

In this example, I have copied all the contents on the server using the demouser. To provide permission to the root user, use the following command.

sudo chown -R root:root /home/demouser/app

Create Dockerfile

Switch to the root user and go to the app folder using the following commands: -

cd /home/demouser/app

Inside the app folder, create a file Dockerfile with the following contents.

FROM node:14


WORKDIR /home/demouser/app
COPY . .

RUN npm install

RUN npm run build
CMD ["npx", "serve", "-s", "build", "-l", "3000"]

Provide Permissions To Root User To Node_Modules

Use the following command: -

chmod +x /home/demouser/app/node_modules/.bin/react-scripts

Create A Docker Container

Create a docker container using the following command: -

docker build -t my-react-app .

Enable 3000 Port For Inbound And Outbound Port In The Virtual Machine

Enable 3000 inbound and outbound virtual machines.

Picture showing the 3000 port number enabled in inbound port rules

Click to Enlarge

Picture showing the 3000 port number enabled in outbound port rules

Click to Enlarge

Run React Server In Docker

Use the following command: -

docker run -p 3000:3000 my-react-app

Output

Picture showing the react application deployed on docker

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Friday, June 23, 2023

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**