React Js hello world using docker.

In this blog we will follow 2 steps. In first step we will install react js then we will create docker environment. Let proceed.

1st Step :

Once you have Node.js and npm installed, follow these steps to install React:

1. 1. Open your terminal or command prompt and navigate to the directory where you want to create your React project.
   2. Run the following command to create a new React project using the “create-react-app” tool:

npm create-react-app my-react-app

1. 3. Replace “my-react-app” with the name of your project.

Wait for the process to complete, then navigate into the project directory:

cd my-react-app

1. 5. To start the development server and run the application, run the following command:

npm start

6. Open your web browser and go to http://localhost:3000. You should see the default React application running.2nd Step :

Now for docker env , first we will create 3 files

Dockerfile
docker-compose.yml
Makefile

Now make your Dockerfile like below

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD [ "npm", "start" ]

You can add below code for docker-compose.yml file

version: "3"
services:
  app:
    container_name: react-app
    build: .
    ports:
      - "3000:3000"
    volumes:
      - ./:/app

You can add below code in makefile

# Define the image name
IMAGE_NAME = react-app

# Define the command to build the Docker image
build:
docker build -t $(IMAGE_NAME) .

# Define the command to run the Docker container
run:
docker-compose up

# Define the command to stop the Docker container
stop:
docker stop $(IMAGE_NAME)

Use below command to build container

Make run

Now you should see your react js app in your browser in 3000 port

http://localhost:3000/