Ferramentas para ASP.NET Core Blazor

• Instale a última versão do Visual Studio com a carga de trabalho ASP.NET e desenvolvimento para a Web.

• Crie um novo projeto utilizando um dos modelos Blazor disponíveis:

  • Blazor Web App: cria um aplicativo Web do Blazor compatível com a SSR interativa (renderização interativa do lado do servidor) e com a CSR (renderização do lado do cliente). O modelo do Blazor Web App é recomendado como uma introdução ao Blazor para aprender sobre recursos do Blazor do lado do servidor e do cliente.
  • Blazor WebAssembly Aplicativo Autônomo: cria um aplicativo Web cliente autônomo que pode ser implantado como um site estático.

Selecione Avançar.

• Instale a última versão do Visual Studio com a carga de trabalho ASP.NET e desenvolvimento para a Web.

• Crie um novo projeto:

  • Para uma experiência Blazor Server, escolha o modelo de Aplicativo Blazor Server, que inclui código de demonstração e Bootstrap, ou o modelo de Aplicativo vazio Blazor Server sem código de demonstração e Bootstrap. Selecione Avançar.
  • Para uma experiência Blazor WebAssembly autônoma, escolha o modelo de Blazor WebAssemblyAplicativo, que inclui código de demonstração e Bootstrap, ou o modelo de Blazor WebAssemblyAplicativo vazio sem código de demonstração e Bootstrap. Selecione Avançar.

• Instale a última versão do Visual Studio com a carga de trabalho ASP.NET e desenvolvimento para a Web.

• Crie um novo projeto:

  • Para uma experiência Blazor Server, escolha o modelo de Aplicativo Blazor Server. Selecione Avançar.
  • Para uma experiência Blazor WebAssembly, escolha o modelo de Aplicativo Blazor WebAssembly. Selecione Avançar.

• Para um aplicativo hospedadoBlazor WebAssembly, selecione a caixa de seleção ASP.NET Hospedado na caixa de diálogo Informações adicionais.

Configuração de inicialização e tarefa Blazor WebAssembly hospedada

Para soluçõessoluções Blazor WebAssemblyhospedadas, adicione (ou mova) a pasta .vscode com arquivos launch.json e tasks.json na pasta pai da solução, que é a pasta que contém as pastas típicas do projeto: Client, Server e Shared. Atualize ou confirme se a configuração nos arquivos launch.json e tasks.json executa um aplicativo hospedado Blazor WebAssembly do projeto Server.

Examine o arquivo Properties/launchSettings.json e determine a URL do aplicativo da propriedade applicationUrl. Dependendo da versão da estrutura, o protocolo de URL é seguro (HTTPS) https://localhost:{PORT} ou não seguro (HTTP) http://localhost:{PORT}, em que o espaço reservado {PORT} é uma porta atribuída. Observe a URL para uso no arquivo launch.json.

Na configuração de inicialização do arquivo .vscode/launch.json:

• Defina o diretório de trabalho atual (cwd) para a pasta do projeto Server.
• Indique a URL do aplicativo com a propriedade url. Use o valor registrado anteriormente do arquivo Properties/launchSettings.json.

"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

Na configuração anterior:

• O espaço reservado {SERVER APP FOLDER} é a pasta do projeto Server, normalmente Server.
• O espaço reservado {URL} é a URL do aplicativo, que é especificada no arquivo do aplicativo Properties/launchSettings.json na propriedade applicationUrl.

Se o Google Chrome for preferível em relação ao Microsoft Edge, atualize ou adicione uma propriedade adicional de "browser": "chrome" à configuração.

No arquivo de exemplo .vscode/launch.json a seguir:

• Define o diretório de trabalho atual como a pasta Server.
• Define a URL do aplicativo como http://localhost:7268.
• Altera o navegador padrão do Microsoft Edge para o Google Chrome.

"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

O arquivo .vscode/launch.json completo:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

No .vscode/tasks.json, adicione um argumento build que especifica o caminho para o arquivo de projeto do aplicativo Server:

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

No argumento anterior:

