Core Application

App.tsx along with index.tsx together comprise the root of the application.

Root Component

In index.tsx, you’ll find globally imported libraries and code that mounts the React application to the root DOM element.

App.tsx is the top level component in the React component tree. Theme settings are applied when this component mounts. MobX stores like the layoutStore are used to group related code and provide application-wide state.

The second thing App.tsx does is check for a token to see if the user is authenticated. If the user is authenticated, it will get the current user’s details from the API using a method from the accountStore, another MobX store. In either case, the router takes over from here and directs the user to the page they were looking for, or takes them to the login screen.

React Router

This application uses React Router v6. All routes are managed in routes.tsx and are lazy loaded. Any authentication and role requirements are managed as router metadata and protected by AuthGuard and GuestGuard components.

The Template Resources routes are divided into two groups Base UI and Extended UI. Base UI are the basic Boostrap components like buttons and tabs. These don’t need any extra code to function. Extended UI are the third-party components, icons, and dashboard sample.

Stores

MobX stores are a great way to centralize state and logic in a React application. In this application, they are named by the feature they are responsible for:

• Auth store – contains functions for login, forgot password, reset password and logout
• Users, Tenants, & Products stores – contain CRUD functionality as well as state for the related views.
• Account store – contains the current user and functions that manage profile and reset password
• Layout store – manages sidebar state, layout color, etc. The layout store uses local storage to persist theme settings.

With the exception of the layout store, all of the stores make HTTP calls to the server and they do so through the API.

API

The API in this React client is api/agent.ts. It is the point of communication between the client app and the server. Here we are using Axios, which is a third-party HTTP client for JS that provides some nice features when working with API requests.

In agent.ts a few things are happening:

• We set the base URL using .env.development & .env.production variables, using Vite’s metadata
• We use Axios interceptors to append a bearer token to every authenticated request when present, or if not, add a Tenant header with the tenantId.
• When in the development environment, an artificial 1 second delay is added to every response make testing easier. Otherwise your localhost will load everything instantly and it will be difficult to see and test loading feedback.
• Interceptors are also used as a catch-all to some 400, 500 level errors

A base Axios object requests contains methods for Get, Post, Put, and Delete. These methods then used by feature specific objects to construct API calls. An agent object encapsulates these methods which is then exported for use elsewhere in the application, like MobX stores.

Alternate methods are used for for Post, and Put when dealing with form data. It’s common to use form data when sending up files.

Next Steps

The next sections will look at the pages, components, layout & navigation, and the collection of template resources. The data tables, forms and validation have their own section. The theme style is explored in this guide.