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:
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:
ENV TZ=Asia/TokyoWORKDIR /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:
command: sh -c "cd /frontend && yarn install && yarn start"
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.
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.