Local development

If you want to create more complex plugins you have also the option to develop a plugin with a local dev environment using your favorite editor. This lets you load other plugins and organize your code in multiple files.

1. Clone the repository and run the dev server

   git clone https://github.com/storyblok/storyblok-fieldtype
   cd storyblok-fieldtype
   npm install
   npm run dev

   This will spin up a server on http://localhost:8080.

2. Change the URL of the dev server

   Change the URL to https://app.storyblok.com. Learn how to serve a local dev server over HTTPS on macOS and Windows.

3. Change the plugin name

   Open the file src/Plugin.vue and change the plugin name in the initWith method to the one you created in Storyblok.

   initWith() {
     return {
       // needs to be equal to your storyblok plugin name
       plugin: 'my-plugin-name',
       title: '',
       description: ''
     }
   }

4. Enable local dev mode

   Now you can click the checkbox Enable local dev mode in the Plugin Editor to load your local environment into the field plugin preview and start developing your plugin.

5. Deployment

   When you’ve finished developing your plugin, you need to run npm run build and copy the content of the file dist/export.js into the editor text field of the Storyblok app and Save. Now, you should be able to see what you developed locally without having to run localhost. Make sure the name of your plugin is the same as in Plugin.vue, otherwise the import will fail.

Note

If the name of the plugin you created in Storyblok doesn’t match the name in the initWith() method in the Plugin.vue file, you will get an import error. Also, make sure that you’re using the correct version of @vue/cli-service so it compiles correctly.

Tip

Check out the tutorial about plugin development on Markus Oberlehner’s blog.