diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index 67dbb0c67514..f4755ee7a424 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -21,7 +21,15 @@ This article describes tools for building Blazor apps on various platforms. 1. Create a new project. -:::moniker range=">= aspnetcore-7.0" +:::moniker range=">= aspnetcore-8.0" + +1. For a Blazor Web App experience (*recommended*), choose the **Blazor Web App** template. + + For a Blazor WebAssembly experience, choose the **Blazor WebAssembly App** template, which includes demonstration code and Bootstrap, or the **Blazor WebAssembly App Empty** template without demonstration code and Bootstrap. + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" 1. For a Blazor Server experience, choose the **Blazor Server App** template, which includes demonstration code and [Bootstrap](https://getbootstrap.com/), or the **Blazor Server App Empty** template without demonstration code and Bootstrap. Select **Next**. @@ -37,21 +45,33 @@ This article describes tools for building Blazor apps on various platforms. 1. Provide a **Project name** and confirm that the **Location** is correct. Select **Next**. -1. In the **Additional information** dialog, select the **ASP.NET Core Hosted** checkbox for a hosted Blazor WebAssembly app. Select **Create**. +:::moniker range="< aspnetcore-8.0" - For information on the two Blazor hosting models, *Blazor WebAssembly* (standalone and hosted) and *Blazor Server*, see . +1. For a *hosted* Blazor WebAssembly app, select the **ASP.NET Core Hosted** checkbox in the **Additional information** dialog. + +:::moniker-end + +1. Select **Create**. 1. Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. +:::moniker range="< aspnetcore-8.0" + When running a hosted Blazor WebAssembly [solution](#visual-studio-solution-file-sln) in Visual Studio, the startup project of the solution is the **:::no-loc text="Server":::** project. +:::moniker-end + For more information on trusting the ASP.NET Core HTTPS development certificate, see . +:::moniker range="< aspnetcore-8.0" + > [!IMPORTANT] > When executing a hosted Blazor WebAssembly app, run the app from the solution's **:::no-loc text="Server":::** project. > > When the app is launched, only the `Properties/launchSettings.json` file in the :::no-loc text="Server"::: project is used. +:::moniker-end + :::zone-end :::zone pivot="linux" @@ -68,42 +88,64 @@ Use the [.NET command-line interface (CLI)](/dotnet/core/tools/) to execute comm 1. Install the latest [C# for Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp). -:::moniker range=">= aspnetcore-7.0" +:::moniker range=">= aspnetcore-8.0" + +1. For a Blazor Web App experience (*recommended*), execute the following command: + + ```dotnetcli + dotnet new blazor -o BlazorApp + ``` + + For a Blazor WebAssembly experience with demonstration code and Bootstrap, execute the following command: + + ```dotnetcli + dotnet new blazorwasm -o BlazorApp + ``` + + Alternatively, create an app without demonstration code and Bootstrap using the `blazorwasm-empty` project template: + + ```dotnetcli + dotnet new blazorwasm-empty -o BlazorApp + ``` + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" 1. For a Blazor Server experience with demonstration code and [Bootstrap](https://getbootstrap.com/), execute the following command: ```dotnetcli - dotnet new blazorserver -o WebApplication1 + dotnet new blazorserver -o BlazorApp ``` Alternatively, create an app without demonstration code and Bootstrap using the `blazorserver-empty` project template: ```dotnetcli - dotnet new blazorserver-empty -o WebApplication1 + dotnet new blazorserver-empty -o BlazorApp ``` For a Blazor WebAssembly experience with demonstration code and Bootstrap, execute the following command: ```dotnetcli - dotnet new blazorwasm -o WebApplication1 + dotnet new blazorwasm -o BlazorApp ``` Alternatively, create an app without demonstration code and Bootstrap using the `blazorwasm-empty` project template: ```dotnetcli - dotnet new blazorwasm-empty -o WebApplication1 + dotnet new blazorwasm-empty -o BlazorApp ``` For a hosted Blazor WebAssembly experience with demonstration code and Bootstrap, add the hosted option (`-ho`/`--hosted`) to the command: ```dotnetcli - dotnet new blazorwasm -o WebApplication1 -ho + dotnet new blazorwasm -o BlazorApp -ho ``` Alternatively, create a hosted Blazor WebAssembly app without demonstration code and Bootstrap using the `blazorwasm-empty` template with the hosted option: ```dotnetcli - dotnet new blazorwasm-empty -o WebApplication1 -ho + dotnet new blazorwasm-empty -o BlazorApp -ho ``` For information on the two Blazor hosting models, *Blazor WebAssembly* (standalone and hosted) and *Blazor Server*, see . @@ -115,26 +157,26 @@ Use the [.NET command-line interface (CLI)](/dotnet/core/tools/) to execute comm 1. For a Blazor WebAssembly experience, execute the following command: ```dotnetcli - dotnet new blazorwasm -o WebApplication1 + dotnet new blazorwasm -o BlazorApp ``` For a hosted Blazor WebAssembly experience, add the hosted option (`-ho` or `--hosted`) option to the command: ```dotnetcli - dotnet new blazorwasm -o WebApplication1 -ho + dotnet new blazorwasm -o BlazorApp -ho ``` For a Blazor Server experience, execute the following command: ```dotnetcli - dotnet new blazorserver -o WebApplication1 + dotnet new blazorserver -o BlazorApp ``` For information on the two Blazor hosting models, *Blazor WebAssembly* (standalone and hosted) and *Blazor Server*, see . :::moniker-end -1. Open the `WebApplication1` folder in Visual Studio Code. +1. Open the `BlazorApp` folder in Visual Studio Code. 1. The IDE requests that you add assets to build and debug the project. Select **Yes**. @@ -248,6 +290,8 @@ Use the [.NET command-line interface (CLI)](/dotnet/core/tools/) to execute comm :::moniker-end +:::moniker range="< aspnetcore-8.0" + **Hosted Blazor WebAssembly launch and task configuration** For hosted Blazor WebAssembly [solutions](#visual-studio-solution-file-sln), add (or move) the `.vscode` folder with `launch.json` and `tasks.json` files to the solution's parent folder, which is the folder that contains the typical project folders: :::no-loc text="Client":::, :::no-loc text="Server":::, and `Shared`. Update or confirm that the configuration in the `launch.json` and `tasks.json` files execute a hosted Blazor WebAssembly app from the **:::no-loc text="Server":::** project. @@ -257,7 +301,9 @@ Use the [.NET command-line interface (CLI)](/dotnet/core/tools/) to execute comm > > When the app is launched, only the `Properties/launchSettings.json` file in the :::no-loc text="Server"::: project is used. -:::moniker range=">= aspnetcore-6.0" +:::moniker-end + +:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" Examine the `Properties/launchSettings.json` file and determine the URL of the app from the `applicationUrl` property. Depending on the framework version, the URL protocol is either secure (HTTPS) `https://localhost:{PORT}` or insecure (HTTP) `http://localhost:{PORT}`, where the `{PORT}` placeholder is an assigned port. Note the URL for use in the `launch.json` file. @@ -418,7 +464,32 @@ For more information, see [!NOTE] + > Visual Studio for Mac will be able to create Blazor Web Apps in an upcoming release. + + + + For a Blazor WebAssembly experience, choose the **Blazor WebAssembly App** template, which includes demonstration code and Bootstrap, or the **Blazor WebAssembly App Empty** template without demonstration code and Bootstrap. + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" 1. In the sidebar, select **Web and Console** > **App**. @@ -442,19 +513,27 @@ For more information, see **Start Debugging** or the Run (▶) button to run the app *with the debugger*. If a prompt appears to trust the development certificate, trust the certificate and continue. The user and keychain passwords are required to trust the certificate. For more information on trusting the ASP.NET Core HTTPS development certificate, see . +:::moniker range="< aspnetcore-8.0" + > [!IMPORTANT] > When executing a hosted Blazor WebAssembly app, run the app from the solution's **:::no-loc text="Server":::** project. > > When the app is launched, only the `Properties/launchSettings.json` file in the :::no-loc text="Server"::: project is used. +:::moniker-end + :::zone-end ## Visual Studio solution file (`.sln`) @@ -466,8 +545,12 @@ Tooling outside of Visual Studio and Visual Studio for Mac can interact with sol * The [.NET CLI](/dotnet/core/tools/) can create solution files and list/modify the projects in solution files via the [`dotnet sln` command](/dotnet/core/tools/dotnet-sln). Other .NET CLI commands use the path of the solution file for various publishing, testing, and packaging commands. * [Visual Studio Code](https://code.visualstudio.com) can execute the `dotnet sln` command and other .NET CLI commands through its integrated terminal but doesn't use the settings in a solution file directly. +:::moniker range="< aspnetcore-8.0" + Throughout the Blazor documentation, *solution* is used to describe apps created from the Blazor WebAssembly project template with the **ASP.NET Core Hosted** option enabled or from a Blazor Hybrid project template. Apps produced from these project templates include a solution file (`.sln`) by default. For hosted Blazor WebAssembly apps where the developer isn't using Visual Studio or Visual Studio for Mac, the solution file can be ignored or deleted if it isn't used with .NET CLI commands. +:::moniker-end + For more information, see the following resources in the Visual Studio documentation: * [Introduction to projects and solutions](/visualstudio/get-started/tutorial-projects-solutions) @@ -491,9 +574,16 @@ For more information, see the following resources in the Visual Studio documenta ## Blazor template options -The Blazor framework provides templates for creating new apps for each of the two Blazor hosting models. The templates are used to create new Blazor projects and solutions regardless of the tooling that you select for Blazor development (Visual Studio, Visual Studio for Mac, Visual Studio Code, or the [.NET command-line interface (CLI)](/dotnet/core/tools/)): +The Blazor framework provides templates for creating new apps. The templates are used to create new Blazor projects and solutions regardless of the tooling that you select for Blazor development (Visual Studio, Visual Studio for Mac, Visual Studio Code, or the [.NET command-line interface (CLI)](/dotnet/core/tools/)): -:::moniker range=">= aspnetcore-7.0" +:::moniker range=">= aspnetcore-8.0" + +* Blazor Web App project template (*recommended*): `blazor` +* Blazor WebAssembly project templates: `blazorwasm`, `blazorwasm-empty` + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" * Blazor Server project templates: `blazorserver`, `blazorserver-empty` * Blazor WebAssembly project templates: `blazorwasm`, `blazorwasm-empty` @@ -507,10 +597,42 @@ The Blazor framework provides templates for creating new apps for each of the tw :::moniker-end -For more information on Blazor's hosting models, see . For more information on Blazor project templates, see . +For more information on Blazor project templates, see . For more information on template options, see the following resources: +:::moniker range=">= aspnetcore-8.0" + + + +* The *.NET default templates for dotnet new* article in the .NET Core documentation: + * [`blazorwasm`](/dotnet/core/tools/dotnet-new-sdk-templates#blazorwasm) (includes `blazorwasm-empty` options) +* Passing the help option (`-h` or `--help`) to the [`dotnet new`](/dotnet/core/tools/dotnet-new) CLI command in a command shell: + * `dotnet new blazor -h` + * `dotnet new blazorwasm -h` + * `dotnet new blazorwasm-empty -h` + +:::moniker-end + +:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" + +* *.NET default templates for dotnet new* article in the .NET Core documentation: + * [`blazorserver`](/dotnet/core/tools/dotnet-new-sdk-templates#blazorserver) (includes `blazorserver-empty` options) + * [`blazorwasm`](/dotnet/core/tools/dotnet-new-sdk-templates#blazorwasm) (includes `blazorwasm-empty` options) +* Passing the help option (`-h` or `--help`) to the [`dotnet new`](/dotnet/core/tools/dotnet-new) CLI command in a command shell: + * `dotnet new blazorserver -h` + * `dotnet new blazorserver-empty -h` + * `dotnet new blazorwasm -h` + * `dotnet new blazorwasm-empty -h` + +:::moniker-end + +:::moniker range="< aspnetcore-7.0" + * *.NET default templates for dotnet new* article in the .NET Core documentation: * [`blazorserver`](/dotnet/core/tools/dotnet-new-sdk-templates#blazorserver) * [`blazorwasm`](/dotnet/core/tools/dotnet-new-sdk-templates#blazorwasm) @@ -518,8 +640,14 @@ For more information on template options, see the following resources: * `dotnet new blazorserver -h` * `dotnet new blazorwasm -h` +:::moniker-end + +:::moniker range=">= aspnetcore-6.0" + ## .NET WebAssembly build tools +:::moniker-end + :::moniker range=">= aspnetcore-7.0" The .NET WebAssembly build tools are based on [Emscripten](https://emscripten.org/), a compiler toolchain for the web platform. To install the build tools, use ***either*** of the following approaches: