Skip to content

Commit

Permalink
Tooling article updates (#29568)
Browse files Browse the repository at this point in the history
  • Loading branch information
guardrex committed Jun 22, 2023
1 parent 325eb54 commit 2fb33d9
Showing 1 changed file with 148 additions and 20 deletions.
168 changes: 148 additions & 20 deletions aspnetcore/blazor/tooling.md
Original file line number Diff line number Diff line change
Expand Up @@ -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**.

Expand All @@ -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 <xref:blazor/hosting-models>.
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 <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (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 <xref:security/enforcing-ssl#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos>.

:::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"
Expand All @@ -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 <xref:blazor/hosting-models>.
Expand All @@ -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 <xref:blazor/hosting-models>.

:::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**.

Expand Down Expand Up @@ -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.
Expand All @@ -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.

Expand Down Expand Up @@ -418,7 +464,32 @@ For more information, see <xref:security/enforcing-ssl#trust-https-certificate-o

1. Select **New Project** from the **File** menu or create a **New** project from the **Start Window**.

:::moniker range=">= aspnetcore-7.0"
:::moniker range=">= aspnetcore-8.0"

1. For a Blazor Web Apps experience (*recommended*), Visual Studio for Mac can't create a Blazor Web App in its UI at this time. Open a command shell with Apple's **Terminal** utility application in macOS's `Applications/Utilities` folder. Change the directory to the location where you want to create the app with the [`ls` command](https://man7.org/linux/man-pages/man1/ls.1.html). For example, use the `ls Desktop` command to change the directory to the desktop. Execute the following command in the command shell:

```dotnetcli
dotnet new blazor -o BlazorApp
```

After the app is created, open the project file (`BlazorApp.csproj`) with Visual Studio for Mac.

> [!NOTE]
> Visual Studio for Mac will be able to create Blazor Web Apps in an upcoming release.

<!-- HOLD FOR 8.0 UPDATE TO USE VS UI

1. In the sidebar, select **Web and Console** > **App**.

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. In the sidebar, select **Web and Console** > **App**.

Expand All @@ -442,19 +513,27 @@ For more information, see <xref:security/enforcing-ssl#trust-https-certificate-o

1. Confirm that **Authentication** is set to **No Authentication**. Select **Continue**.

:::moniker range="< aspnetcore-8.0"

1. For a hosted Blazor WebAssembly experience, select the **ASP.NET Core Hosted** checkbox.

1. In the **Project name** field, name the app `WebApplication1`. Select **Create**.
:::moniker-end

1. In the **Project name** field, name the app `BlazorApp`. Select **Create**.

1. Select the **Start Without Debugging** command from the **Debug** menu to run the app *without the debugger*. Run the app with **Debug** > **Start Debugging** or the Run (&#9654;) 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 <xref:security/enforcing-ssl#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos>.

:::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`)
Expand All @@ -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)
Expand All @@ -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`
Expand All @@ -507,19 +597,57 @@ 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 <xref:blazor/hosting-models>. For more information on Blazor project templates, see <xref:blazor/project-structure>.
For more information on Blazor project templates, see <xref:blazor/project-structure>.

For more information on template options, see the following resources:

:::moniker range=">= aspnetcore-8.0"

<!-- HOLD FOR 8.0

* [`blazor`](/dotnet/core/tools/dotnet-new-sdk-templates#blazor)

-->

* 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)
* 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 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:
Expand Down

0 comments on commit 2fb33d9

Please sign in to comment.