Dev utterings   Whoami

Build a React Website with full CI/CD in less than 2 minutes

I’m going to show you how to deploy a static React website in under 2 minutes, with full CI/CD, onto the WWW.

You’ll be using:

A few assumptions:


Start the time!

Let’s create a new React App using Create React App

# Using npx - create a react app!
npx create-react-app my-awesome-app

# Go into the app directory
cd my-awesome-app

# Add ci configuration
touch .gitlab-ci.yml

# Using your favourite editor - mine being vscode
code .gitlab-ci.yml

Copy the following into the .gitlab-ci.yml file.

# Using the node alpine image to build the React app
image: node:alpine

# Announce the URL as per CRA docs
  PUBLIC_URL: /my-awesome-app
# Cache node modules - speeds up future builds
  - node_modules

# Name the stages involved in the pipeline
- deploy

# Job name for gitlab to recognise this results in assets for Gitlab Pages
  stage: deploy
    - npm install # Install all dependencies
    - npm run build --prod # Build for prod
    - cp public/index.html public/404.html # Not necessary, but helps with
    - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
    - mv build public # Move build files to public dir for Gitlab Pages
    - public # The built files for Gitlab Pages to serve
    - master # Only run on master branch

All ready - let’s push it up to Gitlab to build and deploy.

# Initialize the repo
git init

# Stage all the files for commit
git add .

# Commit the files
git commit -m 'first commit!'

# Push up to gitlab
git push --set-upstream [email protected]:YOUR_GITLAB_USERNAME/$(git rev-parse --show-toplevel | xargs basename).git $(git rev-parse --abbrev-ref HEAD)

Now visit

Once that passes checkout


Written on Aug 12, 2018.