Exercise - Create and run a Blazor web app

 Let's set up our .NET development environment and create our first Blazor web app.

This module gives you the option to use the .NET CLI, Visual Studio Code, or Visual Studio 2022 for local development. If you're developing with Visual Studio Code, be sure to install the C# Dev Kit extension, which we use in this module.

cloud computing training courses malaysia

This module uses the .NET 8.0 SDK. Ensure that you have .NET 8.0 installed by running the following command in your preferred command terminal:

.NET CLI
dotnet --list-sdks

Output similar to the following example appears:

Console
6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Ensure that a version that starts with 8 is listed. If none is listed or the command isn't found, install the most recent .NET 8.0 SDK.

ai artificial intelligence training courses malaysia

Create a new Blazor web app with the C# Dev Kit

To create a new Blazor web app project in Visual Studio Code with the C# Dev Kit:

  1. Bring up the Command Palette using Ctrl + Shift + P and then type .NET.

  2. Find and select the .NET: New Project command.

  3. Select Blazor Web App in the dropdown list.

  4. Select the folder where you want to create the new project.

  5. Name the project BlazorApp and press Enter to confirm.

  6. Select Create Project.

  7. View your new Blazor app project in the Explorer.

Optional: Create a new Blazor app with the .NET CLI

To create a Blazor web app project using the .NET SDK from the command-line, use the following command:

.NET CLI
dotnet new blazor

Whether you created the Blazor app with Visual Studio Code or the .NET CLI, the generated project contains the following files and pages:

  • 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.
  • Routes.razor configures the Blazor router.
  • The Components/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 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.

Run the app with the integrated debugger

  1. In Visual Studio Code, select Run from the menu.

  2. Select Start Debugging.

  3. Select C# from the Select debugger drop down.

  4. Select C#: BlazorApp [Default Configuration]

    This builds and starts the app with debugging enabled. The app should automatically open in your default browser. Your browser might warn you that the site isn't secure; it's safe to proceed.

    Screenshot showing the default Blazor app running in a browser.

juniper networks training courses malaysia

Optional: Run the app with the .NET CLI

  1. In the terminal window, copy and paste the following command to run the app and watch for file changes:

    .NET CLI
    dotnet watch

    This command builds and starts the app, and then applies any code changes to the running app. The app should automatically open in your default browser. Your browser might warn you that the site doesn't yet have a valid certificate; it's safe to proceed.

You've successfully run your first Blazor app!

Use this Blazor app in the following exercises.

jboss training courses malaysia

Comments

Post a Comment

Popular posts from this blog

Describe the Microsoft Defender portal

Image
  A unified security operations platform is a fully integrated toolset for security teams to prevent, detect, investigate, and respond to threats across their entire environment. For Microsoft, this means delivering the best of SIEM, XDR, posture management, and threat intelligence with advanced generative AI as a single platform. Through the Microsoft Defender portal, Microsoft delivers on the promise of a unified security operations platform so you can view the security health of your organization. The Microsoft Defender portal combines protection, detection, investigation, and response to threats across your entire organization and all its components, in a central place. To access the portal, you must be assigned an appropriate role such as Global Reader or Administrator, Security Reader or Administrator, or Security Operator in Microsoft Entra ID to access the Microsoft Defender portal. The Defender portal emphasizes quick access to information, simpler layouts, and bringing re...
Read more

piping works in malaysia

  Ever since the inception of our company Sannisya Enterprises, we are globally renowned as leading service provider of Piping Fabrication. These fabrication services cater to the needs of various automotive, engineering and power industries. Our Piping Fabrication service are widely praised among our clients for features like timely accomplishment of work and cost effectiveness. Due to our rich past & global experience, we are capable of imparting these services for piping of any size and of any type. Our company is specialized in an industrial ,Pipeline Fabricators, Steam Pipe Fabricators, Steam Pipe Contractors, IBR Contractors, Pipe Line Erection Works, Chemical & Process Pipe Line Contractors, Piping Contractors of Atomic Power Projects in all over India. We strictly follow industry norms and standards in rendering these fabrication services. Premium quality raw material, sourced from reliable vendors is used in designing of these piping structures. Post installation, ...
Read more

Rooftop Solutions for Sustainable Living in Malaysia

  Economic Benefits: Rooftop solar installations offer significant economic advantages for households and businesses across India. By tapping into solar power, individuals can substantially reduce their reliance on conventional grid electricity, leading to considerable savings on electricity bills. This long-term financial benefit not only bolsters household budgets but also enhances the bottom line for businesses. Moreover, the relatively low maintenance costs associated with rooftop solar systems make them a cost-effective investment in the long run. The economic benefits of rooftop solar in India extend beyond individual savings, spurring job creation in the renewable energy sector and bolstering local economies. Environmental Sustainability: The adoption of rooftop solar contributes to environmental sustainability by diminishing dependence on fossil fuels and curbing greenhouse gas emissions. India’s abundant solar resources make rooftop solar an environmentally friendly altern...
Read more