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:

$ touch Dockerfile

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 a two-stage Docker build.

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

FROM node:12-alpine as builder WORKDIR /app

COPY package.json /app/package.json

RUN npm install --only=prod

COPY . /app

RUN npm run build

That’s how the beginning of the Dockerfile looks like. We’re using node: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 our package.json to a new folder in the container and install all of the packages. Next, we copy everything from the /services/client folder 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.

FROM nginx:1.16.0-alpine

COPY --from=builder /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

We copy the build from the previous step and paste it into the nginx folder. Then expose port 80 — 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: