How to start an Angular UI project

This tutorial will show you how to start an Angular UI project for your plugin. The instructions given on this page require that you have established your IDE and have created your first plugins. To start, download the basic plugin below or use your angular Ui project form the My first angular plugin tutorial.

Download on GitHub

Step 1: Setting up Node.js

You need Node.js to compile the project. Install the LTS version here. Once Node.js is ready , proceed as follows.

Compiling the project

Use npm install in the directory of your project.
→ All dependencies of the package.json file are installed.
Use npm start.
→ The project is compiled and shown in your browser on localhost:3002.

You can change the port in the file /plugin-terra-basic/config/webpack.dev.js.

Step 2: Creating the php environment

To set up a second project for the php part of development, follow the instructions in this guide. To use the UI part in your plugin, proceed as follows.

Employing the UI part in the php environment

Compile the UI project with npm run build.
→ The dist directory is created with the compiled files in it.
Copy and paste the content of the dist directory to your plugin project's ui directory.
Set up the ui.json file with actions for the different views.

For being able to test your copied UI within the plugin, you can install the extension Allow-Control-Allow-Origin in the Chrome browser.
Alternatively, you can use plentyDevTool to test the UI in any browser.

Creating the ui.json

MyPlugin/ui.json

{
 "defaultEntryPoint": "index.html",
 "namespace": "MyPlugin",
 "menuEntries": [
   {
     "label": "Settings",
     "menu": "settings/orders/myplugin",
     "urlKey": "basic-settings",
     "entryPoint": "index.html?action=basic-settings"
   },
   {
     "label": "Address settings",
     "menu": "settings/orders/myplugin",
     "urlKey": "address-settings",
     "entryPoint": "index.html?action=address-settings"
   },
   {
     "label": "Shipping settings",
     "menu": "settings/orders/myplugin",
     "urlKey": "shipping-settings",
     "entryPoint": "index.html?action=shipping-settings"
   }
 ]
}