---
title: Local development
description: Discover Storyblok's documentation with comprehensive developer guides, user manuals, API references, and examples to help you get the most out of the headless CMS platform.
url: https://storyblok.com/docs/plugins/field-plugins-legacy/local-development
---

# 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**
    
    ```bash
    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**
    
    Please change your URL to `https://app.storyblok.com` from `http://app.storyblok.com`. In [this FAQ](https://www.storyblok.com/faq/setup-dev-server-https-proxy), you can read how to set up a dev server with an HTTPS proxy on MacOS.
    
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.
    
    ```javascript
    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](https://markus.oberlehner.net/blog/building-a-custom-storyblok-field-type-plugin-with-vue/) on Markus Oberlehner's blog.

## Pagination

-   [Previous: Introduction](/docs/plugins/field-plugins-legacy)
-   [Next: API Documentation](/docs/plugins/field-plugins-legacy/api-documentation)