Try the Live Demo

Some quick notes about the demo:

  • The demo data will reset every hour
  • The demo application is running in a low service tier and may take a few seconds to spin up.
  • In a real deployment, subdomains can be used to resolve tenants. In the demo, tenants are switched at login with the tenant selection.
  • To see data isolation in action, try logging in as different tenant users.
  • Only the root tenant can access the tenant management area.
  • Only admin level users can access the user administration area.
  • Every tenant has a default admin: admin@email.com
  • The password for all users: Password123!

Thank you for your interest. You can also send a message to learn more about the boilerplate.

asp nano

Please allow 10-15 seconds for the app to boot from a cold start. Try the live demo with the links below:

React Client

Client Overview Guide

The Nano Boilerplate Client is a React single page application (SPA).

This guide is a walkthrough of all the React client project structure and its key components.

Application Structure

At the top level, are two folders:

  • Public – static files like the logo, favicon, etc. and the index.html file containing the root div.
  • Src – contains the react component source code, with most of the components placed in subfolders and will be explained further.

Also at the top level, are these files:

  • .env.development and .env.production contain variables which specify which URI to use depending on the development environment.
  • package.json contains the dependency manifest. After running the npm-install command, another folder will appear called node_modules, see the set-up guide for instructions.
  • tsconfig.json is a configuration file for Typescript
  • .gitignore specifies files and folders to be ignored by git

Source Structure

The source folder (src) contains the entry point of the app, index.tsx and App.tsx, as well as routes.tsx for routing.

The source components are organized with this folder structure:

  • App – Axios api, Mobx stores, models, custom hooks, utilities
  • Components – React components
  • Navigation – layout, access, and navigation
  • Pages – views of the application
  • Theme – contains Mui theme overrides
  • Icons – icon collection

The main folders are explained further in the following sections

emotion.d.ts and react-app-env.ts are configuration files for Typescript and MUI