Blazor Tutorial - Build Your First Web App

Overview

• Purpose: Build a first web app with ASP.NET Core using Blazor in Visual Studio Code.
• Prerequisites: None required, macOS 12.0 or later suggested.
• Time to Complete: 10-15 minutes plus download/installation time.

Installation and Setup

Tools Required

• .NET SDK: Free, open-source tools and libraries for C# application development.
• Visual Studio Code (VS Code): A lightweight, free, popular code editor.
• C# Dev Kit: VS Code extensions to simplify C# development.

Installation Steps

1. Install .NET SDK:
   • For Intel Macs: Download here
   • For Apple Silicon Macs: Download here.
2. Install VS Code: Download here.
3. Install C# Dev Kit via the Extensions button in VS Code.
4. Run the .NET WinGet Configuration file: Download here.
   • Follow terminal prompts, agree to the license, and complete installation.

Verify Installation

• Open VS Code, set up Workspace Trust, open the terminal, and run dotnet to verify.

Building Your First App

Creating the App

1. Open command palette in VS Code (CTRL+SHIFT+P or CMD+SHIFT+P).
2. Type .NET: New Project, select Blazor Web App.
3. Save project in desired folder, name it BlazorApp.
4. Ensure VS Code Explorer and Solution Explorer are configured correctly.

Understanding Project Structure

• Program.cs: Entry point for the app.
• App.razor: Root component.
• Routes.razor: Configures routing.
• BlazorApp.csproj: Defines project dependencies.

Running the App

• Use the Run and Debug feature in VS Code.
• Select C#: BlazorApp [Default Configuration] and C# debugger.
• App runs in the browser; homepage defined by Home.razor.

Modifying and Enhancing your App

Counter Feature

• Navigate to Counter page to see the click-to-increment feature.
• Counter implemented in Counter.razor using C#, not JavaScript.

Adding Components

• Add <Counter /> to Home.razor to reuse counter component on homepage.

Modifying Components

• Add IncrementAmount parameter to Counter to change increment step.
• Modify Home.razor to increment by 10 using <Counter IncrementAmount="10" />.

Next Steps

• Continue learning with Blazor on Microsoft Learn with a to-do list app project.

Additional Resources

• Blazor Documentation: Learn to build web apps with Blazor.
• Publishing Concepts: Learn how to publish Blazor apps using Azure.
• REST API Development: Learn to create a REST API using ASP.NET.

By following this tutorial, one will successfully set up their environment, build, and run a simple Blazor web app. The process involves learning about essential tools, handling setups, and executing basic app development and enhancement strategies using Blazor.