How to Install Docker and Set Up a React Project: A Beginner’s Guide

1. What is Docker?

Docker is a platform that allows software applications to run in isolated containers. These containers include all necessary libraries and dependencies, minimizing issues caused by differences between development and production environments. This effectively eliminates the “works on my machine” problem.

2. Installing Docker

To use Docker, you first need to install it on your system. Follow the appropriate installation method for your operating system.

Installing Docker on Windows

• Download the Docker Desktop installer from the Docker official website.
• Run the installer and complete the installation process.
• Once installation is complete, launch Docker Desktop and set up Windows Subsystem for Linux 2 (WSL 2) if necessary.
• Installation is complete when you see the Docker icon in the system tray.

Installing Docker on macOS

• Download Docker Desktop from the Docker official website.
• Run the installer and copy Docker to your Applications folder.
• Launch Docker and complete the initial setup.

Installing Docker on Linux

Open a terminal and run the following commands sequentially to install Docker.

sudo apt-get update
sudo apt-get install ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

Once installation is complete, verify that Docker is installed correctly by running the command `sudo docker run hello-world`.

3. Setting Up a React Project with Docker

After installing Docker, follow these steps to run a React project in a Docker container.

Creating a React Project

Navigate to your desired directory in the terminal or command prompt and create a React project using the following commands.

npx create-react-app my-react-app
cd my-react-app

Creating a Dockerfile

In the root directory of your project, create a `Dockerfile` and add the following content.

FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]
EXPOSE 3000

This Dockerfile sets up a Node.js-based React application to be built and run within a container.

Creating a .dockerignore File

To exclude unnecessary files during the Docker build process, create a `.dockerignore` file with the following content.

node_modules
build

Building the Docker Image

Run the following command in the terminal to build the Docker image.

docker build -t my-react-app .

This command builds a Docker image based on the `Dockerfile` and tags it as `my-react-app`.

Running the Docker Container

Use the built image to run a Docker container.

docker run -p 3000:3000 my-react-app

This command maps port 3000 of the container to port 3000 on the host, running the React application.

Accessing the React Application

Open your browser and navigate to `http://localhost:3000` to check if the React application is running correctly.

The Role of WORKDIR and Virtual Directories

The `WORKDIR /usr/src/app` command sets the working directory within the Docker container. All subsequent commands in the Dockerfile are executed within this directory, improving the readability and maintainability of the Dockerfile.

Virtual Directories in Docker Containers

Directories inside a Docker container are independent of the host system and exist only while the container is running. The `/usr/src/app` directory inside the container is not present on the host system and can only be accessed within the container.

Conclusion

Using Docker allows you to manage your development environment more efficiently and run applications consistently anywhere. Enhance your understanding of Docker and start applying it to your projects.