Here are simple steps that show you how to start with an empty React app (using create-react-app), create a production build of that app and then run it inside a Docker container.
Let's start by creating a new React app:
- Install create-react-app
npm install create-react-app --global
- Create a new React app:
- Go to the
react-docker-appfolder and run it, to make sure all is good:
cd react-docker-app && yarn start
yarn startcommand compiles the React app and opens the browser.
Now that we have the app running let's create a
Dockerfile in the root folder of the project. Here are the contents of the
Before we continue, let's explain what's happening in this
Lines 1-4 are the first stage of the build. In this stage, you copy all source code to the container and execute
yarn run build that creates an optimized production build.
Lines 6-10 are the second stage for the build. You install the serve package and on line 9, you copy the output from the first stage of the build from the folder
/app/build to the current folder in the container (
/app - this gets set by the
WORKDIR /app instruction in the
About multi-stage builds: If you're wondering about two FROM statements in the Dockerfile. This is because you want to use a multi-stage build. In the first stage of the build, you copy the source code to the container and run the build command. In the second build stage, you copy only the built artifacts (HTML, JS, ...) to the container. Using multi-stage build results in a significantly smaller Docker image. The first image in the example is ~198MB, while the second one is only 86.7 MB.
With the last line, you run the
serve command to serve the contents of the current folder on port
Instead of serve, you could also use Nginx; however that might require a bit more config.
To build the image, you can run the following command from the project root folder, where your
docker build -t react-docker-app .
-t you specify the name of the image, and with the
. you specify the build context (e.g. the current folder). When the build completes, the last line should look something like this:
Successfully tagged react-docker-app:latest
Finally, let's run this container now. To run it locally, you need to provide the name of the image and the port we want the React app to be accessible on. Note that we used port
80 in the serve command, so need to make sure to use
80 when specifying the container port like this:
docker run -it -p 8080:80 react-docker-app
Once the container is running, you can open
http://localhost:8080 and you'll be able to access the React app running inside the Docker container.
🔥 If you want to learn more about Kubernetes, Istio, Docker, and cloud-native in general, check out the my Learn Istio ebook 📖. You can get a free preview of the book at 👉 https://learnistio.com 👈