Let's create a Clean React Js Project with Typescript And Mongez Part III: Project Apps
Tags: react, typescript, mongez
Published: 2022-09-09 11:35:22

---
title: Let's create a Clean React Js Project with Typescript And Mongez Part III: Project Apps
published: true
description: 
series: React Mongez
tags: reactjs, typescript, mongez
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

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.

```json
{
  "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.

❌

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

✅

```json
{
  "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.