React with Docker

Web application created with React is containerized with docker and started.
In this article, all I do is add docker-compose.yml to my already created app.
If you do not have your own react project (with Typescript), you can make your react project according to here.

The folder strucure is like:

docker-react-ts-app(project folder)
└─ Dockerfile
└─ docker-compose.yml

Create a file by referring to the above folder structure.

Create a folder called “docker-react-ts-app” and create a new file with the names “Dockerfile” and “docker-compose.yml” directly under it.

Create the Dockerfile

Dockerfile is like:

FROM node:16.15.0-alpine
ENV LANG=C.UTF-8
ENV TZ=Asia/Tokyo
WORKDIR /frontend# install app dependencies
COPY package.json ./
COPY yarn.lock ./
RUN yarn install
# add app
COPY . ./
EXPOSE 3000# start app
CMD ["yarn", "start"]

You can check the version of node by running “node -v” in the terminal. Specify the version in the form of “FROM node: ○○. ○○. ○”.

“ENV LANG = C.UTF-8” means to set the environment variable LANG to C.UTF-8. C represents the minimum English notation.

“ENV TZ = Asia / Tokyo” sets the time zone to Asia / Tokyo.
I am currently living in Japan, therefore I set it in Asian time. It is up to you. Even you can remove this.

WORKDIR means the working directory, such as RUN, CMD, and the working directory that runs the instance of the container image. I just set it as /frontend directory.

COPY is the command to copy a local file into the Docker image’s filesystem. And it can be run by RUN command.

EXPOSE is a command that exposes the container’s port. EXPOSE only exposes the port of the Docker container. You can specify the container port with the -p option without specifying the EXPOSE command.

CMD describe the command you want to execute by default when executing the container. Since it is the default, it can be overwritten with an argument when the container is automatic.

Create the docker-compose.yml

docker-compose.yml is like:

version: ‘3.9’
services:
react-frontend:
container_name: docker-react-ts-app-container
build:
context: .
dockerfile: Dockerfile
volumes:
- ./:/frontend
working_dir: ./frontend
ports:
— 3000:3000
command: sh -c "cd /frontend && yarn install && yarn start"
tty: true
environment:
— CHOKIDAR_USEPOLLING=true

If container_name is not specified, the container name will automatically be “COMPOSE_PROJECT_NAME variable + _ + service name + _ + serial number”.

Use volumes to mount the project root in the /app directory on the container side.
For the working directory, specify /app for working_dir.

After that, you can start it by executing “yarn install && yarnstart” specified by command.

When the command is “docker -compose up -d”, it moves to the frontend directory and starts the dev server.
The tty prevents the container from starting and quitting immediately.

Hot reload works if CHOKIDAR_USEPOLLING=true is set.

Build and Container

Run this command to build.

docker-compose build

The build command creates an image. It does not create a container.
If you don’t have any error, you run

docker-compose up -d

Run the command in the directory where docker-compose.yml is located to launch the React web app in your container. Since we start with yarn install(or if you prefer to npm, then npm install), it would take some time to complete the boot.

Check with a browser

You can connect to the web app with the ports specified in docker-compose.yml.
Since ports are specified by 3000, try accessing http: //localhost:3000.
If the web application can be started successfully, the application will be displayed on the screen.

Happy Engineering!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
TiShow

TiShow

80% is the creation, the rest is depression. Frontend developer and data scientist, designer. Looking for Physics Ph.D Twitter: @_t_i_show