Creating a Fleetbase Console Extension

This is a step by step guide for getting started with creating your very own Fleetbase Extension. There are two main parts to building an extension, both are optional and really depends on what function your extension provides or features it requires.

We'll simplify these two parts as "frontend" and "backend" - Your extension can have both or one.

A frontend extension is simply an ember engine addon which add an interface to the Fleetbase console which can be accessed by users.
A backend extension is a php composer package that is installed to the API.

Let'e get started with setting up and building a frontend extension first.

Foremost make sure you have all the correct development dependencies. You'll need npm, pnpm, ember-cli, and composer installed globally.

At Fleetbase we use nvm for managing our node installations.

npm i -g pnpm ember-cli

You can find out how to install composer at https://getcomposer.org/download/

To get started with building your extension you'll want to create a directory for your extension packages. Do this first mkdir my-extension && cd my-extension
Initialize your frontend extension, use the same installation instructions which can be found in the ember engines docs.
- ember addon my-extension
- Next install core dependencies:
```
cd my-extension
pnpm add ember-engines @fleetbase/ember-core @fleetbase/ember-ui
```
- A quick note, Engines should have ember-engines listed as a devDependency and peerDependency. The reason for this is that if you include ember-engines as a dependency of both the host application and the Engine, you'll wind up duplicating some crucial functionality which can cause problems. Therefore, it is best that the host application provide the copy to be used.
  Finally, we need to ensure ember-cli-htmlbars is listed as a dependency for compiling our templates:
```
// package.json
"dependencies": {
  "ember-cli-htmlbars": "^1.1.0"
}
```
Within your extensions root directory you will find an index.js file, you'll use this to setup and configure your engine for your extension. Which should look something like this below. You can find more about what hooks can be added to furthermore configure your extension here ember addon API reference.
```
'use strict';
const { buildEngine } = require('ember-engines/lib/engine-addon');
const { name } = require('./package');
module.exports = buildEngine({
name,
lazyLoading: {
enabled: true,
},
isDevelopingAddon() {
return true;
},
});
```
Follow the rest of the engine setup steps here
Now making your engine a fleetbase extension is quite easy. You'll need to add some custom keys to your `package.json` for Fleetbase Console to recognize your extension. You'll need to add the following:
1. extension key - the value should be the name of your extension.
2. icon key - this should be a valid font-awesome icon.
3. priority key - this is the priority of where the extension will display in the navigation bar.
4. Lastly, you'll need to update the keywords and add "fleetbase-extension" as a keyword.

Some very import devDependencies you'll want to add to your fleetbase console extension.

"ember-engines": "^0.8.23",
"ember-composable-helpers": "^5.0.0",
"ember-math-helpers": "^2.18.2",
"ember-concurrency": "^2.3.7",
"ember-concurrency-decorators": "^2.0.3",
"ember-data": "~4.6.0",

Some important dependencies to add:

"@fortawesome/ember-fontawesome": "^0.4.1",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"ember-wormhole": "^0.6.0",

Your config/environment.js must define modulePrefix and will look something like this:

'use strict';
const { name } = require('../package');

module.exports = function (environment) {
  let ENV = {
      modulePrefix: name,
      environment,
  };

  return ENV;
};

function getenv(variable, defaultValue = null) {
  return process.env[variable] !== undefined ? process.env[variable] : defaultValue;
}

Your index.js should look like this:

'use strict';
const { buildEngine } = require('ember-engines/lib/engine-addon');
const { name } = require('./package');

module.exports = buildEngine({
    name,

    lazyLoading: {
        enabled: true,
    },

    isDevelopingAddon() {
        return true;
    },
});

To be continued