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 https://github.com/section/react-template 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​

Prerequisites​

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

Steps​

  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:

Dockerfile
FROM node:alpine as build
WORKDIR /app
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
EXPOSE 80
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
USER=cloudflow
IMAGENAME=react
TAG=0.0.1

docker build . --tag ghcr.io/$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.

GITHUB_TOKEN="" # https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

echo $GITHUB_TOKEN | docker login ghcr.io -u $GITHUB_USER --password-stdin
docker push ghcr.io/$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