Configurations

Mongez is shipped with a superb configurations system that will make the project well maintained and easier to trace.

First of take a look at the Configuration Philosophy behind Mongez configurations.

Configurations In Mongez

Most of the package modules like Http, Router, Forms embrace that configurations behavior for most optimum level of satisfactions.

When you clone Mongez Starter Project, you'll find three files for configurations.

• Shared config.ts file
• Admin config.ts file
• Front Office config.ts file

The shared config file concept is to set your entire project configurations that will be used in all of the project apps like admin and front-office apps.

This will make the configurations more clear and will decrease the code duplicate.

Now for each app that has its own configurations, we can set it in the apps/app-name/herpers/config.ts with same exact structure.

This can also override the configurations set in src/shared/config.ts.

Let's have a look at the shared/config.ts file:

shared/config.ts

import SA from 'assets/images/flags/sa.png';import UK from 'assets/images/flags/uk.png';import config, { ConfigList } from 'mongez/config';
export const BASE_URL = process.env.REACT_APP_API_BASE_URL;
const settings: ConfigList = {    langMode: 'array',    endpoint: {        baseUrl: process.env.REACT_APP_API_BASE_URL,        apiKey: process.env.REACT_APP_API_KEY,    },    encryption: {        // required if you're using encrypted local cache         key: process.env.REACT_APP_KEY_NAME,    },    cache: {        prefix: process.env.REACT_APP_KEY_NAME + '-',    },    locales: {        en: {            direction: 'ltr',            name: 'English',            flag: UK,        },        ar: {            direction: 'rtl',            name: 'العربية',            flag: SA,        },    },    form: {        input: {            variant: 'outlined',        }    },};
config.set(settings);

This is how it will probably be when you see his documentation.

Let's make a smaller and simpler file for clarification.

shared/config.ts

import config, { ConfigList } from 'mongez/config';
const settings: ConfigList = {    // global configurations here};
config.set(settings);

We just imported the config object and the ConflgList interface to make the code more readable.

Then we defined a constant called settings with ConflgList type with an empty object.

Lastly we called the set method in the config object to override the default configurations.

For example let's say we need to set he cacke prefix key that will be used in local storage.

shared/config.ts

import config, { ConfigList } from 'mongez/config';
const settings: ConfigList = {    // global configurations here    cache: {        prefix: 'mngz-'    }};
config.set(settings);

Now we've set our cache prefix key, so whenever we add a key to our cache engine it will start with mngz-.

Modules Configurations

Almost each module in Mongez has its own configurations, a full page of configurations will be found below the module name in the sidebar.