diff --git a/Development%2FFrontend.md b/Development%2FFrontend.md new file mode 100644 index 0000000..76d0e28 --- /dev/null +++ b/Development%2FFrontend.md @@ -0,0 +1,66 @@ +# Frontend Development +* [General](#general) +* [Useful commands](Development#commands) +* [Plugin](#plugin) +* [General development](Development) + +## General + +## Commands +Useful commands for developing the frontend / frontend plugins + +##### Start the app in development mode +Provides hot-code reloading, error reporting, etc. +```sh +yarn quasar dev +``` + +##### Code formatting + +```sh +yarn pretty +``` + +##### File linting + +```sh +yarn lint +``` + +## Plugins + +#### 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. + +```ts +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.