Mantra how-to guide

Understanding Mantra project structure

The structure of the project files is important to work with clean and effective code

05-Mar-2022
A  A  A 

When a project is getting bigger as new requirements are being included, the organization of the assets are extremely importante.

Mantra project structura is designed to allow good organization with separation of concerns, so that you can have always your assets easy to locate and to manage. By assets we mean code files like Mantra components, HTML views, blocks, data schemas, APIs and so on.

As described at Anatomy of a Mantra project, the basic structure of any Mantra project is as follows:

`-- components
    `-- component-a
        |-- component-a.js
        |-- mantra.json
    `-- component-b
        |-- component-b.js
        |-- mantra.json
`-- ui
    `-- frontend
        |-- 404.html
        |-- browserconfig.xml
        |-- css
        |   |-- main.css
        |-- favicon.ico
        |-- index.html
        |-- js
        |   |-- main.js
|-- mantraconfig.json

As seen, the structure is common sense and the good thing is that all Mantra projects should follow that, and this gives you the ability to manage new Mantra projects because you know how and where to find all project stuff.

Some details:

  • You can have multiple locations for the components, according to their purposes, like this:
`-- components
   `|-- admin
   `|-- base
   `|-- orchestration
   `|-- commands
...

By doing so, you can locate your "admin" components at /components/admin folder, and the like.

  • You can have multiple frontends:
`-- ui
   `|-- userfrontend
   `|-- adminfrontend
   `|-- dashboardfrontend

Remember: the right organization of your project assets gives you speed when coding and when adding new features or modifying the existing one.

Mantra framework has been designed to allow this.