Build your first web app with ASP.NET Core using Blazor

Create your app

  1. Open the command palette in VS Code by pressing CTRL+SHIFT+P.
  2. Open the command palette in VS Code by pressing CMD+SHIFT+P.
  3. Type .NET: to see the commands you can run with C# Dev Kit!
  4. Find and select .NET: New Project to create a new .NET project.
  5. Scroll down and select Blazor Web App.
  6. Choose the folder location you'd like to save your project.
  7. Name the project BlazorApp in the command palette when prompted. Press Enter to confirm.

Enable Workspace Trust by checking the box and selecting Yes, I trust the authors.

Workspace trust dialog

If you have a Visual Studio Subscription, sign into your account. If you do not see a prompt pop up, click on the C# icon in VS Code's Status Bar towards the bottom right of your window.

Sign in with VS Subscription

In the Side Bar, make sure the VS Code Explorer is open. Here you will see the BlazorApp folder and the Solution Explorer.
Follow along with the video below to: collapse the BlazorApp folder, open the Solution Explorer, open the BlazorApp project, and drag and drop the Solution Explorer higher.

  1. Collapse the BlazorApp folder in the VS Code Explorer.
  2. Click on the chevron to the left of the Solution Explorer to expand it.
  3. Click on the chevron to the left of the BlazorApp project in the Solution Explorer to expand it.
  4. Drag and drop the Solution Explorer below BlazorApp.

VS Code's Solution Explorer

VS Code drag Solution Explorer section

Your project is created and loaded in Visual Studio Code. Take a look at the contents of your project using Solution Explorer.

Solution Explorer contains a list of folders and files created for your project

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.
  • Inside the Components directory:

    • App.razor is the root component for the app.
    • Routes.razor configures the Blazor router.
    • 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.

Continue