# Install

Let's start with MASA Blazor. MASA Blazor is the UI component library of the .NET Blazor framework for building feature-rich and fast applications.

# Prerequisites

All products of the MASA series are developed based on .Net 6.0, please make sure that you have installed .NET 6.0 。

# Presentation

The video content is the MASA Blazor template to create the Blazor Server demo video, you can choose to view or directly view the CLI creation part.

# CLI Creation

Install Masa.Template

Masa.Template, contains all project templates of the MASA series. The corresponding template of MASA Blazor is named masab

dotnet new --install Masa.Template

Create project

Create a project based on the project template name and specify the output directory, which is the root folder of the project.

dotnet new masab -o MasaBlazorApp

The default is Server mode, through the parameter --mode WebAssembly to create a WebAssembly mode project.

Startup project

Switch to the MasaBlazorApp directory by command cd MasaBlazorApp. Start the project with dotnet run, open the corresponding URL according to the program output, and you can see the effect of the MASA Blazor template project.

# Create manually

Create a Blazor Server project

Create a new Blazor application named BlazorApp in the command line interface:

dotnet new blazorserver -o BlazorApp

dotnet new blazorwasm -o BlazorApp

blazorserver is Blazor Server App template shortname。blazorwasm is Blazor WebAssembly App template shortname

Install NuGet package

dotnet add package Masa.Blazor

Import resource files

Blazor Server

in Pages/_Layout.cshtml import resource files：

<!--masa blazor css style-->
<link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet" />
<!--icon file,import need to use-->
<link href="https://cdn.jsdelivr.net/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<!--js(should lay the end of file)-->
<script src="_content/BlazorComponent/js/blazor-component.js"></script>

Blazor WebAssembly

in wwwroot\index.html import resource files：

<link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

<script src="_content/BlazorComponent/js/blazor-component.js"></script>

Inject services

Program.cs file add Masa.Blazor related services：

// Add services to the container.
builder.Services.AddMasaBlazor();

Global reference

update _Imports.razor file,Add:

@using Masa.Blazor
@using BlazorComponent

update Shared/MainLayout.razor file，set MApp as root element：

<MApp> //layout </MApp>

# Use

Refer to official documents Component,Add related components。 dotnet run start project Preview the MasaBlazor。