Step-by-Step Guide: Creating a React Project with Docker

For the most part, the development world is fast-paced nowadays, and can be said that integrating Docker into your React project workflow can speed up the development process and improve cooperation. Docker allows you to package your application and its dependencies into containers to achieve consistency when applied across different environments. In this tutorial, we will go through how to create a React project and add docker to it step by step.

Create a Docker file

1. Begin by creating a React project and making any necessary changes.

2. In the root directory of your project, create a file named "Dockerfile".

3. Inside the Dockerfile, include the following commands:

   • FROM node - (or FROM node:20 to specify a particular Node.js version)

   • WORKDIR /myapp - (create a folder named "myapp" inside the container)

   • COPY . . - (copy all files from the root directory to the "myapp" folder)

   • RUN npm install - (install Node modules inside container)

   • EXPOSE 3000 - (optional, expose port 3000)

   • CMD ["npm", "start"] - (run the project)

Creating Image

Open a terminal in the directory where your Dockerfile is located.

4. docker build . - to build the image.

Alternatively, run docker build -t mywebapp:01 . to tag the image with a name and version.

Running Image

5. docker run IMAGE_ID - to run the container. Note that the server will run on port 3000 inside the container.

   To access the server from your main machine, perform port mapping:

   Open new terminal and STOP the container

6. docker ps - list the container

7. docker stop NAME - to stop the container

8. docker run -p 3000:3000 IMAGE_ID - to map port 3000 of the container to port 3000 of the main machine.

PORT MAPPING is a technique used to mapp container post to main machine to run our project.

8. Now, you can access your project at localhost:3000.

Running Container in Detached Mode

After running the docker run IMAGE_ID command, our terminal got stuck to run the container in detached mode and free up your terminal.

• docker run -d -p 3000:3000 IMAGE_ID

• docker ps - check the running container

Creating Multiple Containers from a Single Image:

Use the same image ID to create multiple containers: -

• docker run -d -p 3001:3000 IMAGE_ID - (runs on port 3001) -

• docker run -d -p 3002:3000 IMAGE_ID - (runs on port 3002)

Useful Commands:

• docker ps -a - List all containers.

• docker rm CONTAINER_NAME - Remove a container.

• docker run -d --rm -p 3000:3000 IMAGE_ID - Run and remove the container when stopped.

• docker run -d --rm --name mywebapp -p 3000:3000 IMAGE_ID - Name the container.

• docker build -t mywebapp:01 . - to give a name to an image, mywebapp is the image name and 01 is the version. Similar docker build -t mywebapp:02 and so on.

• docker rmi IMAGE_ID - Delete an image or you can use the first 2 letters of the IMAGE ID to remove it.

  • docker rmi mywebapp:02

  • docker image ls

Using Pre-defined Images:

• docker pull ubuntu - Download Ubuntu image

• docker run -it ubuntu bash - Start a new container with interactive mode.

  • -it It attaches your terminal to the container, allowing you to execute commands directly within it.

  • bash specifies the command to run inside the container if we don’t give bash container start and then immediately exit.