Nano ASP.NET SaaS Boilerplate
Admin credentials (all tenants): admin@email.com / Password123!
Sample data resets every hour
Nano ASP.NET SaaS Boilerplate
General
.NET Solution
Vue UI
React UI
Razor Pages
React UI

Top Level

The React client is a single page application built using the modern JS framework React. It uses TypeScript as the primary language and development runs on Vite build tools.

Overview

The best way to explain this React application is by starting with its ‘core’ or central structure. That would be the root App.tsx component, along with the Router, API, and Stores. The Core Application guide covers these topics.

Zooming out is everything else, explained in the the Pages, Layout & Components guide. Template Resources is the collection of component samples, which are organized conveniently ‘on the side’. Data Tables, Forms & Validation are covered in more detail..

The style or ‘theme’ is a project in itself. The styles are managed in the assets folder as Bootstrap 5 based scss. While similar in all three UI projects, its covered from React’s perspective in the Theme & Styling guide.

Top Level

A quick overview of the files and folders you see from the top:

  • Src – this is the folder where app source code lives
  • Index.html – this is where React will mount the application
  • .env.development & .env.production – these are environment variables that the Vite build tool uses, they dictate where the app should look for the API
  • Vite.config.ts – this is the Vite configuration file.
  • Package.json – NPM manifest of all dependencies, contains two scripts, serve & build
  • tsconfig.json – TypeScript configuration
  • .gitignore – tells git source-control to ignore certain files and folders

Vite is a generic build tool that can be used for many types of projects, not just React projects. For that reason, it requires the configuration file. It’s better than using the regular CLIs that come with React or Vue because it’s faster, more stable, and has some great features like being able to use scss styles directly.

Next Steps

Read the Core Application guide to get an understanding of how the app is built starting from the root component.