Nano includes a complete React frontend project that can be used as the user interface for an ASP.NET Core application. The React project is a standalone application that communicates with the ASP.NET Core Web API through HTTP requests, allowing the frontend and backend to be developed and deployed independently.

The project includes the configuration and application structure needed to get started with React, including routing, authentication state, layouts, data tables, forms, and API integration. You can customize the existing application or use it as a foundation for building your own SaaS application or web application.

Because the React project has no direct dependency on the backend source code, it can also be maintained separately with its own source control, development workflow, and deployment process.

Prerequisites

Before setting up the React project, make sure Node.js and NPM are installed on your development machine. NPM is the package manager used to install the JavaScript dependencies required by the application.

Install NPM Packages

Extract the react project folder to a location on your computer.

Open a terminal window in the project directory and run:

npm install

Node package manager (NPM) will install the necessary dependencies and store them in node_modules.

Run the Application

Run the application with the following command:

npm run serve

The script will run the application at http://localhost:3000/ in development mode.

When the app is running in development mode, it will use the local .NET project at https://localhost:7250/ as the API URL; ensure that it is running.

Build for Production

To create an optimized build version of the app for publishing, run the following command:

npm run build

The build process will generate the production files in a new dist directory.

If you are hosting the React application together with the ASP.NET Core Web API, copy all files from the dist directory into the wwwroot directory of the AspNano.WebApi project, overwriting any existing files.

The files in wwwroot will then be included when the ASP.NET Core application is published and will be served as the application’s frontend.

Development vs. Production

During development, the React application runs using its own development server, while the ASP.NET Core project runs separately as the backend API. This allows you to make frontend changes without rebuilding or restarting the backend application.

For production deployment, the React application can be compiled into static files and hosted by the ASP.NET Core application through its wwwroot directory.

This gives you the flexibility to develop the frontend and backend independently while still deploying them together when appropriate.

Next Steps

Once the React project is running, continue with Top Level to learn about the project’s code structure and the purpose of its main directories and files.