question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Build and deploy storybook static files to GitHub pages for develop and master

See original GitHub issue

Feature Description

We should make Storybook available on google.github.io/site-kit-wp.


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • When pushing to develop or master, Storybook static files should be built and written to the gh-pages branch.
  • In the gh-pages branch, a folder should be added per branch (e.g. so that the URLs will end up like https://google.github.io/site-kit-wp/storybook/develop and https://google.github.io/site-kit-wp/storybook/master).
  • This must not happen for pull-requests.

Implementation Brief

There is an easy-to-use Travis-CI integration for deploying to GitHub pages (which e.g. the Web Stories plugin is using: https://github.com/google/web-stories-wp/blob/d181a4ea75cff53db730920fb41c41e2624a0c96/.travis.yml#L130-L141). However, that appears not to support deploying only partial content - you can specify a local_dir, but not a remote_dir. Hence, using a GitHub action workflow makes more sense. A lot of the necessary code can be taken from the existing build-pr.yml workflow.

  • Add npm run build:storybook command that stores storybook in a storybook-static folder (ignore that folder in git).
  • Add build-storybook.yml workflow that runs npm run build:storybook, then uploads the files as artifacts, then downloads it and integrates them into the gh-pages branch (in a storybook/{$branch_name} folder) and commits.
  • Merge #1457.

QA Brief

Changelog entry

  • N/A

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
aaemnnosttvcommented, May 4, 2020

QA ❌

Currently no static assets are rendering in the build due to moving the files into a subdirectory; Storybook seems to assume that it’s running relative to the root rather than /storybook.

1reaction
felixarntzcommented, Apr 28, 2020

@aaemnnosttv I like your suggestion to use a subdirectory for storybook. I’ll update the IB (and PR). In terms of Netlify, I’d rather rely on GH Pages for now since that certainly works and is a thing we already have anyway, rather than adding another piece to our stack (may also be complicated because of google org requirements).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Deploy Storybook to GitHub Pages - DEV Community ‍ ‍
First, we have to create a docs folder at the root of our repository which will be used to host the published Storybook...
Read more >
How to Deploy Storybook to GitHub Pages | by Armin Yazdani
Firstly, install gh-pages in your application by running the following command: npm install gh-pages --save-dev or yarn add gh-pages -D.
Read more >
Using Github Actions Fails to Deploy Storybook to Github Pages
Build succeeds, but when I go to Github pages there is a 404 where I'm expecting the Storybook to be. name: Build and...
Read more >
How to Deploy a Static Website using Github - Towards AI
The alignment of the folders is essential. The HTML page name must be “index.html.” Only one Static HTML file can be deployed with...
Read more >
Learn Deploying Storybook – Design Systems with React ...
[00:01:22] So now we should have a git-repository, it should have all of our code on it, great. Let's build Storybook. And we...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found