LWC and GitHub Actions / Pages

by Austin Andrews

Sharing what you create with lwc.dev can be as easy as adding a GitHub Action to deploy to GitHub Pages.

  • GitHub Pages are static pages hosted at user.github.io/
  • These static files live in your github.com/user/user.github.io repo.
    • Create a blank repo with this name if it doesn't exist.
  • GitHub Actions are .yml files in the .github/workflow/file.yml directory of your project. These can subscribe to events, like a user pushing to the master branch, and then spin up a docker container to do anything.

The script below is going to do a few things.

  • Checkout your projects files
  • npm install
  • npm run build (build LWC application to /dist)
  • Clone our user.github.io repo.
  • Copy /dist/* to a folder in the user.github.io/ folder.
  • (optional, we need non-absolute paths in index.html, so remove / at the start of urls)
  • Git Add + Commit + Push to user.github.io.

The script will also need a few secrets added. Once a secret is set in the repo settings tab it becomes readonly.

  • GIT_USER - Your username or bot account
  • GIT_TOKEN - Personal Token (treat this like a password!)
  • GIT_EMAIL - Used for commit.
  • GIT_NAME - Your name or a "Bot"

Secrets are also removed from logs. For instance if you don't want your email or name in the logs, save them as secrets!
You can use any user as long as they have write access to the repository.

name: CD

on:
  push:
    branches:
    - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Checkout
      uses: actions/setup-node@v1
      with:
        node-version: 10.x
    - name: npm install, build, and deploy
      run: |
        npm install
        npm run build
        git clone https://${{ secrets.GIT_USER }}:${{ secrets.GIT_TOKEN }}@github.com/Templarian/templarian.github.io
        cp -rf dist/. templarian.github.io/lwc-ui/
        cd templarian.github.io
        git config --global user.email "${{ secrets.GIT_EMAIL }}"
        git config --global user.name "${{ secrets.GIT_NAME }}"
        sed -i 's/"\//"/g' lwc-ui/index.html
        git add .
        git commit -m "Deploy lwc-ui"
        git push

In the above script replace templarian with the name of your user. The secret GIT_USER could be used here, but it's important to illustrate that another user with access could be used. Such as a bot account.

Similar GitHub Actions can be used to sync files between repositories. You can also parse the commit message and only build when a certain word is found.