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 que dá suporte à renderização interativa do lado do servidor (SSR interativa) e à 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 Próximo.

• 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 Próximo.
  • 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 Próximo.

• 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 Próximo.
  • Para uma experiência Blazor WebAssembly, escolha o modelo de Aplicativo Blazor WebAssembly. Selecione Próximo.

• 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çõesBlazor 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
  

  Note

  O modelo de projeto hospedado Blazor WebAssembly não está disponível no .NET 8 ou posterior. Para criar um aplicativo hospedado Blazor WebAssembly usando um SDK do .NET 8 ou posterior, passe a opção -f|--framework com uma estrutura de destino do .NET 7 (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
  

  Note

  O modelo de projeto hospedado Blazor WebAssembly não está disponível no .NET 8 ou posterior. Para criar um aplicativo hospedado Blazor WebAssembly usando um SDK do .NET 8 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