Skip to main content

React App on CloudFlow

Learn how to run a React app at the edge for low latency and high availability. You can use our repo as a template, or perform the steps yourself using the Kubernetes dashboard or kubectl commands.

Option 1 - Copy Our GitHub Repo

workflow status

Make a new repo from our template: in your browser visit and select Use this template (don't clone, don't fork, but use the template). Choose yourself as an owner, give it a name of your choice, and make it be Public (not Private).

  1. In your new GitHub repo, under Settings > Secrets > Actions, use New repository secret to add these two:
  2. Make any change to src/app.js and watch your changes go live.

Option 2 - Step by Step


  • Docker or equivalent installed
  • A public container repository account (eg GitHub or Docker Hub)
  • (optional) An existing React app
  • (optional) kubectl


  1. Create a Dockerfile
  2. Build & push your container image
  3. Deploy to CloudFlow

Creating your Dockerfile

We're assuming you are either using the CloudFlow tutorial example, you have your own React app that compiles successfully, or a newly created React app eg:

npx create-react-app $NAME

Create a Dockerfile in the root folder of your app. It should sit alongside package.json, eg the following

├── public
│ ├── favicon.ico
│ ├── index.html
│ └── ...
├── src
│ ├── App.js
│ ├── index.js
│ └── ...
├── Dockerfile
├── package-lock.json
└── package.json

The Dockerfile's contents should be the following:

FROM node:alpine as build
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm clean-install
RUN npm install react-scripts -g
COPY . ./
RUN npm run build

# production environment
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

This script would create a clean build of your React app, and host it on port 80 of a lightweight nginx image when it's run.

Building the container image

Simply run the following command from the Dockerfile's directory to build and tag your image.

# Replace these example values

docker build . --tag$USER/$IMAGENAME:$TAG

Push your image to a repository

We will be pushing the container image to GitHub for this example. Follow the instructions to do a docker login on your terminal before running the next command.


echo $GITHUB_TOKEN | docker login -u $GITHUB_USER --password-stdin
docker push$USER/$IMAGENAME:$TAG

Deploy to CloudFlow

Follow the steps in this doc - Deploy a Project - and simply insert your image name from before, and specify port 80.

That's it! Navigate to your project URL and you'll see your React page live.

React demo splash page