Storyblok Raises $80M Series C - Read News

Skip to main content

Continuous Delivery of Field Plugins

INFO:

On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

This tutorial demonstrates how to set up a continuous delivery pipeline that ensures that the latest stable version of your code is deployed to production. While this article demonstrates a concrete example with GitHub actions, it should be trivial to take the knowledge and apply it to a different automation environment.

Prerequisites

This tutorial requires you

  • to have created a field plugin
  • to have pushed the source code to a GitHub repository
  • to have checked out the source code on your local machine

Package.json

Inspect the package.json file. Notice how the CLI generated several scripts:

package.json
        
      {
  ...
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "deploy": "npm run build && npx @storyblok/field-plugin-cli@latest deploy"
  },
...
}
    

The CLI will generate a script in the package.json file. Note that the version will differ depending on when you generated the package.


In the next section, you will create a workflow that builds the application each time you push to the remote repository with the build script.

After that, you will add a job that deploys the field plugin to Storyblok with the deploy script.

Checks Workflow

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

.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
    

A simple workflow for performing checks with GitHub actions.

This will build the field plugin whenever anyone pushes a change. If you want to include any other checks – 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 will find it under Action Secrets and Variables:

Add a second job to your workflow configuration file:

.github/workflows/deploy.yml
        
        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 my-plugin --scope partner-portal
    

This job will execute only if

  • the checks passed
  • 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 is implicitly be read from the environmental variable STORYBLOK_PERSONAL_ACCESS_TOKEN.

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

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 either

  • --scope partner-portal
  • --scope organization
  • --scope my-plugins

depending on whether you have access to the Partner Portal.

Preview URLs

When submitting code for review, it is convenient to share a preview URL that lets the reviewer see the changes in action. If you integrate your repository with Vercel or Netlify, this task becomes trivial.

With Netlify, import your site from an existing repository. In Github, your pull requests will get an automated comment:

With Vercel, import an project from GitHub. In Github, your pull requests will get an automated comment:

Though bear in mind that the production code still needs to be deployed to Storyblok with the Field Plugin CLI.

Conclusion

Your field plugin will now be tested continually, and whenever a new production build is ready, it will automatically be deployed to Storyblok!