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 Carbon, version 8.x, which is the current LTS version of Node.js when developing plugins for the .

Either download Node.js directly or use a Node Version Manager like NVM.

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.

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.

2. Clone and start the skeleton plugin

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

git clone https://github.com/Infomaker/NPWriterDevKit.git
cd NPWriterDevKit
rm -rf .git
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 localhost: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.

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

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

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

Next… get creative!

Next up is to familiarize yourself with the API reference, read our Tutorials and Writer Plugin Building Blocks, and making the plugin yours.