Chapter 11. Building and Deploying React Applications with Docker Containers

Up until this point in the book, you've been running your React applications in development mode, using the various tools that you've been learning. In this chapter, we'll switch our focus to production environment tooling. The overall aim is to be able to deploy your React application to a production environment. Thankfully, there's much tooling to help with this work, which you'll familiarize yourself with in this chapter. Your goals in this chapter are:

• Building a basic messaging React app that utilizes an API
• Using a Node container to run your React application
• Splitting your app into deployable services that run in containers
• Using static React builds for production environments

Building a messaging app

It's difficult to talk about tooling used to deploy React applications without any context. For this, you'll throw together a basic messaging app. In this section, you'll see how the app works and how it is built. Then, you'll be ready for the remaining chapter sections where you'll learn how to deploy your application as a set of containers.

The basic idea of this app is to be able to login and send messages to your contacts, as well as receiving messages. We'll keep it super simple. In terms of functionality, it'll barely match SMS capabilities. In fact, that can be the app title—Barely SMS. The idea is to have a React application with enough moving parts to test out in a production setting, as well as a server that you'll be able to deploy in a container later on.

For visual appearance, we'll use the Material-UI (https://material-ui-next.com/) component library. However, the choice of UI components should not affect the lessons of this chapter.

Starting Barely SMS...

Getting started with Node containers

Let's start things off by running the Barely SMS React dev server within a Node.js Docker image. Note that this is not part of the production deployment. This is just a starting point for you to get familiar with deploying Docker containers. As we progress through the remaining sections in this chapter, you'll move steadily toward a production-level deployment.

The first step to getting your React application into a container is creating a Dockerfile. If you don't have Docker installed on your system already, find it here along with installation instructions: https://www.docker.com/community-edition. If you open up a terminal and change into the getting-started-with-containers directory, you'll see a file called Dockerfile. Here's what it looks like:

FROM node:alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

This is the file that's used to build an image. An image is like a template for the container...

Composing React apps with services

The main challenge with the previous section was that you had a user interface service self-contained as a running container. The API service, on the other hand, was off doing its own thing. The next tool that you'll learn how to use is docker-compose. As the name suggests, docker-compose is how you compose larger applications out of smaller services. The next natural step for Barely SMS is to use this Docker tool to make the API service and to control both services as one application.

This time, we'll need two Dockerfile files. You can reuse the Dockerfile from the preceding section—just rename it to Dockerfile.ui. Then, create another Dockerfile that's nearly identical—call it Dockerfile.api and give it the following contents:

FROM node:alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3001
CMD [ "npm", "run", "api" ]

The two differences are the EXPOSE port value and the CMD that is run. This command starts the API server...

Static React builds for production

The final step to making Barely SMS ready for production deployment is removing the React development server from the UI service. The development server was never intended for production use because it has many parts that aid developers, but ultimately slow down the overall user experience and have no place in a production environment.

Instead of using a Node.js based image, you can use a simple NGINX HTTP server that serves static content. Since this is a production environment and you don't need a development server that builds UI assets on the fly, you can just use the create-react-app build script to build your static artifacts for NGINX to serve:

npm run build

Then, you can change the Dockerfile.ui file so that it looks like this:

FROM nginx:alpine 
EXPOSE 3000 
COPY nginx.conf /etc/nginx/nginx.conf 
COPY build /data/www 
CMD ["nginx", "-g", "daemon off;"] 

This time, the image is basic on an NGINX server that serves static content, and we're passing it...

Summary

In this chapter, you built a simple messaging app called Barely SMS. Then, you learned how to deploy this app as a Docker container. Then, you learned how to package services together, including the UI service, so that you have a higher level of abstraction to work with when deploying applications with many moving parts. Lastly, you learned how to build production-ready static assets and serve them with an industrial strength HTTP server—NGINX.

I hope this has been an enlightening read. It was both a challenge and a joy to write. Tooling in web development shouldn't be as difficult as it has been over the past decade. Projects like React and browser vendors like Chrome are starting to change this trend. I believe that any technology is only as good as its tooling. Now that you have a firm handle on tooling available in the React ecosystem, put it to good use and let it do the hard work for you.