### Install and Run React UI for ASP.NET Zero Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-07-react-aspnet-core-getting-started-guide/react-aspnet-core-getting-started-guide.md This sequence of commands installs the necessary dependencies for the React UI and starts the development server. Navigate to the React project directory before running these commands. ```bash cd ../../react npm install npm run dev ``` -------------------------------- ### Start Angular Frontend Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-02-angular-aspnet-core-getting-started-guide/angular-aspnet-core-getting-started-guide.md Commands to install dependencies, create dynamic bundles, and start the Angular frontend development server. ```bash cd angular yarn yarn create-dynamic-bundles yarn start ``` -------------------------------- ### Verify Environment Setup Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-07-react-aspnet-core-getting-started-guide/react-aspnet-core-getting-started-guide.md Run these commands to check if Node.js, npm, and .NET SDK are installed and meet the required versions. ```bash node --version npm --version dotnet --version ``` -------------------------------- ### Verify Development Environment Setup Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-02-angular-aspnet-core-getting-started-guide/angular-aspnet-core-getting-started-guide.md Run these commands to verify that Node.js, Angular CLI, and .NET SDK are installed and configured correctly for the project. ```bash node --version ng version dotnet --version ``` -------------------------------- ### Start ASP.NET Core Backend Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/how-to-integrate-elsa-v3-with-aspnet-zero-part-2.md Run this command in the `aspnet-core` directory to start the backend application. This will also automatically start the ElsaServer as a child process. ```bash cd aspnet-core dotnet run --project src/YourProjectName.Web.Host ``` -------------------------------- ### Implement Caching and Pub/Sub with StackExchange.Redis Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/top-10-net-libraries-to-use-in-2026.md Shows how to establish a connection to Redis, retrieve a database instance, and perform basic caching operations like setting and getting string values. Also includes an example of publishing a message to a Redis channel for real-time event distribution. ```csharp // Connect once, reuse everywhere var redis = ConnectionMultiplexer.Connect("localhost"); var db = redis.GetDatabase(); // Simple caching await db.StringSetAsync("product:123", JsonSerializer.Serialize(product), TimeSpan.FromMinutes(10)); var cached = await db.StringGetAsync("product:123"); // Pub/Sub for realtime events across servers var sub = redis.GetSubscriber(); await sub.PublishAsync("order-updates", orderId); ``` -------------------------------- ### Install All Dependencies (NPM) Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Infrastructure-React-Npm-Packages.md Use this command to install all front-end dependencies listed in package.json when using NPM. ```bash npm install ``` -------------------------------- ### Start MVC Application Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/how-to-integrate-elsa-v3-with-aspnet-zero-mvc.md Run the ASP.NET Zero MVC application using the .NET CLI. This will also start the ElsaServer. ```bash dotnet run --project src/YourProjectName.Web.Mvc ``` -------------------------------- ### Start Backend Service Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-02-angular-aspnet-core-getting-started-guide/angular-aspnet-core-getting-started-guide.md Run this command to start the backend API for your ASP.NET Zero application. ```bash cd src/MyProject.Web.Host dotnet run ``` -------------------------------- ### Run React UI with Vite Development Server Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Development-React-Docker.md Installs dependencies and starts the Vite development server for the React UI. Hot module replacement is enabled. Ensure the .env file points to the correct backend API URL. ```bash yarn && yarn dev ``` ```bash npm install && npm run dev ``` -------------------------------- ### Check EF Core Installation Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Getting-Started-MacOSX.md Verify that the EF Core tools are installed correctly by running this command in the terminal. A unicorn ASCII art indicates a successful installation. ```bash dotnet ef ``` -------------------------------- ### appsettings.json Example Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/asp-net-core-configuration.md This is an example of an appsettings.json file used for storing application configuration settings. ```json { "Logging": { "LogLevel": { "Default": "Information", "Microsoft.AspNetCore": "Warning" } }, "AllowedHosts": "*", "MySetting" : { "SpecialWord" : "Hello World" } } ``` -------------------------------- ### Start Angular Application Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Getting-Started-MacOSX.md Navigate to the 'base_folder/angular' directory and run this command to start the Angular development server. Ensure 'remoteServiceBaseUrl' in 'appconfig.json' is set to '5000'. ```bash npm start ``` -------------------------------- ### Run React Application Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Getting-Started-React.md Execute this command in the 'react' folder to start the development server for the React application. ```bash yarn dev # or npm run dev ``` -------------------------------- ### Tenant Subdomain Configuration Example Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Solution-Structure-Angular.md Example of configuring the appBaseUrl to use tenancy names as subdomains for a multi-tenant application. ```text http://{TENANCY_NAME}.mydomain.com ``` -------------------------------- ### Register Elsa Hosted Services in Startup.cs Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/how-to-integrate-elsa-v3-with-aspnet-zero-part-1.md Add the using directive and register ElsaServerHostedService in the ConfigureServices method of Startup.cs. This service starts the Elsa Server as a child process when the Web.Host starts. ```csharp using YourProjectName.Web.ElsaServer; // ... inside ConfigureServices method services.AddPasswordlessLoginRateLimit(); // Start Elsa Server as a child process when this host starts services.AddHostedService(); ``` -------------------------------- ### Start Angular App Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/how-to-integrate-elsa-v3-with-aspnet-zero-part-2.md Execute this command in the `angular` directory in a separate terminal to start the frontend development server. ```bash cd angular npm start ``` -------------------------------- ### Add New Menu Item Example Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Features-React-Main-Menu-Layout.md Example of how to add a new menu item to the application's navigation. Ensure localization keys and routes are set up accordingly. ```typescript export const buildRawMenu = (): AppMenuItem[] => [ // ... existing items { id: "MyNewPage", title: L("MyNewPage"), permissionName: "Pages.MyNewPage", icon: "my-icon", route: "/app/admin/my-new-page", }, // ... more items ]; ``` -------------------------------- ### Install Client-Side Dependencies with Yarn Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Getting-Started-Core.md Run this command in the root directory of the .Web.Mvc project to install client-side dependencies before opening the solution in Visual Studio. This significantly reduces project opening and build times. ```bash yarn ``` -------------------------------- ### Run Development Server with Vite Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Infrastructure-React-Vite.md Use these commands to start the Vite development server for fast HMR and development builds. ```bash yarn dev ``` ```bash npm run dev ``` -------------------------------- ### Build and Run ASP.NET Zero Solution Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/how-to-integrate-elsa-v3-with-aspnet-zero-part-1.md Build the entire solution and run the Web.Host project to verify the ElsaServer integration. Check for log output confirming the ElsaServer child process has started. ```bash dotnet build YourProjectName.Web.sln dotnet run --project src/YourProjectName.Web.Host ``` -------------------------------- ### Run Docker Compose Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Deployment-React-Docker.md Starts the services defined in the docker-compose.yml file in detached mode. Ensure Docker Compose is installed. ```bash docker compose up -d ``` -------------------------------- ### Configure Startup.cs to Use XsrfMiddleware Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/http-only-anti-forgery-token-in-asp.net-zero.md Add the UseHttpOnlyAntiForgeryToken extension method to the Configure method in Startup.cs to enable the middleware for your application. ```csharp public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseHttpOnlyAntiForgeryToken(); . . . } ``` -------------------------------- ### Create React App with Vite Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-07-react-aspnet-core-getting-started-guide/react-aspnet-core-getting-started-guide.md Use npm to create a new React project with TypeScript template using Vite. Install dependencies and start the development server. ```bash npm create vite@latest myapp.client -- --template react-ts cd myapp.client npm install npm run dev ``` -------------------------------- ### Enable Swagger UI in Startup.Configure Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Features-Mvc-Core-Swagger-UI.md Uncomment these lines in the Startup.Configure method to enable the Swagger UI middleware. ```csharp app.UseSwagger(); app.UseSwaggerUi(); ``` -------------------------------- ### Run Infrastructure Setup Script Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Development-Angular-Docker.md Execute this PowerShell script to set up the necessary Docker infrastructure, including SQL Server and Redis. The script uses docker-compose.infrastructure.yml to define and start the services. The PowerShell window will remain active to display logs; use Ctrl+X to exit. ```powershell run-infrastructure.ps1 ``` -------------------------------- ### Configure Blog Options in Startup Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/asp-net-core-configuration.md Binds a configuration section named 'BlogOptions' to the `BlogOptions` class using the `Configure` method in the `Startup` class. Ensure `BlogOptions` class is defined elsewhere. ```csharp // ... other codes var blogConfig = builder.Configuration.GetSection(BlogOptions.SettingName); builder.Services.Configure(blogConfig); ``` -------------------------------- ### Example config.json for ASP.NET ZERO Power Tools Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Power-Tools-Configuration.md This JSON file configures settings for ASP.NET Zero Power Tools, including project identification, license information, and file paths for both Angular and MVC project structures. Ensure paths and placeholders are updated to match your specific project setup. ```json { "CompanyName": "", "ProjectName": "[YOURPROJECTNAME]", "ProjectType": "Angular", "ProjectVersion": "v8.0.0", "ApplicationAreaName": "App", "LicenseCode": "[YOURLICENSECODE]", "AngularSrcPath": "\\..\\..\\angular\\src\\", "AngularMergedSrcPath": "\\..\\src\\{{Namespace_Here}}.Web.Host\\src\\", "CoreSrcPath": "\\..\\src\\", "FormatGeneratedFiles": true, "FileLocations": { "DbContext": "{{Namespace_Here}}.EntityFrameworkCore\\EntityFrameworkCore\\{{Project_Name_Here}}DbContext.cs", "AppAuthorizationProvider": "{{Namespace_Here}}.Core\\Authorization\\AppAuthorizationProvider.cs", "EntityHistoryHelper": "{{Namespace_Here}}.Core\\EntityHistory\\EntityHistoryHelper.cs", "AppPermissions": "{{Namespace_Here}}.Core\\Authorization\\AppPermissions.cs", "LocalizationFile": "{{Namespace_Here}}.Core\\Localization\\{{Project_Name_Here}}\\{{Project_Name_Here}}.xml", "EntityFrameWorkProjectFolder": "{{Namespace_Here}}.EntityFrameworkCore", "Mvc": { "AppNavigationProvider": "{{Namespace_Here}}.Web.Mvc\\Areas\\{{App_Area_Name_Here}}\\Startup\\{{App_Area_Name_Here}}NavigationProvider.cs", "AppPageNames": "{{Namespace_Here}}.Web.Mvc\\Areas\\{{App_Area_Name_Here}}\\Startup\\{{App_Area_Name_Here}}PageNames.cs", "BundleConfig": "{{Namespace_Here}}.Web.Mvc\\bundles.json" }, "Angular": { "AppNavigationService": "app\\shared\\layout\\nav\\app-navigation.service.ts", "ServiceProxies": "shared\\service-proxies\\service-proxy.module.ts", "Module": "app\\{{menu_Position_Here}}\\{{menu_Position_Here}}.module.ts", "RoutingModule": "app\\{{menu_Position_Here}}\\{{menu_Position_Here}}-routing.module.ts" } } } ``` -------------------------------- ### App Configuration Example Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Solution-Structure-Angular.md This JSON file contains fundamental settings for the client-side application, such as remote service base URL and application base URL. ```json { "remoteServiceBaseUrl": "https://localhost:44301", "appBaseUrl": "http://localhost:4200", "localeMappings": [] } ``` -------------------------------- ### Add MVC Project Reference and NuGet Package Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/modular-monolith-application.md Instructions for setting up the MVC project, including adding a reference to the Application project and installing the Abp.AspNetZeroCore.Web NuGet package. ```xml ``` -------------------------------- ### Configure Sample Report View Source: https://github.com/aspnetzero/documents/blob/master/docs/en/DevExpress-Reporting-Implementation.md Set up the `Index.cshtml` view for the sample report, including necessary CSS and JavaScript bundles, and render the DevExpress WebDocumentViewer. ```cshtml @using DevExpress.AspNetCore @using Zerov1002CoreMvcDemo.Web.Reports; @section Styles { } @section HeaderScripts { }
@(Html.DevExpress().WebDocumentViewer("DocumentViewer") .Height("1000px") .Bind(new SampleReport()) )
``` -------------------------------- ### Set Up WebApplication Builder Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/how-to-integrate-elsa-v3-with-aspnet-zero-part-1.md Initializes the `WebApplication.CreateBuilder` and configures essential services. `UseStaticWebAssets()` is necessary for the Blazor Server UI to serve static files correctly during development. ```csharp var builder = WebApplication.CreateBuilder(args); var configuration = builder.Configuration; var services = builder.Services; builder.WebHost.UseStaticWebAssets(); // Add HttpContextAccessor for tenant resolution services.AddHttpContextAccessor(); ``` -------------------------------- ### Install Angular Dependencies Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Deployment-Angular.md Run this command in the root directory of the Angular project to install all necessary dependencies. ```bash yarn ``` -------------------------------- ### Preview Production Build Locally Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Infrastructure-React-Bundling-Minifying-Compiling.md Use this command to serve the production build locally before deployment. This allows you to verify that everything functions correctly. ```bash yarn preview # or npm run preview ``` -------------------------------- ### Install Angular CLI Globally Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Deployment-Angular-Docker.md Installs the Angular CLI globally, which is a prerequisite for building Docker images. ```bash npm install -g @angular/cli ``` -------------------------------- ### ThemeXSettingsForm Component Example Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Adding-New-Metronic-Theme-React.md Example structure for ThemeXSettingsForm.tsx, which should be created by copying DefaultThemeSettingsForm.tsx and modifying form fields. ```tsx import React from "react"; import { Form, Select, Switch } from "antd"; import type { ThemeSettingsDto } from "@/api/generated/service-proxies"; import L from "@/lib/L"; interface Props { settings: ThemeSettingsDto; onSave: (values: ThemeSettingsDto) => void; } const ThemeXSettingsForm: React.FC = ({ settings, onSave }) => { const [form] = Form.useForm(); // ... form implementation }; ``` -------------------------------- ### Configure Elsa Services in Startup.cs Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/integrating-elsa-with-asp.net-zero.md Add this method to your Startup.cs to configure Elsa with Entity Framework persistence, various activities, and API endpoints. Ensure Elsa's configuration is correctly set up for your project. ```csharp public IServiceProvider ConfigureServices(IServiceCollection services) { ConfigureElsa(services); // Existing code blocks } ``` ```csharp private void ConfigureElsa(IServiceCollection services) { services.AddElsa(elsa => { elsa .UseEntityFrameworkPersistence(ef => ef.UseSqlServer(_appConfiguration.GetConnectionString("Default")) ) .AddConsoleActivities() .AddHttpActivities(_appConfiguration.GetSection("Elsa").GetSection("Server").Bind) .AddQuartzTemporalActivities() .AddJavaScriptActivities() .AddWorkflowsFrom(); elsa.UseAutoMapper(() => { }); } ); // Elsa API endpoints. services.AddElsaApiEndpoints(); services.Configure(options => { options.UseApiBehavior = false; }); services.Configure(options => { options.LowercaseUrls = false; }); // For Elsa Dashboard. services.AddRazorPages(); // Remove ABP filter and add Elsa special filter sservices.PostConfigure(options => { ReplaceResultFilter(options); }); } ``` -------------------------------- ### Install Specific Angular CLI Version Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-02-angular-aspnet-core-getting-started-guide/angular-aspnet-core-getting-started-guide.md Install a specific global version of the Angular CLI to resolve version mismatch issues between your global installation and the project's requirements. Ensure this version aligns with the one specified in your project's package.json. ```bash npm install -g @angular/cli@19 ``` -------------------------------- ### Write Unit Tests with xUnit Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/top-10-net-libraries-to-use-in-2026.md An example of a unit test using xUnit to verify the creation of a product with valid data. Requires Arrange, Act, and Assert steps. ```csharp public class ProductServiceTests { [Fact] public async Task Should_Create_Product_With_Valid_Data() { // Arrange var service = new ProductService(_mockRepo.Object); // Act var result = await service.CreateAsync(new CreateProductDto { Name = "Test" }); // Assert Assert.NotNull(result); Assert.Equal("Test", result.Name); } } ``` -------------------------------- ### Install NEST Package Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/save-audit-logs-to-elasticsearch-asp-net-zero.md Install the NEST package to your project using the Package Manager Console or NuGet Package Manager. ```shell PM> Install-Package NEST ``` -------------------------------- ### Build React Application for Production Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Deployment-React.md Run these commands in the React project's root directory to install dependencies and create an optimized production build. The output is placed in the 'dist/' folder. ```bash yarn build ``` ```bash npm run build ``` -------------------------------- ### Start Keycloak Docker Container Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/keycloak-aspnetzero-integration.md Command to start the Keycloak service defined in the `docker-compose.yml` file. Access Keycloak at `https://localhost:8443`. ```bash docker compose up ``` -------------------------------- ### Run ASP.NET Zero Migrator and Host Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/2026-04-07-react-aspnet-core-getting-started-guide/react-aspnet-core-getting-started-guide.md These commands outline the process for running the ASP.NET Zero migrator and the web host. Ensure you are in the correct directories before executing these commands. The migrator prepares the database, and the web host starts the backend API. ```bash cd src/MyCompanyName.AbpZeroTemplate.Migrator dotnet run ``` ```bash cd ../MyCompanyName.AbpZeroTemplate.Web.Host dotnet run ``` -------------------------------- ### ThemeXLayout Component Example Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Adding-New-Metronic-Theme-React.md Example implementation of the main layout component for ThemeX, including body class management and rendering of header, footer, and sidebar. ```tsx import React, { useEffect } from "react"; import { Outlet } from "react-router-dom"; import ThemeXHeader from "./ThemeXHeader"; import { Footer } from "../../Footer"; import { useTheme } from "@/hooks/useTheme"; import { SidebarMenu } from "../../sidebar-menu/SidebarMenu"; import ThemeXBrand from "./ThemeXBrand"; const ThemeXLayout: React.FC = () => { const { containerClass } = useTheme(); useEffect(() => { document.body.classList.add("app-themeX"); return () => { document.body.classList.remove("app-themeX"); }; }, []); return ( // ... your layout JSX ); }; export default ThemeXLayout; ``` -------------------------------- ### Add and Query Product with Translations (C#) Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/multi-lingual-entity-design.md Demonstrates how to create a product, add its translations in multiple languages, save to the database, and then query the product including its translations. Ensure EF Core's Include method is used for eager loading translations. ```csharp // Create a product var product = new Product { Amount = 10, Price = 29.99 }; // Add translations for the product product.Translations = new List { new ProductTranslation { LanguageCode = "en", Name = "Product Name", Description = "Product Description" }, new ProductTranslation { LanguageCode = "fr", Name = "Nom du Produit", Description = "Description du Produit" } }; // Add the product to the database context.Products.Add(product); context.SaveChanges(); // Query the product with translations var queriedProduct = context.Products .Include(p => p.Translations) .FirstOrDefault(); foreach (var translation in queriedProduct.Translations) { Console.WriteLine($"Language: {translation.LanguageCode}, Name: {translation.Name}, Description: {translation.Description}"); } ``` -------------------------------- ### Get Single Attribute (Default) Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/api-versioning.md Tries to get a single attribute of type TAttribute from a member. Returns a default value if not found. Supports inheritance. ```csharp public static TAttribute GetSingleAttributeOrDefault(MemberInfo memberInfo, TAttribute defaultValue = default(TAttribute), bool inherit = true) where TAttribute : Attribute { //Get attribute on the member if (memberInfo.IsDefined(typeof(TAttribute), inherit)) ``` -------------------------------- ### Telerik UI DatePicker Component Example Source: https://github.com/aspnetzero/documents/blob/master/blog-posts/en/using-telerik-asp.net-core-with-asp.net-zero.md A basic example of how to implement the Telerik UI DatePicker component in an ASP.NET Core view using Html.Kendo().DatePicker(). ```csharp

Telerik UI DatePicker for ASP.NET Core

@(Html.Kendo().DatePicker() .Name("my-picker") )
``` -------------------------------- ### Sample Dockerfile for ASP.NET Zero React App Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Deployment-React-Docker.md A multi-stage Dockerfile to build and serve a React application using Node.js for the build stage and Nginx for serving the production build. Ensure Docker is installed and running. ```dockerfile # Build stage FROM node:20-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build # Production stage FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` -------------------------------- ### Preview Production Build Locally Source: https://github.com/aspnetzero/documents/blob/master/docs/en/Deployment-React.md Use these commands to preview the production build locally before deploying. This allows you to test the optimized build in a similar environment to production. ```bash yarn preview ``` ```bash npm run preview ```