Dockerize a React App and an Express API With MongoDB
Roberto Penchev
March 4, 2020

For sake of simplicity, I assume you have a working front end and back end — as well as connected database.

The best idea is to have both the API and client repos in one folder. You can have one remote repo with both of them or use two separate remote repos and then combine them with parent remote using Git submodules. That’s how I did that.

React App

I used Create React App (CRA) with TypeScript for my project. It was a simple blog with a couple views.

The first thing to do is to create a Dockerfile in the client root folder. To do that, just type:

function create(){
  return false

Open the file, and let’s fill it out. I’m using TypeScript with my CRA, so first I have to build my application. Then, I take what I get and host it all as static files. To achieve that, we’ll go with atwo-stage Docker build.

The first stage is using Node to build the app. I use theAlpine version — as it’s the lightest, so our container will be tiny.

some code here

That’s how the beginning of the Dockerfile looks like. We’re usingnode:12-alpine as builder, then setting up a working directory to/app. That’s going to create a new folder in our container. We copy ourpackage.jsonto a new folder in the container and install all of the packages. Next, we copy everything from the/services/clientfolder and paste it into our container. The last bit of that step is to build everything.

Now we have to host our freshly created build. To do that, we’re going to use NGINX — again in the Alpine version to cut on size.

We copy the build from the previous step and paste it into thenginxfolder. Then expose port80— that’s going to be the port on which our container will be listening for connections. The last line is to start NGINX.

That’s all for the client part. The whole Dockerfile should look like this:

Express API

The API is quite simple as well — with RESTful routing to create posts, handle the authorization, etc. Lets start with creating a Dockerfiler in the API root folder in the same way as we did in the previous part.

I used ES6 features, so I have to compile everything to Vanilla JS to run it, and I went with Babel. As you can guess, that’s going to be a two-stage build again.

It’s very similar to the client’s Dockerfile, so I won’t be explaining it again. There’s one difference, though.