Power Up Your React Development with Docker: Streamlined Workflows and Effortless Live Reload

Why to use Docker?
Docker is an open platform that offers portability, consistency, and scalability for developing, shipping, and running applications in different environments. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly.
A Docker container, unlike a virtual machine, does not require a separate operating system. This gives Docker container advantages such as being light-weight, consuming less space, more portability, higher security, and needing short boot-up time.

When to use Docker?
1- If your business grows and new developers can join your team every few months. So instead of wasting valuable time setting up their local development environment. Such as the database or third-party libraries which may take a few hours to a couple of days. Which depends on the complexity of the project. Docker helps automate this setup so new developers can get right on board.

2- If the same software needs to run in a different environment: for example, a developer working on two PCs, development PCs and production servers, developers PCs, and testers PCs. Docker, you can run your application in separate containers, so your application can run in a consistent and predictable way in each environment.

3- If you need to test new technologies for your program, such as a new database, a different programming language, or new tools. So Docker Hub can be leveraged to pull the required package, tool or database to test with your application into an isolated container.

4- In case your software requires running multiple applications on the server? So, with Docker, you can keep the components of each application in separate containers even if they share the same resources.

When to avoid using Docker?
1- Working on the desktop application. Because Docker is more useful with web applications running on a server. Also, the rich GUI also requires additional solutions to work with Docker.

2- Working on a small application that does not require any additional tools or services.

3- If your development team consists of one developer. In this case, the benefits of using Docker will be less, and you can start using Docker when your software starts to grow.

Run React App on a Docker container to test a new environment:
1- Install Docker in your PC form the official website
https://docs.docker.com/desktop/install/windows-install/

2- Add Dockerfile to your project directory which will be used to build a Docker image (Dockerize the React App)

# Stage 1
# Use the desired Node.js runtime as the base image
FROM node:18-alpine AS build
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
# Set the working directory in the container
WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the working directory
COPY package.json ./
COPY pnpm-lock.yaml ./

# Install project dependencies
RUN pnpm install

# Copy the entire React app code to the container
COPY . .

# Stage 2
# Expose the port of your application to bind with the host port
EXPOSE 3000

# run your app
CMD ["pnpm", "run", "start"]

3- Add .dockerignore file:

/node_modules
/.history
/build
npm-debug.log
.git
.gitignore

4- Build a Docker image based on Dockerfile
docker image build -t :
-t option specifies the name and tag (latest by default) for the image. represents the path in which you want to run the command (. (dot at the end) represent the current directory)

After building the image, you can review the result in Docker Desktop software as the following:

5- Run Docker Container based on the generated image. By clicking on run or by using the following command
docker run --name -p 3005:3000 -d -v ${pwd}
For example: docker run --name ecommerce-website-react-reactquery-redux -p 3005:3000 -d -v ${pwd} ecommerce-website-react-reactquery-redux
Navigate to http://localhost:3005/ in your browser to view the app.

Another way to run a container based on a Docker image is by clicking the run button next to the image name in the Docker desktop software:

6-Install the following extensions in VS Code
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
marketplace.visualstudio.com/search?term=do..

7- In the lower left cornet in VS Code you will find a button “Open a remote view”. After clicking this button, click on “Attach a running container”.

After selecting the desired container, a new VS Code window will appear, in which you can make all the changes that you want and it will reflect in the browser.