Efficiently managing state, routing, and authentication is crucial in modern React applications. This boilerplate leverages React Router v6, MobX state management, and Vite environment variables to provide a robust foundation for scalable web development.

React Router v6 handles the application’s routing logic, offering advanced features like nested routes and route-based metadata. Authentication with React is streamlined by integrating it directly into the routing system. React Router authentication ensures that users are directed to appropriate views based on their credentials, whether authenticated or requiring login.

MobX state management centralizes the application’s logic, making it easier to maintain and scale. Stores are feature-specific, handling everything from authentication and user profiles to layout preferences. Coupled with Vite’s environment variables, the application seamlessly integrates API interactions and development configurations, ensuring a smooth developer experience.

This setup forms a flexible, efficient architecture that supports advanced features like role-based access and persistent user settings, ideal for any modern React application.

Root Component

App.tsx and index.tsx are the top level components in the React app.

index.tsx contains global imports and mounts the React application to the root DOM element.

App.tsx is the top level component in the React component tree. When it mounts, theme defaults, sidebar state, and preferences are applied.

App.tsx checks for a token to see if the user is authenticated. If the user is authenticated, the user’s details are retrieved from the API and stored within the accountStore The router directs the user to a page, or the login screen depending on if the authentication was a success.

React Router

This application uses React Router v6. Routes are managed in routes.tsx. Authentication and role requirements are passed as metadata, handled within router/index.js.

Template Resources routes are grouped as Base UI or Extended UI. Base UI contains basic Bootstrap components while Extended UI contains third-party components, icons, and the sample dashboard.

Stores

MobX stores centralize state and logic. They are named by feature:

• 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.

Stores use api/agent.js to make HTTP requests to the server.

API

HTTP requests are handled within api/agent.js using Axios.

In agent.ts a few things are happening:

• The base API URL is set with .env.development & .env.production variables, using Vite’s metadata
• Axios interceptors append a bearer token to every authenticated request when present, or header with the tenantId if not
• 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 test loading feedback.
• Interceptors are used to catch 400 and 500 level errors

The Axios base contains methods for Get, Post, Put, and Delete. These methods are exposed by the agent object, which is typically used in MobX stores.

There are two alternate methods for Post / Put, which can be used for sending form data (uploading files).

Next Steps

The next section covers pages, components, layout & navigation.