Try the Live Demo
React Version Razor Version

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 Version Razor Version
Docs Blog Pricing & FAQ Sign In
Contact
Getting Started

Client Setup Guide

Overview

Extract the client folder to wherever you would like to manage the react client on your computer. If you are using a code editor like VS Code, open the client folder. The project structure will look quite familiar if you have ever worked with React before. The src folder contains all the react components, and the public folder is for static assets.

Included already is a .gitignore file, so that node modules, etc. are excluded when you initialize source control on this folder. The .env files contain variables which point the app at either a localhost or the server in a production environment. The project.json contains a manifest of all the modules used by this application.

Install NPM packages

To install all the necessary packages, run the following command 

npm install

Node Package Manager will then begin installing everything we need. Usually this takes about 3 minutes. Once that completes there will be a new directory in the client folder called node_modules.

Run the Application

We can now run the application with the following command:

npm start

The first time you run the application, this process may take longer than usual, but once it completes the application should be running at http://localhost:3000/

Development Mode

Because we are using npm start to create our application, the app will be running in development mode. In development mode, the react app will use https://localhost:7250/ as its api. This means that the .net web api project must be running for things to work!

Build / Production

Once you have your app in a publishable state, you will want to create a ‘build’ version of the client app. A build version is an optimized version ready for the web. To create, run the following command with npm:

npm run build

Once this completes, React will create a new folder in your project called build.

Move all the files from the build folder into the wwwroot folder in the AspNano.WebApi project (overwrite any existing files). Now when you publish the .Net application, the updated react app will be served to visitors as a single page application.

To learn about the React project, start with the Client Overview documentation

Previous
Next