During installation, the ASP.NET and web development workload should be selected (the installation link above already pre-selects that option).
Already have Visual Studio?
If you already have Visual Studio 2022, you can add the ASP.NET and web development workload:
Select the Windows key, type Visual Studio Installer, and press Enter.
If prompted, allow the installer to update itself.
If an update for Visual Studio 2022 is available, an Update button will be shown. Select it to update before modifying the installation.
Find your Visual Studio 2022 installation and select the Modify button.
If not selected already, select the ASP.NET and web development workload and select the Modify button. Otherwise, just close the dialog window.
Create your app
Start Visual Studio and select Create a new project.
In the Create a new project dialog, type Blazor on the search box and hit Enter.
Select the Blazor Server App template and select Next.
In the Configure your new project dialog, enter BlazorApp as the project name and select Next.
In the Additional information dialog, you can leave all the default values and select Create.
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.
The 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.
The 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.
Run your app
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!
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.
Try the counter
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:
You can find the implementation of the Counter component at Counter.razor file located inside the Pages directory.
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:
The onclick event is fired.
The IncrementCount method is called.
The currentCount is incremented.
The component is rendered to show the updated count.
Add a component
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.
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.
Modify a component
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:
Add a public property for IncrementAmount with a [Parameter] attribute.
Change the 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.
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.
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.