# Quickstart

**This quickstart guide will describes how to get started with developing plugins to the and how to test them in an available online.**

**The steps involved**

1. Identify an environment to use
2. Install correct version of Node.js and a Git client
3. Download and start the skeleton NPWriterDevKit.
4. Open the  in your browser
5. Configure the  to load your local plugin

## Prerequisites

To use the you will currently need to use the latest version of Google Chrome. We recommend using Gallium, version 16.x, which is the current LTS version of Node.js when developing plugins for the .

#### nvm 

We recommend that you use nvm to use a specific node version using this project. It is fine to bump Node version, but don't forget to adjust it in the .nvmrc file so everyone on the team always uses the same node version when developing.

[Link to nvm on Github ](https://github.com/nvm-sh/nvm)

How to setup shell integration so nvm automatically calls `nvm use` [shell-integration](https://app.gitbook.com/o/-LXJkK7tFJY9DjO_rmf3/s/zb25YFw72rvEl257Q5Oz/)

#### Install mkcert 

To enable SSL support locally, this project uses mkcert to install a local CA, and generating a certificate used by webpack. Follow instructions found here <https://github.com/FiloSottile/mkcert> to install the mkcert tool.

Run mkcert -install to install the local CA.

#### Git

You will need a Git client to get the starter Devkit. If you don't already have one you can download a [Git client of your choice here](https://git-scm.com/download/).

## Using the NPWriterDevkit skeleton plugin

The NPWriterDevKit is a ready made skeleton with everything you need to get started. This includes build steps and a local plugin server.

### 1. Environment

If you have a dev environment already setup by Infomaker you should use that environment. If you don't have an appropriate environment please [contact Infomaker](https://www.infomaker.se/).

### 2. Clone and start the skeleton plugin

#### **Set up local hostname**&#x20;

In order to access the plugin using SSL, you need to add this to your local /etc/hosts-file:

```
127.0.0.1 local.plugins.writer.infomaker.io 
```

Start with cloning the NPWriterDevKit project and remove the .git directory. Then start the local plugin server.

```bash
git clone git@github.com:Infomaker/NPWriterDevKit.git <your-plugin-folder>
cd <your-plugin-folder>
rm -rf .git
git init
npm install
npm run start
```

### 3. A quick look on what we have

The plugin is now ready to use in a and you should be able to load it by going to <https://local.plugins.writer.infomaker.io:3000/index.js> in your browser.

Then, if you take a look in the file `src/DevKitPackage.js`, you can see that the plugin is named `npwriterdevkit` with a default id of `se.infomaker.npwriterdevkit`. These values should obviously be changed later. But are fine for now.

```javascript
import './scss/index.scss'
import {DevKitComponent} from './DevKitComponent'

export default {
    name: 'npwriterdevkit',
    id: 'se.infomaker.npwriterdevkit',

    /**
     * @param {DWConfigurator} configurator 
     * @param {object} pluginConfig 
     */
    configure: function(configurator, pluginConfig) {
        // ...
    }
}
```

The **url**, **name** and **id** is what we need to add the plugin to a running .

### 4. Add the plugin to the local configuration

As mentioned above you should add the plugin to your environment, or a test environment appointed to you by Infomaker.

In this example we use a Tryout environment which is a standard which contains a core set of plugins. Articles created will be cleared at regular intervals.

Load in your browser. Press `CMD+SHIFT+y` or `CTRL+SHIFT+y` to open the configuration test tool.

Click the **plus** to add a new plugin to the plugin list. A new plugin with a random name and id has been added to the configuration.

![Digital Writer splash image](https://3225820284-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZhrAmZtyBbF7fWLKl8%2Fsync%2F239f58ae15fb80dfcd58551d60f9fb280f82dab8.png?generation=1607431746206234\&alt=media)

Let's configure it with the above values. Start with switching the *Enabled* toggle, then fill in the fields for *Id*, *Name* and *Plugin src url* with the above values. When it looks like the image below press **Apply**.

![Digital Writer splash image](https://3225820284-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZhrAmZtyBbF7fWLKl8%2F-LmtHQDOXJ31GLcKNR7Q%2F-LmtHTiG7k2fXxFlUfqm%2Fconfigtool-added.png?generation=1566476727479349\&alt=media)

The will then store a local copy of the updated configuration in your browsers local storage. The configuration only lives in your browser.

### 5. Verify

If everything has been done correctly you should now have your locally served NPWriterDevKit plugin loaded in the Tryout .

![Devkit plugin loaded](https://3225820284-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZhrAmZtyBbF7fWLKl8%2Fsync%2F64c27e15e81a26c1597eea101af99b75b9debc18.png?generation=1607431746227343\&alt=media)

## Next… get creative!

Next up is to familiarize yourself with the [API reference](https://github.com/Infomaker/dw-documentation/tree/89ef316ecc2545f627b27987592a99f910ebd089/Api/Api.html), read our Tutorials and Writer Plugin Building Blocks, and making the plugin yours.