Creating a Docker Image for React using Dockerfile

What is React?

React is a famous free, open-source frontend Library used for building web applications and native applications.
It achieves SPA (Single Page Application ) by using the Diffing algorithm and virtual DOM.
Its core concepts are Component-Based Architecture, Declarative Programming, JSX, Virtual DOM and Unidirectional Dataflow.

What is a Docker image?

A Docker image is a read-only, immutable template or blueprint that contains source code, dependencies, libraries and other tools needed to run the application.
Dockerfile = A plain text Document cotaining sequential list of commands read by Docker and builds a Docker container image.

Project Overview

Step 1: Set up your React application and your project

Step 2: Create a Dockerfile and nginx.conf file inside your React project or frontend folder

Step 3: Use nginx as a web server

nginx.conf

server { 
    listen 80;

    root /usr/share/nginx/html;
    index index.html index.htm;


    location / {
        try_files \(uri \)uri/ /index.html;
    }

 }

Dockerfile

# Stage 1: Build the application
FROM node:20-alpine AS build

WORKDIR /app

COPY package*.json .

RUN npm install

COPY . .

RUN npm run build

# Stage 2: Serve the app with Nginx

FROM nginx:alpine 

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80

CMD [ "nginx", "-g", "daemon off;" ]

Step 4: Start the Docker Engine by opening the Docker application.

Step 5: Write the command to build

docker build -t my-app .