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

How to setup shell integration so nvm automatically calls nvm use shell-integration

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.

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

Set up local hostname

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.

git clone [email protected]: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.

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.