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:
- Gilab pages
- Gitlab CI/CD
A few assumptions:
- You have git setup
- You have a Gitlab account (with SSH setup for Gitlab)
- You don’t have a repo on gitlab called
my-awesome-app. If so, then use a different name below.
- You have Node installed (hopefully via nvm)
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
# Using the node alpine image to build the React app image: node:alpine # Announce the URL as per CRA docs # https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration variables: PUBLIC_URL: /my-awesome-app # Cache node modules - speeds up future builds cache: paths: - node_modules # Name the stages involved in the pipeline stages: - deploy # Job name for gitlab to recognise this results in assets for Gitlab Pages # https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements pages: stage: deploy script: - npm install # Install all dependencies - npm run build --prod # Build for prod - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46 - 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 artifacts: paths: - public # The built files for Gitlab Pages to serve only: - 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)
Once that passes checkout https://YOUR_GITLAB_USERNAME.gitlab.io/my-awesome-app.