# Project title
Platon Starter Plugin - a boilerplate for rapid development of custom plugins for [Platon](https://platon.uz)

# 📦 Why does this repository exist?
This repo is a minimal starting point for developers who aim to build their own custom plugins into [Platon](https://platon.uz).

# 🚀 Getting started
Step-by-step instructions to start writing a custom plugin:
1. Inside the `plugins` folder, create a new folder with plugin's name or duplicate the `plugins/starter` folder and rename the newly created folder's name to the plugin's name
2. Change all occurences of `starter` with the plugin's name:
- the `name` field of the `package.json` file
- the `appName` variable in the `webpack.config.js` file
- the `name` field of the `src/app.vue` file's default export object  
3. Configure the plugin to be hooked up into the system:
- go to the `scripts/ports.js` file, add a new entry with the plugin's name and as a key, write the port number of the plugin (the port number must not interfere with other plugins' port numbers)
- go to the `host/public/remotes.js` file, add a new entry with the plugin's name and as a key, create an object with three fields:
    - url: `http://localhost:<port-number-of-your-plugin>/remoteEntry.js` -> this is the url in which the plugin will be running locally
    - prefix: if the plugin needs to run in a specific path, you can write the name of the path
    - exposes: copy and paste the keys of the `exposes` object inside the `webpack.config.js` file 
- go to the `webpack.config.js` file, go to the `devServer` object. The `port` field is referencing the starter plugin's port. Change the `ports.starter` to reference the plugin's port number:
```javascript
  devServer: {
    static: "./",
    hot: true,
    port: ports.starter,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
``` 

- from the root folder, run `npm install` to install dependencies

# How to run the project?
There are multiple options to run the plugin. But, before running the plugin, there are some steps that must be taken:
1. Run the `Platon Auth Controller` module:
  1. Clone the auth controller's repository somewhere else:
  ```bash
    git clone https://gitlab.platon.uz/platon/frontend-modules/auth-controller
  ``` 
  2. Install the dependencies:
  ```bash
    npm install
  ```
  3. Run the module:
  ```bash
    npm run dev
  ```
2. Run the `host` & `shared` apps:
  1. Open the terminal, go to the `host` folder, and run `npm run serve`
  2. Open the terminal, go to the `shared` folder and run `npm run serve`
3. Run the plugin:
  1. Open the terminal, go to your plugin's folder and run `npm run serve`

You can also run all projects at once by running `npm run dev` from the root directory. But, in any case, the auth controller must be ran

Here is a checklist to ensure that everything is done correctly:
- Open the plugin in the browser using the `http://localhost:<plugin's-port-number>`, a simple vue app should be opened 
- Open the plugin's `remoteEntry.js` file using the `http://localhost:<plugin's-port-number>/remoteEntry.js` link, a minified javascript bundle should be opened in the browser window
- Open the `host` & `shared` apps with the same strategy