DEV Community

Cover image for Deploy a Vue/React app to GH Pages
Michael Currin
Michael Currin

Posted on

Deploy a Vue/React app to GH Pages

This guide takes you through how to deploy a Node app with GitHub Actions so that the static output can be served as GH Pages. This works well for Single-Page Applications, such as if using React or Vue.

Submission category

This is my submission to GitHub Actions Hackathon under DIY Deployments.

How it works

  1. My workflow will be triggered by any pushes to master and any Pull Requests against master. Any changes to the docs directory will not trigger the workflow, as there is no point in rebuilding the app in that case.
  2. The GitHub Actions environment already includes Node and Yarn, so if you don't care about the specific versions needed, you can leave out setup steps. For more control, see Node workflows.
  3. There are shell steps to install NPM dependencies, run checks (linting and formatting) and then build the app. You can use npm or yarn in the steps.
  4. The final step uses an Action which will take the unversioned output in the dist directory and commit it to the root of the gh-pages branch. For Vue, dist is typical, while React projects use build.

The repo should configured to serve the gh-pages branch as a site.

Sample YAML file

Create a workflow as .github/workflows/main.yml in your repo.

name: Deploy GH Pages

on:
  push:
    branches: master
    paths-ignore:
      - "docs/**"

  pull_request:
    branches: master
    paths-ignore:
      - "docs/**"

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout πŸ›ŽοΈ
        uses: actions/checkout@master
        with:
          persist-credentials: false

      - name: Install πŸ”§
        run: yarn install    # OR npm install

      - name: Lint 🧐
        run: yarn lint:check # OR npm run lint:check

      - name: Build πŸ—οΈ
        run: yarn build      # OR npm run build
        env:
          NODE_ENV: production

      - name: Deploy to GH Pages πŸš€
        if: ${{ github.event_name != 'pull_request' }}
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: dist
Enter fullscreen mode Exit fullscreen mode

Note that you don't have to generate or set a token - a token will be generated for you by GH Actions. A token which only has access to the current repo and no human will need to interact with the token.

After committing the above file, check your Actions tab and wait for the workflow to run.

After it is successful, go to repo settings and enable Pages against the root of your gh-pages branch, to serve that as a GH Pages site.

Then check the Environment section to see it deployed.

Note also that the actual deploy step only runs against master commits directly and not on a Pull Request. So you can safely have your test and build steps run against a feature branch on a Pull Request for quality control, without actually deploying anything until the PR gets merged.

Workflows in use

Vue

I have a vue-quickstart repo which was generated with Vue CLI and then extended with documentation, CI/CD, and demo site.

GitHub logo MichaelCurrin / vue-quickstart

Starter template for a Vue 2 site - including docs and CI deploy to GH Pages

Vue Quickstart

Starter template for a Vue 3 site - including docs and CI deploy to GH Pages

Deploy GH Pages GitHub tag License

Made with Node Made with Yarn Made with Vue

Preview

Use this project

View site GH Pages

Use this template

After you've looked at the demo screenshot and site, you are welcome to create your own using the template button. This will copy this project and add it to your repos (no forking needed, but please star the original repo).

Documentation

How to install and run the app locally and deploy it to GH Pages

View - Documentation

About

What is Vue?

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Why not React?

Vue is intended to be more beginner-friendly (I agree it is) and the vue repo has more GH stars than the react repo, if that is any indication of adoption by the community.

Vue is open-source and was created by one person originally. React was created at Facebook.

Resources

Need are some resources…

See main.yml there.

React

I did the same thing for React:

GitHub logo MichaelCurrin / react-quickstart

Starter template for a React app - including docs, CI, and hosting βš› πŸ“¦

React Quickstart βš›οΈ πŸ“¦

Starter template for a React app - including docs, CI, and hosting

GH Pages Deploy GitHub tag License

Made with Node Made with Yarn Made with React

Preview

How to create a new React app

Use this project as a template

Use this template

Documentation

To install, run and deploy the app, see this project's docs:

Docs

To learn how to use this project and see how a React project works, see the Template notes section of the docs.

License

Released under MIT by @MichaelCurrin.

This project is based on the template from the React CLI. I have added my own docs, the deploy flow and made very minor changes to the app.

See main.yml there.

Resources

On Code Cookbook

I have a ton of GH Actions workflows you can browse here:

On my Dev Resources site

More template repos

No Node or CI needed here! These use CDN URLs to load React or Vue in the browser and that static HTML gets served directly on GH Pages without a build step.

Credits

Photo by Andrik Langfield on Unsplash

Discussion (0)