Skip to content

Add workflow for building and deploying Storybook #3933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 20, 2025
Merged

Add workflow for building and deploying Storybook #3933

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions .github/workflows/build-storybook.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
name: Build Storybook

on:
workflow_dispatch:
pull_request:
types: [opened, synchronize, reopened, ready_for_review]
push:
branches:
- main

permissions: {}

jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
steps:
- name: Checkout
uses: actions/checkout@v4

- uses: actions/setup-node@v4
with:
node-version-file: extensions/ql-vscode/.nvmrc

- name: Install dependencies
run: |
cd extensions/ql-vscode
npm ci
shell: bash

- name: Build Storybook
run: |
cd extensions/ql-vscode
npm run build-storybook
shell: bash

- name: Upload to GitHub Pages
id: deployment
uses: actions/upload-pages-artifact@v3
with:
path: extensions/ql-vscode/storybook-static

deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something that confuses me here is that both the build and deploy jobs both have a step named deployment. Although I see it is this way in the documentation, is this necessary or correct?

My understanding of the environment is that it will insert environment variables into all the steps in this job, so therefore this is executed before the job starts. And steps.deployment.outputs.page_url is referencing a value output by another step, but this job hasn't run yet, so is it referencing the deployment step from the build job? That seems to be what the copilot suggestion was getting at.

I'm wondering which bits can be deleted (if any) and it still works 🤷🏼

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this ensures that the URL shown for the github-pages deployment is the actual URL of the Pages site. It seems like this url is only evaluated once the workflow has finished, so the page_url is referenced from the actions/deploy-pages step. This would match with the documentation about this url parameter and also matches what is shown in the Actions logs: https://github.com/github/vscode-codeql/actions/runs/13410592273/job/37459738438#step:3:2.

if: github.event_name == 'push' && github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
permissions:
id-token: write
pages: write
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
Loading