Previously we worked our away through setting up React with Docker for the development phase. But what about when we’ve finished our neat application and want to share it with the world? This article will explain exactly how to do that.

Note: I highly recommend you check out the first part before reading this article. The previous chapter explained many concepts and how Docker works: “Here’s How You Can Use Docker With React”

---

Setting up Docker for Production

As of now, we have a Dockerfile for development, but what about production? To fix that, all we need is another Docker file, one targeted for the production build.

Creating the production Dockerfile

Go ahead and create a file called Dockerfile with the following contents:

	FROM node:alpine

	WORKDIR /app

	COPY package.json /app

	RUN yarn install && yarn cache clean

	COPY . /app

	CMD ["yarn", "run", "build"]

The Docker file is rather similar to the development one, isn’t it? The main difference between production and development is the last command, where we specify to run the build script.

Note: If the Dockerfile looks confusing to you, check out the first chapter, where we go over a similar file step-by-step.

The build script builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. If necessary, class names and function names can be enabled for profiling purposes. See the production build section for more information.

Testing the production Dockerfile

Before we deploy our Docker image to Travis CI, let’s make sure the Docker builds the production image successfully. Build the production Docker image like so:

Building the production Docker image

If everything went as expected, you should see the following message:

Successfully tagged indreklasn/my-react-docker-app:latest

Don’t forget to replace the docker image tag with your own name. For example, instead of indreklasn/my-react-docker-app you can do yourname/my-react-docker-app or something similar.

#docker #continuous-integration #programming #javascript #react #travis ci