Configuring a module

Table of Contents

1. Introduction
2. Core configuration
3. Dependencies
4. Summary

Introduction

Lgui is designed to host any number of modules and each of them might have their own dependencies, unrelated to other modules or lgui itself. To manage installation of such system, we had created a bootstrap script which registers all modules within lgui and also merges all of their dependencies.

This guide will teach you how to write the module configuration required by the bootstrap script. If you already have one and want to deploy whole system, see guide about deployment. Also, this guide follows the previous guide about module creation and uses paths and names mentioned there.

Core Configuration

Bootstrap script scans all folders inside modules and if it finds file config.json in the root of any of those folders (it only scans their roots, not the substructure), it will attempt to register that module. This requires to have some mandatory data present in the config.json:

{
    "module": {
        "file": "example.module.ts",
        "class": "ExampleModule",
        "frontend": "src/app/example",
        "backend": "backend",
        "name" : "example"
    }
}

I hope this is pretty much self explanatory. file is name of the module.ts file. class is name of the module class, frontend is path to root of frontend source codes and backend is path to root of backend source codes. name actually refers to path value defined in the Routes object in the example.module.ts. These two must match, otherwise your module will be hidden by the lgui.

NOTE: You might not have any backend scripts (yet) and only need the frontend capabilities. 'backend' is optional so you don't have to add it and register backend scripts right away.

Dependencies

With this configuration file you can already register you module and deploy it. But maybe you need some specific dependencies, how you can add those? It's simple. Edit the file:

{
    "dependencies": {
    },
    "module": {
        "file": "example.module.ts",
        "class": "ExampleModule",
        "frontend": "src/app/example",
        "backend": "backend",
        "name": "example"
    }
}

When bootstrapping, the deps section will be searched for following keys:

• npm - Should contain path to package.json
• ngc - Should contain path to .angular-cli.json
• pip - Should contain path to whatever.txt with python dependencies

If any key is present, configuration to which it points will be loaded and merged with the lgui core deps. Please note that for various reasons only subsets of package.json and .angular-cli.json is actually merged.

For package.json, only following section are merged:

{
    "dependencies": {
    },
    "devDependencies": {
    }
}

For .angular-cli.json, only following sections are merged:

{
    "apps": [
        {
            "assets": [],
            "styles": [],
            "scripts": []
        }
    ]
}

I highly recommend to not use pregenerated package.json and .angular-cli.json as they would generate tons of conflicts in during bootstrapping. Make an isolated folder with these subset versions of configurations, it'll be much more cleaner and better to understand.

I didn't mention how the python requirements file should look like. It's a plain simple .txt file with list of packages:

package1==version
package2==version

App Configuration

You might have noticed a app.config.json in the modules folder. It allows you replace native LGUI assets with custom ones. But in our example module, we don't have any assets and thus we don't need to link any. Because of that, edit app.config.json and completely remove the "assets" key and its value.

Summary

Now you have fully configured module and you know where to put your dependencies. Now you should read the guide about deployment so you can really develop, test and enjoy your app!