CODEWITHSUNDEEP
gitgithubgithub-pagesgithub-actionsstorybook
brad
brad

Reputation: 356

Using Github Actions Fails to Deploy Storybook to Github Pages

I'm trying to deploy Storybook to Github Pages using Github Actions.

I've gone through a number of tutorials* as well as this answer, and tried experimenting with the .yml file after reading the Github Pages documentaiton, but so far nothing has worked.

Whenever I try to build and deploy, the deploy process either fails, or if the build succeeds (using the second .yml listed below), the project doesn't actually show up on the Github pages URL.

I know something likely needs to be changed in my .yml file, but so far I haven't found a fix to actually render Storybook on the repo's Github pages URL. Storybook builds fine when running the npm scripts locally.

Am I just missing something in my .yml configuration? I've already configured Github Pages to be set up for the repo that I'm using.

My package.json:

{
  "homepage": "http://<my github username>.github.io/<my github repo>",
  "name": "repo-name",
  "version": "0.1.0",
  "private": false,
  "license": "MIT",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "babel-loader": "^8.2.2",
    "feather-icons": "^4.28.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-feather": "^2.0.9",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -s public",
    "build-storybook": "build-storybook -o docs-build",
    "deploy-storybook": "gh-pages -d docs"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-controls": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-knobs": "^6.1.12",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/addon-storyshots": "^6.1.21",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.21",
    "gh-pages": "^3.1.0",
    "react-test-renderer": "^17.0.1"
  }
}



.yml configurations that I've tried and their outputs:

First .yml configuration:
Build fails, and I get this error:


fatal: could not read Username for 'https://github.com': No such device or address

name: Build and Deploy
on: 
  push:
    paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@main
      - name: Build Storybook
        run: | # Install npm packages and build the Storybook files
          npm install
          npm run build-storybook
      - name: Deploy to GitHub Pages
        uses: JamesIves/[email protected]
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: storybook-static # The branch the action should deploy to.
          folder: docs-build # The folder that the build-storybook script generates files.
          target-folder: docs # The folder that we serve our Storybook files from

Second .yml configuration:
Build succeeds, but when I go to Github pages there is a 404 where I'm expecting the Storybook to be.

name: Build and Deploy
on: 
  push:
    paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@main
      - name: Build Storybook
        run: | # Install npm packages and build the Storybook files
          npm install
          npm run build-storybook
      - name: Deploy to GitHub Pages
        uses: JamesIves/[email protected]
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: storybook-static # The branch the action should deploy to.
          folder: docs-build # The folder that the build-storybook script generates files.
          target-folder: docs # The folder that we serve our Storybook files from
      - name: Deploy storybook
        run: |
          npm run deploy-storybook

Tutorials and docs I've tried so far:
1.) How to Deploy Storybook to GitHub Pages https://medium.com/swlh/how-to-deploy-storybook-to-github-pages-4894097d49ab
2.) Github Actions Documentation https://github.com/JamesIves/github-pages-deploy-action

Upvotes: 1

Views: 2742

Answers (1)

Pava
Pava

Reputation: 31

This worked for me:

name: Build & Deploy Storybook
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install and Build 🔧
        # This needs an Acces Token stored as "GH_TOKEN" 👇
        run: |
          npm install
          npm run deploy-storybook -- --ci
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

where

Upvotes: 2

Related Questions