Docker is pretty cool.
Bundling all your app environment in a single file is just awesome.
It saves you a lot of headache when dealing with dependencies/setup and other environment issues when creating a stable build system for your production app.
In this tutorial, we will dockerize a React app built with the famous create-react-app package using Docker.
- Create a new React app
npm create-react-app dockerized-react-app
- In the
dockerized-react-appfolder create a file named
- In the Dockerfile, add the following code
FROM mhart/alpine-node:11 AS builder
I’d recommend you to add a
.dockerignore file in your root directory. This will speed up the
docker build process by ignoring a dynamically generated files and dependencies.
- Create a docker image locally using the command
docker build --tag cra-docker:v1 . --build-arg REACT_APP_ENV="dev"
--build-arg is just to send an arg during the buld process.
This command will build the docker image on your PC. Just make sure that docker is installed and running in the background.
- Once the build is complete,
docker run -p 5002:5002 cra-docker:v1
Now, open your browser on https://localhost:5002 to browse your react app from the Docker app instance.
In some guides on Docker and npm, you will see people using the
--silent command in the Dockerfile. But, I suggest you to not use it. The
--silent option in
npm install swallows all the warnings and errors while installing the dependencies.
If there is an issue in your app due to any external/internal dependency, you will waste quite a lot of your precious time in finding the problem.
package.json file. It should have a “scripts” property with “start” child.
The environment variable
REACT_APP_ENV is just for your convenience to set a build environment like
production via the
docker build step. You can ommit it or replace the variable altogether with something else.