Follow these steps to build production-grade workflow with Docker and React
By: Salma Elshahawy
Tags: JavaScript, Docker, React, Tech, Programming

Recently, I decided to extend my skills to include creating software images using Docker containers. I struggled a bit to connect the different pieces of puzzles, but finally, Thanks for Stephen Grider’s Udemy course “ Docker and Kubernetes: The Complete Guide” I got it to work. So, as usual, I am going to document what I learned so it will be easy for me and for anyone to implement the same concept in their application.

In this post, I will teach you how to configure the Dockerfile for both development and production environment. Also, I will walk you through on setting the Travis file to use Travis-CI integration tool. The project folder is available on my GitHub account for your reference.

What is Covered in this tutorial?

We will cover the following topics:

1. Building a single docker container for development environment — including port mapping using create-react-app npm package.

Configure Dockerfile.dev file

Configure docker-compose.yml file to map the services inside the container.

Configure travis.yml file for testing codebase as a preparation step for deploying.

2. Deploy the application image up to the AWS cloud services; this includes:

Create a Dockerfile for the production environment.

Create an account on AWS

Configure travis.yml for deploying.

This tutorial doesn’t cover building sophisticated images with multi-containers — it will be included in a separate post.

Pre-requisites

This tutorial assumes you have some a good knowledge of the following:

npm — have already installed create-react-app package, if not download here. Familiar with React-js Git and GitHub familiarity. Docker Basics, how it works. Docker downloaded on your local machine — including Docker-CLI, Download here. DockerHub account — Download here. YAML syntax, if not you can refer to this site. Travis-CI account, you can sign-up here using your GitHub account. AWS account — here if you don’t have one.

What is Docker???

Since I first heard of Docker I was curious to learn and use it. Docker is not necessary for any application; however, it is a tool in the normal development flow process which makes the developer’s life much more comfortable.

Not only developers, but also end users who are supposed to use that piece of software, and who are familiar with Redis, know how painful it is to install it into the local machine without using docker. Also, docker allows you set up the application infrastructure pipeline once and then any small changes can be done quickly without the need to re-architect your application infrastructure.

In short: Docker makes it easy to install and run software without worrying about setting up or dependencies.

ONE: Generate the React project

In this tutorial, I prefer to use the npm package (create-react-app) because it has a lot of pre-configured files which will make us focus on docker as a concept. So, start with opening up your terminal and type create-react-app project_name. Then assign that directory to be your current working directory.

TWO: Dockerfile for Development

In this tutorial, there are three commands we have to deal with:

npm run start: valid only for the development environment — starting the server at localhost. npm run test: run any tests associated with the codebase. npm run build: building a production version of the application suitable for production — zipping all the application into one folder suitable for deploying.

I am going to deploy to the AWS cloud, so I will follow the approach to create a separate dockerfile for the development environment. It will be responsible for running the image container in the development environment. The other Dockerfile will be responsible for building the image inside the production environment — we will create this later. For the npm run test command, we will write a configuration for Travis-CI to handle it.

NOW, create a new file in the root directory of the project and name it Dockerfile.dev — remember this is only to run our server inside the container.

Note: the configuration steps are almost the same for other application written in different languages.

THREE: Fetching the necessary images

To run the application as a Docker container image on any computer and be able to run the image without any errors, we have to instruct Docker which base image to use. Think of it like what OS the user should use to run the software, and which should be used to run the image successfully.

Go to dockerhub.com and sign-in, then navigate to the explore button — it will show all the available images in the alpine base image. Search for the node repository image. When you click on the official image repo, scroll down to the title “ How to use this image” then you will see that this image is based on the popular Alpine Linux project.