• O espaço reservado {SERVER APP FOLDER} é a pasta do projeto Server, normalmente Server.
• O espaço reservado {PROJECT NAME} é o nome do aplicativo, normalmente com base no nome da solução seguido por .Server em um aplicativo gerado a partir do modelo de projeto Blazor WebAssembly.

Um arquivo de exemplo .vscode/tasks.json com um projeto Server chamado BlazorHosted na pasta Server da solução:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

.vscode/launch.json (configuração launch):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

Na configuração anterior do diretório de trabalho atual (cwd), o espaço reservado {SERVER APP FOLDER} é a pasta do projeto Server, normalmente "Server".

Se o Microsoft Edge for usado e o Google Chrome não estiver instalado no sistema, adicione uma propriedade adicional de "browser": "edge" à configuração.

Exemplo para uma pasta de projeto de Server e que gera o Microsoft Edge como o navegador para execuções de depuração em vez do navegador padrão Google Chrome:

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (argumentos de comando dotnet):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

No argumento anterior:

• O espaço reservado {SERVER APP FOLDER} é a pasta do projeto Server, normalmente "Server".
• O espaço reservado {PROJECT NAME} é o nome do aplicativo, normalmente com base no nome da solução seguido por ".Server" em um aplicativo gerado a partir do modelo de projeto Blazor.

O exemplo a seguir do tutorial para usar SignalR com um aplicativo Blazor WebAssembly usa um nome de pasta de projeto e Server um nome de projeto de BlazorWebAssemblySignalRApp.Server:

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

Crie um novo projeto:

• Altere para o diretório, usando o comando cd, no qual você deseja criar a pasta do projeto (por exemplo, cd c:/users/Bernie_Kopell/Documents).

• Para uma experiência de Blazor Web App com SSR interativa (renderização interativa do lado do servidor) padrão, execute o seguinte comando:

  dotnet new blazor -o BlazorApp
  

• Para uma experiência Blazor WebAssembly autônoma, execute o seguinte comando em um shell de comando que utiliza o modelo blazorwasm:

  dotnet new blazorwasm -o BlazorApp
  

Crie um novo projeto:

• Altere para o diretório, usando o comando cd, no qual você deseja criar a pasta do projeto (por exemplo, cd c:/users/Bernie_Kopell/Documents).

• Para obter uma experiência Blazor Server com código de demonstração e Bootstrap, execute o seguinte comando:

  dotnet new blazorserver -o BlazorApp
  

• Para obter uma experiência Blazor WebAssembly autônoma com código de demonstração e Bootstrap, execute o seguinte comando:

  dotnet new blazorwasm -o BlazorApp
  

• Para uma experiência Blazor WebAssembly hospedada com código de demonstração e Bootstrap, adicione a opção hospedada (-ho/--hosted) ao comando:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Observação

  O modelo de projeto Blazor WebAssembly hospedado não está disponível no ASP.NET Core 8.0 ou posterior. Para criar um aplicativo Blazor WebAssembly hospedado usando um SDK do .NET 8.0 ou posterior, passe a opção -f|--framework com uma estrutura de destino 7.0 (net7.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net7.0
  

Crie um novo projeto:

• Altere para o diretório, usando o comando cd, no qual você deseja criar a pasta do projeto (por exemplo, cd c:/users/Bernie_Kopell/Documents).

• Para uma experiência Blazor WebAssembly, execute o seguinte comando:

  dotnet new blazorwasm -o BlazorApp
  

• Para uma experiência Blazor WebAssembly hospedada, adicione a opção hospedada (-ho ou --hosted) ao comando:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Observação

  O modelo de projeto Blazor WebAssembly hospedado não está disponível no ASP.NET Core 8.0 ou posterior. Para criar um aplicativo Blazor WebAssembly hospedado usando um SDK do .NET 8.0 ou posterior, passe a opção -f|--framework com o moniker da estrutura de destino (por exemplo, net6.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

• Para uma experiência Blazor Server, execute o seguinte comando:

  dotnet new blazorserver -o BlazorApp