6 Development/Frontend
ferfissimo edited this page 2021-05-26 19:06:19 +00:00

Frontend Development

General

Icons used

We are using the mdi-v5 icon set, so feel free to use any icon from it. A list can be found here

Commands

Useful commands for developing the frontend / frontend plugins

Start the app in development mode

Provides hot-code reloading, error reporting, etc.

yarn quasar dev
Code formatting
yarn pretty
File linting
yarn lint

Plugins

Run and test a plugin

There must be only one @flaschengeist/api instance! If there are more, some hard to debug error might occur.

So if you want to test your plugin while developing, you have to link it into your flaschengeist instance. To do so run the following commands:

# Inside your flaschengeist project (let's say you cloned the frontend to ./flaschengeist)
# cd flaschengeist/node_modules/@flaschengeist/api

yarn link

# Inside your plugin directory
# cd your-flaschengeist-plugin

yarn link '@flaschengeist/api'
yarn link

# Back inside your flaschengeist dir
# cd flaschengeist

yarn link '@flaschengeist/your-plugin'

So now you have created a link from your plugin to the @flaschengeist/api used by flaschengeist. And a link from flaschengeist to your plugin. That means flaschengeist uses your plugin and your plugin uses the same api as flaschengeist.

Build a Plugin

Create a new node.js project and add @flaschengeist/api as a peer dependency (e.g. yarn add --peer '@flaschengeist/api'). If your plugin depends on an other plugin (e.g. you use the @flaschengeist/users plugin / stores), then you have to add that plugin as a peer dependency too.

You need to define a main entry point for your plugin (e.g. "main": "src/index.ts" in your package.json) which exportes a plugin descriptor as the default export (see @flaschengeist/types -> FG_Plugin.Plugin). E.g.

import { FG_Plugin } from '@flaschengeist/types';
import { routes } from './routes';

const plugin: FG_Plugin.Plugin = {
  id: 'com.example.myplugin',
  name: 'myplugin',
  innerRoutes: routes,
  // This are required backend plugins:
  requiredModules: [['auth'], ['users'], ['roles']],
  version: '0.0.1',
  widgets: [
    {
      priority: 1,
      name: 'greeting',
      permissions: [],
      widget: defineAsyncComponent(() => import('./components/Widget.vue')),
    },
  ],
};

export default plugin;

This will add a plugin providing a widget for the dashboard side and some routes.