Build Blazor WebAssembly With Ant Design Blazor
Tags: antdesign, blazor, antdesignblazor, dotnet
Published: 2021-08-29 12:05:36

# 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 C# developers. With the default Blazor wasm template, we can create a SPA with a nice-look UI. Alternatively, we can also use Ant Design 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.
**$ dotnet new --install AntDesign.Templates**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a33xyr71d2vsxik81q5b.png)
With the template installed successfully, we can now create a Blazor project.
**$ dotnet new antdesign -o MyAntDesignApp**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oz757dag04a3ou8t48y2.png)
Now we can run it with Visual Studio 2022.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsbq1njz0tg5nwp855vf.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd9wwyn8oi5v3ju8a9m7.png)
We can add an ant-design button to see the effect.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g57j9k5i79n8b8dg8ac.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf9rzmelupjhw1qw6ech.png)
There is also an option --full to create a project with comprehensive components.
**$ dotnet new antdesign -o MyFullAntDesignApp --full**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31fqu5pme6jh1kb86cek.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/md0paua1ptjgxp0okuxx.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vpf6luf3ff85ac1iqs5.png)
# 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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhfjfqitvcs8vrrl06hp.png)
Firstly we install the package.
**$ dotnet add package AntDesign**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibnvfkcqt8esy4j0d80w.png)
We can also find it through NuGet.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4xo7lp4t1noijvz7n9e.png)
Then we register the service at Program.cs.
**`builder.Services.AddAntDesign();`**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8emdp7phkla41kpys5qi.png)
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>`**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp9h5ttdcr7rhked13rr.png)
To use it globally, we can add the using statement at _Imports.razor.
**`@using AntDesign`**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hhzzxwu2qe915c1w0q3.png)
To display the pop-up component dynamically, we need add the **`<AntContainer />`** component in App.razor.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gxtu62r2ide950ycdte.png)
Now we can add an ant-design button as well.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uobi34v0a2un5fpqncld.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96w9unuyhpop3u6pffm5.png)

# 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/