ReactJS + Docker : Getting started

#webdev #typescript #react #docker

ReactJS is a popular JavaScript library for building user interfaces. Docker is a containerization platform that allows you to package and deploy your applications in a consistent and portable way.

Why use Docker with ReactJS?

There are several benefits to using Docker with ReactJS:

Consistency: Docker ensures that your ReactJS application is run in the same environment on every machine. This can help to reduce errors and make it easier to deploy your application to production.
Portability: Docker images can be run on any platform that has Docker installed. This makes it easy to deploy your ReactJS application to different environments, such as your local machine, a development server, or a production server.
Scalability: Docker makes it easy to scale your ReactJS application by running multiple instances of the application in containers. This can be useful for handling high traffic loads or for running different versions of your application in parallel.

Getting started

First, let's create a React App. To do this, open terminal and hit command:

npx create-react-app my-app --template typescript
cd my-app
code .

This will open your React project in vscode. You can run and check your project using command:

npm run start

Now, create a build of your react project using command:

npm run build

You should see a build folder getting generated in project root directory that we are going to use later.

Next, let's install Docker on your machine. Once you have installed Docker, you can create a Dockerfile for your ReactJS application.

A Dockerfile is a text file that contains instructions for building a Docker image. The Dockerfile for a ReactJS application will typically include the following steps:

From: Specify the base image to use for your image. For a ReactJS application, you will typically use the node base image.
Workdir: Set the working directory for your container.
Copy: Copy the files from your ReactJS application directory into the container.
Run: Run the npm install commands to install the dependencies and build your ReactJS application.
Expose: Expose the port that your ReactJS application is running on.
CMD: Specifies the instruction to be executed when Docker container starts.

Once you have created a Dockerfile for your ReactJS application, you can build a Docker image using the docker build command.

To run the Docker image, you can use the docker run command. The docker run command will start a new container from the Docker image.

Implementation

Let's create a file named Dockerfile (yes, without file extension) and paste the below code in it:

FROM node:20-alpine

WORKDIR /app

COPY build/ .

RUN npm install -g serve

EXPOSE 3000

CMD ["serve", "-s"]

To build a Docker image from this Dockerfile, you can run the following command:

docker build -t my-app .

Note: For the above command to execute properly, make sure Docker Desktop is running, else it would throw an error like:

ERROR: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

To run the Docker image, you can run the following command:

docker run -p 3000:3000 my-app

That's it!!! You should be able to access your react app using http://localhost:3000

Bonus Tips:

For deflating Docker Image size:

Always use alpine as base image (node:20-alpine), as it is very small in size
Always build frontend applications outside of Docker environment and then package the output build folder into Docker instead of copying all the files into Docker and then running npm run install and npm run build.