Let's create a Clean React Js Project with Typescript And Mongez Part III: Project Apps

So far we went through src/shared and src/index.ts and we've a good idea the workflow there, now let's go to the most important directory, apps directory.

Apps Directory

There, we put all the heavy work, but in more organized structure, as mentioned in the first article of the series, the project is a app based, which means we group each app (i.e admin, front-office) in one directory so we can decouple the work, we can share components from each other though.

App Structure

Each app consists of 2 main files, the ${app}-modules.json and ${app}-provider.ts files.

These file tell MR how the application would work, so let's get into each file in depth.

app-modules.json

As we mentioned in the src/shared/apps-list.ts section, the app-modules.json defines the app meta data, which contains three properties:

• name: defines the app name, MUST BE the same as the app directory name.
• path: Define the base path of the app, for example if it is admin app, then we may set it to /admin.
• modules: An array of objects, defines the module name and th entry paths for that name, we'll go in detail in a bit.

In that way, the app is well structured, we defined the base path for the entire app, and if we want to change it later, we simply change it from the modules file.

As mentioned, the app name is the same as the app directory name as it will import the app provider from the app directory.

Now regarding modules array, it is an array of objects, each object has two properties, the entry and module.

The module property defines the module name that will be loaded when the user hits any of the entry routes.

Except that, the entry requires only the first segment of the route.

Let's take an example to be more clear, the following json file is the front-office-modules.json file that was created with the project.

{
  "path": "/",
  "name": "front-office",
  "modules": [
    {
      "entry": ["/"],
      "module": "home"
    },
    {
      "entry": ["/account", "/login"],
      "module": "account"
    }
  ]
}

The last object in modules property has two entries /account and /login, that means if the user hits any of these routes the module will be loaded, but, the /account can load any sub route that starts with it.

So let's say we've the following routes

/account: loads the user main dashboard.
/account/settings: loads the user settings form.
/account/address-book: loads the user address book page.

These are three routes, if we want to point all of these routes to the account module, we'll just set in the entry property /account only.

❌

{
  "path": "/",
  "name": "front-office",
  "modules": [
    {
      "entry": ["/"],
      "module": "home"
    },
    {
      "entry": ["/account", "/account/settings", "/accounts/address-book", "/login"],
      "module": "account"
    }
  ]
}

✅

{
  "path": "/",
  "name": "front-office",
  "modules": [
    {
      "entry": ["/"],
      "module": "home"
    },
    {
      "entry": ["/account", "/login"],
      "module": "account"
    }
  ]
}

Now the app will be loaded once the user hits any route that starts with / or if its the admin app it will be /admin, then the next segment after the app path will be the module entry path, that will load the module in that app.

App provider

Once the user navigates to /admin, Mongez React Router (MRR) Will load the app provider automatically, that provider we can consider it as the main or the entry file that will be loaded first before any sub modules of that app.

As mentioned the app-provider.ts must be written exactly as ${app-directory-name}-provider.ts so the file is loaded correctly.

This will help us in numerous ways, for instance we can load configurations only for that application, import styles related to the application, define the base api base path and so on.

In the next article we'll discuss the module structure and its best practices.

Salam.