Leff
Leff

Reputation: 1360

Github actions deployment of react storybook to github pages deletes whole repo

I have a react project where I have added storybook which I would like to publish to github pages. I have set the github pages to build the site from the /docs folder in the main branch. I have followed this article to set up the whole deployment process. My storybook.yml looks like this:

name: Build and Deploy
on:
  push:
    paths: [ "src/stories/**" ] # Trigger the action only when files change in the folders defined here
env:
  NPM_TOKEN: ${{ secrets.READER_TOKEN }}
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          persist-credentials: false
      - name: Install and Build
        run: |
          yarn install --frozen-lockfile
          yarn build-storybook
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: main
          FOLDER: docs-build
          CLEAN: true
          TARGET_FOLDER: docs

The thing that happens with the current setup is that when the deployment goes through everything in the repo gets deleted and replaced by the storybook files that are built with the command:

yarn build-storybook

build-storybook script looks like this:

"build-storybook": "storybook build -o docs-build -s ./src/stories/assets",

What do I need to fix to deploy this correctly and keep the current files in repo while building and deploying storybook to /docs folder?

Upvotes: 1

Views: 612

Answers (1)

kangasta
kangasta

Reputation: 784

Your with parameters are for v3 version of the action, but the workflow uses v4. The new target-folder parameter is not compatible with previous TARGET_FOLDER. Update the parameters of the deploy step:

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: main
          folder: docs-build
          clean: true
          target-folder: docs

Upvotes: 1

Related Questions