React App on Section
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.
What You'll Build
Visit https://icy-tire-4479.section.app to see what you'll be building.
Option 1 - Copy Our GitHub Repo
Make a new repo from our template: in your browser visit https://github.com/section/react-tutorial 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).
- In your new GitHub repo, under Settings > Secrets > Actions, use
New repository secretto add these two:
SECTION_K8S_API_URL: this is the Kubernetes API endpoint for your new project
SECTION_API_TOKEN: this is a Section API token
- Make any change to
src/app.jsand 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
- Create a Dockerfile
- Build & push your container image
- Deploy to Section
Creating your Dockerfile
We're assuming you are either using the Section tutorial example, you have your own React app that compiles successfully, or a newly created React app eg:
npx create-react-app $NAME
Dockerfile in the root folder of your app. It should sit alongside package.json, eg the following
│ ├── favicon.ico
│ ├── index.html
│ └── ...
│ ├── App.js
│ ├── index.js
│ └── ...
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
COPY /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 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 Section
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, similar to our example.