Build Blazor WebAssembly With Ant Design

Introduction

In the past years, front-end web development has been dominated by Javascript-based framework React, Angular, and Vue, while Blazor web assembly(wasm), a production-ready front-end framework base on .Net runtime, has supplied another choice especially for those C# developers. With the default template with Blazor new wasm project, we can create a SPA with a nice-look UI. Alternatively, we can also use Ant Design of Blazor, a modern Blazor template with high-quality components, to build rich and interactive interfaces. In this article, we will build Blazor projects with Ant Design of Blazor templates and components.

Create Blazor project with Ant Design Template

To start with it, we need firstly install Ant Design Template with dotnet command.

dotnet new --install AntDesign.Templates::0.8.4

With the template installed successfully, we can create a Blazor project.

dotnet new antdesign

Now we can run it with Visual Studio 2022.

We can simply add an ant-design button and see the effect.

There is also an option --full to initialize a project with comprehensive components.

dotnet new antdesign --full

Import Ant Design of Blazor to Existing Project

We can also import Ant Design of Blazor to existing projects very easily. 

Imagining we have an existing Blazor wasm project.

Firstly we install the package.

dotnet add package AntDesign --version 0.8.4

Or we can install it through NuGet UI.

Then we register the service at Program.cs.

builder.Services.AddAntDesign();

Then we add the links of css and js to index.html,

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />

<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

To use it globally, we can add the using statement at _Imports.razor.

Now we can add an ant-design button as well.

Conclusion

We have briefly gone through how to create a Blazor wasm with Ant Design of Blazor from scratch, as well as how to add Ant Design of Blazor template into an existing project. With worldwide popular ant-design components, we can easily create an attractive responsive SPA in the .Net ecosystem just like what React, Angular, and Vue do in Javascript. To know more about Ant Design of Blazor, we can refer to https://antblazor.com/en-US/