Run a React App in a Docker Container
Tags: javascript, react, beginners, docker
Published: 2019-03-05 03:42:22

---
title: Run a React App in a Docker Container
published: true
description: Learn how to run a React app inside a Docker container
tags: javascript,react,beginners,docker
cover_image: https://images.unsplash.com/photo-1546900703-cf06143d1239?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2491&q=80
---

Here are simple steps that show you how to start with an empty React app (using [create-react-app](https://facebook.github.io/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:

1. Install create-react-app

```bash
npm install create-react-app --global
```
2. Create a new React app:

```bash
create-react-app react-docker-app
```

3. Go to the `react-docker-app` folder and run it, to make sure all is good:

```bash
cd react-docker-app && yarn start
``` 

>The `yarn start` command 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 `Dockerfile`:

{% gist https://gist.github.com/peterj/286b537f7948c0762220d7a8c60821d1 %}

Before we continue, let's explain what's happening in this `Dockerfile`.

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](https://www.npmjs.com/package/serve) 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 `Dockerfile`). 

> 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 `80`.

>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 `Dockerfile` is: 

```bash
docker build -t react-docker-app .
```   

With the `-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:

```bash
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 👈