This tutorial will take you through the steps to create a new field plugin with Storyblok’s Field Plugin CLI.

Prerequisites

This tutorial requires the following applications to be installed on your machine:

• Node.js v14 or above
• Yarn
• NPM v5.2.0 or above
• Git

Check if the dependencies are installed by running

node -v
yarn -v
npm -v
git --version

Create a Project

To create a new project, run Storyblok’s field plugin command line interface. This will run a setup wizard, letting you choose between different options along the way. Open the terminal and run

npx @storyblok/field-plugin-cli@latest create

The first question asked is whether the new project should be a monorepo or its opposite – polyrepo. If you’re not familiar with what a monorepo is, choose polyrepo.

Next, choose a package name, in this example, “training-field”.

Finally, select a template. There are several frameworks to choose from.

Wait for the package to be installed.

That should have generated a new directory, initialized git, and installed dependencies with Yarn.

Run Locally

Navigate into the newly created directory.

cd training-field/

Start the application.

yarn dev

You will see the following result:

From the output in the terminal, open the Sandbox URL in your browser.

Here, you can view your field plugin during development.