Dokku Dockerfile deployment for Create React App

Dockerfile

# DISCLAIMER: This is probably not the best way to do it. This is just one way to make it work.

# There's 2 stages:
# - building the app
# - serving the app

# Build step
FROM node:10 as builder

# in case you want to use ENV variables you need to provide them as build-time configuration arguments
# https://github.com/dokku/dokku/blob/master/docs/deployment/methods/dockerfiles.md#build-time-configuration-variables
ARG REACT_APP_YOUR_ARGUMENT

# Make sure we're in production mode and convert the build-time argument to and environment variable
ENV NODE_ENV=production \
  REACT_APP_YOUR_ARGUMENT=${REACT_APP_YOUR_ARGUMENT}

# I'm using yarn, in case you're using npm you should add your package-lock.json file
ADD yarn.lock /yarn.lock
ADD package.json /package.json

ENV NODE_PATH=/node_modules
ENV PATH=$PATH:/node_modules/.bin

# Again, I'm using yarn. Use npm install in case you're using npm
# Not sure why production should be false, but I had some issues when using regular yarn install
RUN yarn install --production=false

# Adding the actual code
WORKDIR /app
ADD . /app

# Creating a production build. Use npm build in case you're using npm.
RUN yarn build

# Step 2: serving the production build
# You should probably add a version number for the Docker image for reproducable builds...
FROM nginx:alpine

# We need some custom nginx configuration, which we import here
# You can even configure more if you use a nginx.conf.sigil file (http://dokku.viewdocs.io/dokku/configuration/nginx/#customizing-the-nginx-configuration)
COPY nginx.default.conf /etc/nginx/conf.d/default.conf

# Copy our production build from the first step to nginx's html directory
WORKDIR /usr/share/nginx/html
COPY --from=builder /app/build .

# Expose port 5000, maybe this should be a variable provide by Dokku
EXPOSE 5000

nginx.default.conf

server {
    # Listen to port 5000, maybe this should be a variable provide by Dokku
    listen       5000;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # Make sure all requests either serve the file or other wise serve index.html
        # Useful if you use react-router or the History API
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}