React.NET

About this solution

This is a lightweight solution that allows for React comonents to be reused in ABP MVC/Razor pages.

This is accomplished by using a dynamic router system for React components; there is a component registry system that new React components must be added to. Once registered, the system can take the the React bundles at runtime, and inject them into the .NET frontend using the exention methods.

This is a layered startup solution based on Domain Driven Design (DDD) practises. All the fundamental ABP modules are already installed. Check the Application Startup Template documentation for more info.

Pre-requirements

• .NET9.0+ SDK
• Node v18 or 20

Configurations

The solution comes with a default configuration that works out of the box. However, you may consider to change the following configuration before running your solution:

• Check the ConnectionStrings in appsettings.json files under the MyAbpApp.Web and MyAbpApp.DbMigrator projects and change it if you need.

Before running the application

• Run abp install-libs command on your solution folder to install client-side package dependencies. This step is automatically done when you create a new solution, if you didn't especially disabled it. However, you should run it yourself if you have first cloned this solution from your source control, or added a new client-side package dependency to your solution.
• Run MyAbpApp.DbMigrator to create the initial database. This step is also automatically done when you create a new solution, if you didn't especially disabled it. This should be done in the first run. It is also needed if a new database migration is added to the solution later.
• Run npm install on the React component

Running the application

Run the .NET component with dotnet run --project src/MyAbpApp.Web and the React component with npm run start

Generating a Signing Certificate

In the production environment, you need to use a production signing certificate. ABP Framework sets up signing and encryption certificates in your application and expects an openiddict.pfx file in your application.

To generate a signing certificate, you can use the following command:

dotnet dev-certs https -v -ep openiddict.pfx -p 0a4bf778-610b-433f-b93a-ee82a69d6797

0a4bf778-610b-433f-b93a-ee82a69d6797 is the password of the certificate, you can change it to any password you want.

It is recommended to use two RSA certificates, distinct from the certificate(s) used for HTTPS: one for encryption, one for signing.

For more information, please refer to: OpenIddict Certificate Configuration

Also, see the Configuring OpenIddict documentation for more information.

Solution structure

This is a layered monolith application that consists of the following applications:

• MyAbpApp.DbMigrator: A console application which applies the migrations and also seeds the initial data. It is useful on development as well as on production environment.
• MyAbpApp.Web: ASP.NET Core MVC / Razor Pages application that is the essential web application of the solution.

Deploying the application

Deploying an ABP application follows the same process as deploying any .NET or ASP.NET Core application. However, there are important considerations to keep in mind. For detailed guidance, refer to ABP's deployment documentation.

Additional resources

You can see the following resources to learn more about your solution and the ABP Framework:

• Web Application Development Tutorial
• Application Startup Template