Continuous Delivery

Follow the instructions below to set up a continuous delivery pipeline that ensures that the latest stable version of your field plugin is deployed to production. The provided examples use GitHub Actions but could be reproduced for your platform of choice.

The package.json created by the @storyblok/field-plugin-cli contains build and deploy scripts. These can be utilized to create a workflow that:

1. builds the application whenever code is pushed to the remote repository
2. deploys the changes to Storyblok

Build workflow

Create a new .yml file in .github/workflows/, for example .github/workflows/deploy.yml.

name: Continuous Delivery

on: push

jobs:
  check:
    name: Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'yarn'
      - name: Install
        run: yarn install
      - name: Build
        run: yarn build

This will build the field plugin whenever a commit is pushed. If you want to include any other steps, such as tests, type checks, code formatting, and linting, this is a great place to put them.

Deploy workflow

Field plugins are deployed with the CLI which requires a Storyblok personal access token. Issue a personal access token and add it as an environment variable STORYBLOK_PERSONAL_ACCESS_TOKEN to your CI/CD configuration. In GitHub, you can configure the token as a secret.

Add a second job to your workflow configuration file:

  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    needs: check
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'yarn'
      - name: Install
        run: yarn install
      - name: Build and Deploy
        env:
          STORYBLOK_PERSONAL_ACCESS_TOKEN: ${{secrets.STORYBLOK_PERSONAL_ACCESS_TOKEN}}
        run: yarn deploy --skipPrompts --name training-field --scope partner-portal

This job will execute only if the build completed successfully (including optional additional checks), and the workflow was triggered by a push to the main branch.

In the last step, the field plugin is deployed with the CLI. Because the workflow is triggered programmatically, the deploy command executes in a non-interactive mode with the --skipPrompts option, so that the workflow does not wait for user input. The access token specified in the environmental variable STORYBLOK_PERSONAL_ACCESS_TOKEN is used.

Change the --name option to the name of your field plugin.

Caution

WARNING: If you do not specify the name with the --name option, the Field Plugin CLI will implicitly assume the name from package.json. If someone at any point would change the name in package.json, it could have unexpected consequences in the CI/CD pipeline.

Finally, set the --scope to my-plugins, partner-portal, or organization.

Preview URLs

When submitting code for review, it is convenient to share a preview URL that lets the reviewer see the changes in action.

With Netlify, import your site from an existing repository. With Vercel, import an project from GitHub. In either case, your pull requests on GitHub will receive automated comment including a preview URL.