First UI plugin (preview)

Creating a plugin based on a template

We will now develop a basic UI plugin for publishing on the preview MEF.DEV platform. To develop this plugin, you only need knowledge of coding in Angular language

Follow the instructions and learn how to create your first plugin, which can be further extended to use these Backend plugins and implement your business logic.

Step 1. Install Node.js

Install LTS-version Node.js:

  • Download Node.js
  • Open Command Prompt - Terminal on macOS and Linux, or Command Prompt on Windows.
  • Run node -v. If you get the version number as a result, then node.js has been installed. It should look something like this: v12.18.4

Step 2. Setup IDE

We recommend using Atom or Visual Code Studio as IDE.

Step 3. Make a copy of the test project from the repository

// repo lynk https://github.com/mef-dev/tutorial-ui-plugin

Step 4. Setup the local test environment

First, we'll create the local test environment. This will allow us to do testing our user interface in the browser.

  • Open IDE
  • Go to File => Open
  • Open folder tutorial-ui-plugin
  • Navigate to sub-folder tutorial-ui-plugin cd / your-dir / tutorial-ui-plugin
  • Run npm install, to install all the required packages. It may take a while
  • Run ng serve or npm start to start the local test web server, by default you can see the project in the browser localhost:4200 (if you have problems to run ng from the terminal due to security policy, then run the command: Set-ExecutionPolicy -Scope CurrentUser command can help -ExecutionPolicy Unrestricted)

Project overview

The project structure is quite flexible, the main project files are located in the plugin directory. Main.ts is used locally to run the project, and main-plugin.ts is used to build the plugin before publishing. The angular.json config is sufficient for all plugin prep and publish actions.

Step 1. Creating a plugin name

To begin, make changes into the package.json file

You should specify a unique name for your front-end plug-in - during registration it will used to identify the package. We change the version number as needed, usually each new upload to the platform is a new version.

Step 2. Creating a plugin page

Open the IDE file browser and navigate to the plugin/components library.

New component creation can be created manually by hello-world.component.ts or from terminal ng g c hello-world. This file is used to implement all the necessary logic.

the @Component decorator to work correctly on the platform uses template and styles to display your user interface and style the user interface accordingly. Add your newly created component to the NgModule declarations list, if you created it as a file in your plugin directory, if the command was used, the component will be automatically added to the corresponding section of the decorator module

Step 3. Navigation

Next, we'll apply some logic to navigate into our plugin. We will create a new route for that.

  • Open src plugin/plugin-routing.module.ts.
  • Add a new object to the children array that belongs to the plugin routes object
  • Add path property and set its value
  • Add a component property and set it to type HelloWorldComponent
  • Make import for the component
  • Adhere to the specified structure so that the platform interprets the routes of your plugin correctly.
  • Next, we launch the project - we will get the following result

Step 4. Build plugin

Now we can build our simplest (basic) plugin and upload it to the platform. In the terminal, we call the npm run build command - the result of executing this script will be the file app-hello-world-1.0.0.bundle.js - where app-hello-world is name in package.json, the 1.0.0 is version in package.json.

It is located in the external_plugins / app-hello-world-1.0.0 directory at the root of the project.

Publish UI plugin into the platform

To do this, you must be a registered user of the platform with the Developer or Developer Admin role - if you are not registered, then during the first login to the platform at https://preview.mef.dev you will be given the opportunity to register.

After login into the platform:

  • Go to the list of your plugins, click edit on the icon "wheel" on the card with general information about the plugin
  • Select the UI type for your plugin

    You will see the new block for describing your front-end plugin.
  • Fill in the information about your front-end plugin

    plugin-uiname - name - з package.json
    modulename module name from plugin.module.ts in folder
  • add the route you defined as available during plugin development
  • upload to the platform file app-hello-world-1.0.0.bundle.js
  • After successful download, select the version from the list and click “Save”. The plugin will appear for a preview.