---
source_url: https://itmustbecode.com/storybook-for-pcf-controls-part-2-publish-to-github-pages/
title: Storybook for PCF Controls - Part 2 : Publish to GitHub Pages
date: 2022-09-29T00:16:42+00:00
categories:
  - blog
tags:
  - dataverse
  - github-pages
  - pcf
  - storybook
word_count: 1021
reading_time_minutes: 5
type: posts
---

This is the **second part** of a series on **[Storybook](https://storybook.js.org/)** for PowerApps Component Framework ( **PCF**) controls, where I take one of my community PCF control hosted on Github ([CountryPicker.PCF](https://github.com/drivardxrm/CountryPicker.PCF)) and implement a Storybook from scratch.

While the [first post](/storybook-for-pcf-controls-part-1-set-the-story-straight/), revolved around the setup and authoring process of the **Storybook**, this one focuses on the **publishing** steps required to make Storybook static site **publicly** available from **GitHub Pages**.

We'll start by uploading the Storybook site **manually**. And then, with the help of a **GitHub action**, we will implement a **release pipeline** that publishes the site on every commit to the code repository.

{{< figure src="./image-35.png" alt="" caption="" >}}

## Why GitHub Pages ?

In essence, Storybook is an open source framework used to **develop**, **test** and **document** UI components in **isolation**. It creates beautiful static websites out of the stories (use cases) that can be shared amongst team members or publicly.

**GitHub Pages** is a 💸 **free** static site web hosting service that can serve sites directly from a GitHub repository. Moreover, since the PCF project used is already hosted on **GitHub**, It makes a lot of sense to host the Storybook site using the **GitHub Pages** service.

When published **GitHub Pages** sites can be reached following this convention :

```
https://{your_github_handle}.github.io/{repository_name}
```

You can access the GitHub Pages configurations by navigating to the **Settings -> Pages** Tab of any GitHub repository.

{{< figure src="./image-36.png" alt="" caption="" >}}

The subject is vast and goes far beyond the scope of this post. If you want to dig deeper into GitHub pages, here are some good reads :


👉[About GitHub Pages - GitHub Docs](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages)

👉[Collection: GitHub Pages examples](https://github.com/collections/github-pages-examples)


## Publish Storybook to GitHub Pages manually

To better understand the process, let's build and deploy our site to GitHub Pages **manually** at first. We will continue where we left in [part 1](/storybook-for-pcf-controls-part-1-set-the-story-straight/).


I'm following the steps described in this blog post :
👉[How to Deploy Storybook to GitHub Pages | by Armin Yazdani | The Startup | Medium](https://medium.com/swlh/how-to-deploy-storybook-to-github-pages-4894097d49ab)


Let's start by installing the **[gh-pages](https://www.npmjs.com/package/gh-pages)** npm package to the project.

```
npm install gh-pages --save-dev
```

Then add the following line in the scripts section of the **package.json** file.

```
"deploy-storybook": "gh-pages -d storybook-static"
```

{{< figure src="./image-34.png" alt="" caption="" >}}

This script will execute the **gh-pages deploy** command with the content of Storybook default output folder ( **storybook-static**).

To ensure that we have the latest version at hand, the first step is to compile the Storybook by running the **build-storybook** command. Since we are using the default configurations, this will produce the output of the static website in the ' **storybook-static**' folder.

{{< figure src="./image-24.png" alt="" caption="" >}}

{{< figure src="./image-30.png" alt="" caption="" >}}

Now we can run the **deploy-storybook** script that was added earlier.

{{< figure src="./image-18.png" alt="" caption="" >}}

The first time that the **deploy-storybook** script is executed, it automatically creates a ' **gh-pages**' branch in the code repository (... _this will be useful later_). After that it copies and commit the content of the **local storybook-static** folder into it.

{{< figure src="./image-29.png" alt="" caption="" >}}

Upon any commit to the **gh-pages** branch, an internal GitHub action ' **pages-build-deployment**' will kick, that will deploy the content of the branch to **GitHub Pages**.

{{< figure src="./image-26.png" alt="" caption="" >}}

Once the **pages-build-deployment** action is completed, you'll be able to appreciate your Storybook static website at the repository's own GitHub Pages address : https://**{your\_github\_handle}**.github.io/**{repository\_name}**

{{< figure src="./image-23.png" alt="" caption="" >}}

That's a good start, but it's far from ideal since most of the steps were done **manually** and the content of the site came from a **local** folder.

## Publish Storybook to GitHub Pages Automatically

Let's push this a little further and automate the process so that a fresh version of the Storybook website gets published on every commit to the underlying GitHub repository.


I'm basically following the steps from this blog post, so credit goes to the author
👉[https://budiirawan.com/how-to-publish-storybook-github-pages/](https://budiirawan.com/how-to-publish-storybook-github-pages/)


Because of the manual publish done earlier our code repository already contains a **gh-pages** branch so the only remaining step is to create a **GitHub action** folder in the project **.github/workflows/** and create an action file **storybook.yml**.


The script uses the following (widely used) community GitHub action
👉 [https://github.com/JamesIves/github-pages-deploy-action](https://github.com/JamesIves/github-pages-deploy-action)


Once commited in the repo, the action will **trigger on every commit** to the main branch. It's basically doing the same thing explained earlier in the manual steps but **inside a build agent** instead of locally on your computer.

1. **run build-storybook**-\> will generate the Storybook static website in the **storybook-static** folder.
1. **github-pages-deploy-action** -\> will publish the content of the **storybook-static** folder in the **gh-pages** branch.
1. Upon commit to the **gh-pages** branch, the **pages-build-deployment** action will be triggered and the site will be published.

Thats all there is, you now have a **fully automated release pipeline** for your PCF control Storybook site. You won't have to do anything and your Storybook website will be refreshed upon any change the source code.

{{< figure src="./storybook_githubpages.gif" alt="" caption="" >}}

This makes **GitHub Pages** the perfect vehicule to host **Storybook** sites and broadcast community PCF controls usage and documentation to potential users.


The final Storybook can be found here :
👉[https://drivardxrm.github.io/CountryPicker.PCF/](https://drivardxrm.github.io/CountryPicker.PCF/)


## Links

{{< linkcard url="/storybook-for-pcf-controls-part-1-set-the-story-straight/" title="Storybook for PCF Controls - Part 1 : Set the Story Straight" summary="Learn how to implement and publish a Storybook for a Power Apps Component Framework project." image="./book-ga3d7b30ed_640.jpg" domain="itmustbecode.com" new_tab="false" nofollow="false" >}}


{{< linkcard url="https://youtu.be/2MsN8gpT6jY" title="What is GitHub Pages?" summary="GitHub Pages lets you turn GitHub repositories into websites that showcase your portfolio, your projects, their documentation, or anything else you want to s..." image="https://img.youtube.com/vi/2MsN8gpT6jY/maxresdefault.jpg" domain="youtu.be" new_tab="true" nofollow="true" >}}


{{< linkcard url="https://medium.com/swlh/how-to-deploy-storybook-to-github-pages-4894097d49ab" title="How to Deploy Storybook to GitHub Pages" summary="I used Storybook to document my React components and host it on GitHub Pages to make it accessible for other members of the team…" image="/linkcards/135f96a795da29f4.png" domain="medium.com" new_tab="true" nofollow="true" >}}


{{< linkcard url="https://budiirawan.com/how-to-publish-storybook-github-pages/" title="How to publish Storybook to Github Pages" summary="In this post, I’m going to share about how to deploy Storybook to Gihub pages via Github Actions." image="/linkcards/1f90aea7ea5673d4.jpg" domain="budiirawan.com" new_tab="true" nofollow="true" >}}


{{< linkcard url="https://github.com/JamesIves/github-pages-deploy-action" title="GitHub - JamesIves/github-pages-deploy-action: Automatically deploy your project to GitHub Pages using GitHub Actions. This action can be configured to push your production-ready code into any branch you’d like." summary="Automatically deploy your project to GitHub Pages using GitHub Actions. This action can be configured to push your production-ready code into any branch you'd like. - GitHub - JamesIves/github-..." image="/linkcards/4bd37c8a036f11aa.png" domain="github.com" new_tab="true" nofollow="true" >}}


{{< linkcard url="https://www.npmjs.com/package/gh-pages" title="gh-pages" summary="Publish to a gh-pages branch on GitHub (or any other branch on any other remote). Latest version: 4.0.0, last published: 5 months ago. Start using gh-pages in your project by running `npm i gh-pages`. There are 940 other projects in the npm registry using gh-pages." image="/linkcards/b45ab5f42375fd92.png" domain="www.npmjs.com" new_tab="true" nofollow="true" >}}

Image by [Mahesh Patel](https://pixabay.com/users/readyelements-8569947/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3509489) from [Pixabay](https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3509489)