CI/CD guides
GitHub Pages
Set up continuous integration and deployment of your Feaurevisor project with GitHub Actions and GitHub Pages.
See more about GitHub Actions set up in previous guide here.
Creating a new project#
This guide assumes you have created a new Featurevisor project using the CLI:
$ mkdir my-featurevisor-project && cd my-featurevisor-project$ npx @featurevisor/cli init$ npm install
GitHub Pages#
We are going to be uploading to and serving our datafiles from GitHub Pages.
GitHub Pages is a product that allows you to host your static sites and apps on GitHub's global network. Given Featurevisor project generates static datafiles (JSON files), it is a great fit for our use case.
Workflows#
We will be covering two workflows for our set up with GitHub Actions.
Checks#
This workflow will be triggered on every push to the repository targeting any non-master or non-main branches.
This will help identify any issues with your Pull Requests early before you merge them to your main branch.
name: Checkson: push: branches-ignore: - main - masterjobs: checks: name: Checks runs-on: ubuntu-latest timeout-minutes: 10 steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - name: Install dependencies run: npm ci - name: Lint run: npx featurevisor lint - name: Test specs run: npx featurevisor test - name: Build run: npx featurevisor build
Publish#
This workflow is intended to be run on every push to your main (or master) branch, and is supposed to handle publishing your generated datafiles to GitHub Pages:
name: Publishon: push: branches: - main - master# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pagespermissions: contents: write pages: write id-token: write# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.concurrency: group: 'pages' cancel-in-progress: falsejobs: publish: name: Publish environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: 20 - name: Install dependencies run: npm ci - name: Lint run: npx featurevisor lint - name: Test specs run: npx featurevisor test - name: Build run: npx featurevisor build - name: Create index.html run: echo "<html><body>It works.</body></html>" > datafiles/index.html - name: Setup Pages uses: actions/configure-pages@v4 - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: 'datafiles' - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 - name: Git configs run: | git config user.name "${{ github.actor }}" git config user.email "${{ github.actor }}@users.noreply.github.com" - name: Push back to origin run: | git add .featurevisor/* git commit -m "[skip ci] Revision $(cat .featurevisor/REVISION)" git push
After generating new datafiles and uploading them, the workflow will also take care of pushing the Featurevisor state files back to the repository, so that future builds will be built on top of latest state.
Once uploaded, your datafiles will be accessible as: https://<username>.github.io/<repo>/<environment>/featurevisor-tag-<your-tag>.json
.
You may want to take it a step further by setting up custom domains (or subdomains) for your GitHub Pages project. Otherwise, you are good to go.
Learn how to consume datafiles from URLs directly using SDKs.
Full example#
You can find a fully functional repository based on this guide here: https://github.com/meirroth/featurevisor-example-github.
Sequential builds#
In case you are worried about simultaneous builds triggered by multiple Pull Requests merged in quick succession, you can learn about mitigating any unintended issues here.