Running Webapp and Multiple Plugins Locally Together

This document entails how to setup a local environment where webapp and multiple plugins could be run together locally.

Webapp Code

When we run webapp locally, it fetches all the data by default from staging environment.

When we run a plugin locally, we use the fetchportal script to clone, build and serve webapp locally and fetch the plugins data from a mock API.

To have more control, we can make the webapp run in development mode using yarn start and have it fetch plugins data from a mock API.

After copying config.local.js to config.js, uncomment this code. Example config:

const devConfig = require('./eu/config.stg.js');

module.exports = Object.assign({}, devConfig, {
  pluginUrl: 'http://localhost:3001',
});

All vendor portal plugins codebase already consider spinning up a mock plugin API on port 3001 which fetches the mock plugin data from a file pluginList.json. So the webapp config as above fetches data from this mock plugin API.

MAKE SURE TO RUN THE PLUGINS WITHOUT RUNNING THE WEBAPP INSTANCE SPUN UP BY FETCHPORTAL SCRIPT.

Example from User Management Plugin - This plugin has a script yarn start --noPortal which makes sure it does not serve webapp separately. Checkout here.

Then, run vendor portal plugins locally and tweak the plugin list of the mock API as per how many plugins you would want to run locally.

Let us take an example where we want to run two plugins locally - PLUGIN_A and PLUGIN_B. Here we have considered that these vendor portal plugins have been created using the hello-world template here.

Inside the codebase for PLUGIN_A, provide the pluginList.json as below.

[
  {
    "code": "PLUGIN_A",
    "bundleUrl": "http://localhost:3002/bundle.index.js",
    "route": "/plugin-a",
    "type": "MENU",
    "options": {}
  },
  {
    "code": "PLUGIN_B",
    "bundleUrl": "http://localhost:3003/bundle.index.js",
    "route": "/plugin-b",
    "type": "MENU",
    "options": {}
  }
]

Inside the codebase for PLUGIN_B, block any code in the devServer.sh|js script which might be trying to spin up another plugin mock API. Also, run the plugin on an available port and mention the same port in the pluginList.json file of PLUGIN_A codebase.

This allows us to run and troubleshoot webapp and multiple plugins together locally.