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:
-
- Open your terminal or command prompt and navigate to the directory where you want to create your React project.
- Run the following command to create a new React project using the “create-react-app” tool:
npm create-react-app my-react-app
-
- 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
-
- To start the development server and run the application, run the following command:
- 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/