Mantra how-to guide

Include different html frontends within the same project

A Mantra project may consist of a number different applications. If some of them have UI, differents html templates can be used

A  A  A 

Usually, a complex project consists of a number of differents applications with specific purposes that communicate between them somehow.

As an example, at the time of writing this, this site itself developed using Mantra has four differents applications working togheter:

  • The main user web application (that one you are viewing just now).

  • An admin user interface with administration functionalities (like adding new articles, managing users and the like) and a diffent level of security.

  • A tasker: an application without UI that runs tasks to make differents things in the background (like sending mails, performing databases backups, etc.).

  • A microservice application based on a simple REST API used by mantrad core to download components, projects, etc.

In some way, all those four applications shares information from this project so that they can work together.

Main user interface and admin interface use two different frontends. To do that, property "FrontendLocation" needs to be overwritten in the application section, like this:

"Apps": {
   "mainsite": {
      "BaseUrl": "http://localhost:3082/",
      "FrontendLocation": "mainsite",
      "NotFoundRedirect": "/404.html",
      "LandingView": "landing.landing",
      "Port": 3082
   "adminsite": {
      "BaseUrl": "http://localhost:3083/",
      "FrontendLocation": "frontendadmin",
      "LandingView": "admin.dashboard",
      "NotFoundRedirect": "/404.html",
      "Port": 3083

In this configuration, "mainsite" application uses "mainsite" frontend (located at /ui/mainsite folder within the project), and "adminsite" application uses "frontendadmin" frontend (located at /ui/frontendadmin folder).

To read more about properties that can be overwritten in the project configuration, read the official configuration of mantraconfig.json.