Create a new suite application

Introduction

For this tutorial we are going to create a new app called EMA (Equipments Management Application).

In this part of the tutorial, you'll do the following:

1. Create a new application.
2. Configure different environments.
3. Routing configuration.
4. Configure the shell.
5. Serve the application.

Create the app

1. First of all remember to run this generator into the "/angular" folder.

2. Run the suite-app workspace generator:

   yarn nx workspace-generator suite-app ema.

The result of the generator should look like this:

Configure environments

By default a suite 3.0 application has 2 environments, one for development configured to work with docker and another one for production configured to be hosted by the BFF.

BFF urls are defined into the configuration files that are located in the ema/assets/bootstrap folder, this file is loaded when the application starts to get the rest of the configurations, locales and else.

{
    "backendForFrontendAddress": "https://ema-bff.localdev.suite.itsynch.com"
}

Tip

If you need to set up more environments than the ones provided by default then follow the multi environment configuration guide.

Routing configuration

A suite application is just a SPA that works as an entry point to our suite modules, which are used as lego pieces to integrate new features. This means that our application projects do not include any logic or components.

For this tutorial we are going to add the equipments CRUD module to the app using the angular router.

// ema.routing.ts

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { createEquipmentsRoute } from '@itsynch/equipments';
import { NavigationService, setRootNodes } from '@itsynch/suite/navigation';
import { ShellRoutingModule } from '@itsynch/suite/shell/feature';
import { navigationNodes } from './navigation';

const applicationRoutes: Routes = [createEquipmentsRoute('equipments')];

@NgModule({
    imports: [ShellRoutingModule.forChild(applicationRoutes)]
})
export class EmaRoutingModule {
    constructor(navigationService: NavigationService) {
        navigationService.dispatch(
            setRootNodes({ rootNodes: navigationNodes })
        );
    }
}

Configure the shell

All the suite applications use the suite shell, this component has the look and feel that we want for all the applications. To configure it you can follow this guides:

1. Navigation: Add sidebar buttons with this guide.
2. Theming: Change the default dark theme from suite 3.0 with this guide.

Serve the application

Go to the workspace directory and launch the application to run against docker.

yarn start ema