Build your first web app with Blazor.
None.
macOS 10.15 or later versions.
10-15 minutes + download/installation time
Create, use, and modify a simple counter component.
If you prefer, you can also get started with Blazor using the command-line interface version of the tutorial.
During installation, the ASP.NET and web development workload should be selected (the installation link above already pre-selects that option).
If you already have Visual Studio 2022, you can add the ASP.NET and web development workload:
To start building .NET apps, download and install the .NET SDK (Software Development Kit).
Download .NET 7 SDK (64-bit)
Arm64 download
If you're on a Mac with an Apple M1 chip, you need to install the Arm64 version of the SDK.
Once you've installed, open a new terminal and run the following command:
dotnet
If the installation succeeded, you should see an output similar to the following:
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.
If everything looks good, select the Continue button below to go to the next step.
If you receive a zsh: command not found: dotnet error, make sure you opened a new terminal window. If you can't resolve the issue, use the I ran into an issue button to get help fixing the problem.
If you receive a dotnet: command not found error, make sure you opened a new terminal window. If you can't resolve the issue, use the I ran into an issue button to get help fixing the problem.
Start Visual Studio and select Create a new project.
Select the Blazor Server App template and select Next.
In the Additional information window, select .NET 7.0 (Standard Term Support) in the Framework drop-down if not already selected and click the Create button.
Your project is created and loaded in Visual Studio. Take a look at the contents of your project using Solution Explorer.
Several files were created to give you a simple Blazor app that is ready to run.
Program.cs
is the entry point for the app that starts the server and where you configure the app services and middleware.App.razor
is the root component for the app.Pages
directory contains some example web pages for the app.BlazorApp.csproj
defines the app project and its dependencies and can be viewed by double-clicking the BlazorApp project node in the Solution Explorer.launchSettings.json
file inside the Properties
directory defines different profile settings for the local development environment. A port number is automatically assigned at project creation and saved on this file.If everything looks good, select the Continue button below to go to the next step.
In your terminal, run the following command to create your app:
dotnet new blazorserver -o BlazorApp --no-https -f net7.0
This command creates your new Blazor app project and places it in a new directory called BlazorApp
inside your current location.
Navigate to the new BlazorApp
directory created by the previous command:
cd BlazorApp
Take a quick look at the contents of the BlazorApp
directory. Several files were created in the BlazorApp
directory, to give you a simple Blazor app that is ready to run.
Program.cs
is the entry point for the app that starts the server and where you configure the app services and middleware.App.razor
is the root component for the app.Pages
directory contains some example web pages for the app.BlazorApp.csproj
defines the app project and its dependencies.launchSettings.json
file inside the Properties
directory defines different profile settings for the local development environment. A port number ranging between 5000-5300 is automatically assigned at project creation and saved on this file.Take note of the BlazorApp
directory path as you will use it later in the tutorial.
If everything looks good, select the Continue button below to go to the next step.
Click on the Start Debugging button (green arrow) in the Debug Toolbar in Visual Studio to run your app.
Once the app is running, you can apply code changes to the running app by clicking the Hot Reload button.
You can stop the app at any time by clicking on the Stop button in the top toolbar.
The first time you run a web app in Visual Studio, it will set up a development certificate for hosting the app over HTTPS and then prompt you to trust the certificate. We recommend agreeing to trust the certificate. The certificate will only be used for local development, and without it most browsers will complain about the security of the website.
Wait for the app to launch in the browser. Once you get to the following page, you have successfully run your first Blazor app!
In your terminal, run the following command:
dotnet watch
The dotnet watch
command will build and start the app, and then update the app whenever you make code changes. You can stop the app at any time by selecting Ctrl+C.
Wait for the app to display that it's listening on http://localhost:<port number> and for the browser to launch at that address.
Wait for the app to display that it's listening on http://localhost:<port number> and then open a browser and navigate to that address. In this example, dotnet watch
showed it was listening on http://localhost:7178
.
Once you get to the following page, you have successfully run your first Blazor app!
The displayed page is defined by the Index.razor
file located inside the Pages
directory. This is what its contents look like:
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
It already contains the code that sets it as the homepage and displays the text Hello, world!
and Welcome to your new app
. It also includes a SurveyPrompt
component that renders a link to the Blazor feedback survey.
If you receive an error message saying "Your connection is not private" with error code NET::ERR_CERT_INVALID, try to restart all browser windows so the new certificate can be picked up by the browser and run the application again.
If you can't resolve the issue you're having, select the I ran into an issue button below to get help fixing the problem.
In the running app, navigate to the Counter page by clicking the Counter tab in the sidebar on the left. The following page should then be displayed:
Select the Click me button to increment the count without a page refresh. Incrementing a counter in a webpage normally requires writing JavaScript, but with Blazor you can use C#.
You can find the implementation of the Counter
component at Counter.razor
file located inside the Pages
directory.
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
A request for /counter
in the browser, as specified by the @page
directive at the top, causes the Counter
component to render its content.
Each time the Click me button is selected:
onclick
event is fired.IncrementCount
method is called.currentCount
is incremented.Each of the .razor files defines a UI component that can be reused.
Open the Index.razor
file in Visual Studio. The Index.razor
file already exists, and it was created when you created the project. It's located in the Pages
folder inside the BlazorApp
directory that was created earlier.
Open the Index.razor
file in a text editor of your choice. The Index.razor
file already exists, and it was created when you ran the dotnet new
command. It's located in the Pages
folder inside the BlazorApp
directory that was created earlier.
Add a Counter
component to the app's homepage by adding a <Counter />
element at the end of the Index.razor
file.
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter />
Click the Hot Reload button to apply the change to the running app. The Counter
component will then show up on the home page.
Once this change is saved, the dotnet watch
command will apply the change to the running app so that the Counter
component shows up on the home page.
Component parameters are specified using attributes or child content, which allow you to set properties on the child component. Define a parameter on the Counter
component for specifying how much it increments with every button click:
IncrementAmount
with a [Parameter]
attribute.IncrementCount
method to use the IncrementAmount
when incrementing the value of currentCount
.The following code shows how to achieve that. The highlighted lines show the changes.
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}
In Index.razor
, update the <Counter>
element to add an IncrementAmount
attribute that changes the increment amount to ten as shown by the highlighted line in the following code:
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter IncrementAmount="10" />
Apply the change to the app by clicking the Hot Reload button. The Index
component now has its own counter that increments by ten each time the Click me button is selected, as shown in the following image. The Counter
component (Counter.razor
) at /counter
continues to increment by one.
The Index
component now has its own counter that increments by ten each time the Click me button is selected, as shown in the following image. The Counter
component (Counter.razor
) at /counter
continues to increment by one.
Congratulations, you've built and run your first Blazor app!
Now that you've got the basics, continue building your first Blazor app with Blazor self-guided learning module on Microsoft Learn where you will build a to-do list app.
Microsoft Learn: Build a Blazor todo list app
Go through the 6-part Intro to Web Development with .NET series! Here, you'll build awesome projects and learn all about Razor Pages, Minimal APIs, Blazor, and more.
Intro to Web Development with .NET
Let Jeff walk you through building a full Blazor app from start to finish:
You might also be interested in...