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:
npm start
- 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/