support for Storybook deployer for git Lab pages

[varunrajasekhar]

Is there a storybook deployer support for GitLab Pages (not for Git Hub pages)? I need to understand how to manually integrate storybook serverless deployment onto Gitlab Pages. I read all the documentation and could not find a support doc for GitLab (found it for GitHub and AWS)

[filozofer]

Did you succeed to deploy a static-storybook in gitlab pages ?

Currently I try to do it with these .gitlab.ci.yml file:

image: node:12.5.0

cache:
  paths:
    - node_modules/

stages:
  - deploy

pages:
  stage: deploy
  script:
    - yarn install
    - yarn build-storybook
  artifacts:
    paths:
      - public
  only:
    - master

With a yarn build-storybook doing: "build-storybook": "build-storybook -s public -c .storybook -o public" Job succeed to finish but I have no "Pages" menu and the default page url return me a 404 ><

[Guusy]

Any news? 😄

[rdennis]

I'm not sure if it helps anyone, but I can confirm that deploying to gitlab pages with their CI works. Here's my .gitlab.ci.yml.

# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
image: node:10.18.0-slim

# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
    paths:
      - node_modules/

# This job is required for GitLab Pages
pages:
    stage: deploy
    # Export storybook as a static site (to public)
    script:
      - npm install
      - npm run build-storybook -- -o public
    # Required artifact for GitLab Pages
    artifacts:
        paths:
          - public
    # Only run on the `storybook` branch
    only:
      - storybook

[KamranKhan-Dev]

@rdennis Can I just ask what version of Storybook you're using? As I am not able to run build-storybook on GitLab CI with v5.3.19.

[kwhitejr]

I can confirm that the following minimalist setup and steps work:

1. Add build scripts to package.json

"sb:build": "build-storybook -c .storybook -o public", // use whatever script alias you want
"sb:serve": "npx http-server public" // not strictly necessary, but good to test your build

2. Add a .gitlab-ci.yml to project root

image: node:12-slim # or whatever version of node you are on

cache:
  paths:
    - node_modules/

pages:
  stage: deploy
  script:
    - npm install
    - npm run sb:build # make sure this matches your actual build script alias
  # Required artifact for GitLab Pages
  artifacts:
    paths:
      - public

3. Navigate to https://user-or-team-name.gitlab.io/project-name
4. ...profit!

Naturally, this setup is only a starting point. Recommend that you test before deploy, cache as much as possible, only build on merges to master, etc. Would love to hear your suggestions! Cheers.

[kwhitejr]

@rdennis Can I just ask what version of Storybook you're using? As I am not able to run build-storybook on GitLab CI with v5.3.19.

I have the following storybook-related devDependencies:

"@storybook/addon-a11y": "^5.3.19",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-backgrounds": "^5.3.19",
    "@storybook/addon-centered": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/react": "^5.3.19",

But I run storybook itself via npx: "storybook": "npx start-storybook -p 6006 -c .storybook"

[rdennis]

Sorry, I've been off of this project for a bit. Our current processes uses storybook v5.3.18. We did recently have an issue where we had to move off of the *-slim node images (there was a missing dependency I believe).

Here is our current .gitlab-ci.yml

# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
image: node:11.0

# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
    # per-branch cache
    paths:
        - node_modules/

# Determines order of stages (default: build, test, deploy)
stages:
    - build
    - test
    - deploy

# Always runs first
install:
    stage: .pre
    script: npm install

# Builds components
build:
    stage: build
    script: npm run build

# Runs test suites
test:
    stage: test
    script: npm test

# This job is required for GitLab Pages
pages:
    stage: deploy
    # Export storybook as a static site (to public)
    script: npm run build-dl-storybook -- -o public
    # Required artifact for GitLab Pages
    artifacts:
        paths:
            - public
    # Only run on the `master` branch
    only:
        - master

[jondotblack]

The only addition I would have is if you already have a public directory with static assets you may need to update the pages stage to build to one directory and copy over to public.

pages:
  stage: pages
  script:
    - npm install
    - npm run build:storybook
    - mv dist/* public
  artifacts:
    paths:
      - public
  only:
    - master

Can see my full config file here - https://gitlab.com/jondotblack/jon.black/

[verluci]

How do you force storybook to load files from group.gitlab.com/repo instead of group.gitlab.com? Right now I'm just getting 404/Mime-type errors

[bryanjtc]

@verluci Did you find a solution? I'm having the same problem