Partilhar via

Ferramentas para ASP.NET Core Blazor

  • Artigo

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 9 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e .NET Core. Para a versão atual, consulte a versão .NET 9 deste artigo.

Importante

Estas informações referem-se a um produto de pré-lançamento que pode ser substancialmente modificado antes de ser lançado comercialmente. A Microsoft não oferece garantias, expressas ou implícitas, em relação às informações fornecidas aqui.

Para a versão atual, consulte a versão .NET 9 deste artigo.

Este artigo descreve ferramentas para criar aplicativos Blazor usando várias ferramentas:

  • Visual Studio (VS): O ambiente de desenvolvimento integrado (IDE) mais abrangente para desenvolvedores .NET no Windows. Inclui uma variedade de ferramentas e recursos para elevar e aprimorar cada estágio do desenvolvimento de software.
  • Visual Studio Code (VS Code) é um editor de código aberto e multiplataforma que pode ser usado para desenvolver aplicativos Blazor.
  • da CLI do .NET: A interface de linha de comando (CLI) do .NET é uma cadeia de ferramentas multiplataforma para desenvolver, criar, executar e publicar aplicativos .NET. O CLI do .NET está incluído no SDK do .NET e é executado em qualquer plataforma suportada pelo SDK.

Selecione o ponto central deste artigo que melhor se adapta à ferramenta que escolheu.

Para criar um aplicativo Blazor com o Visual Studio, use as seguintes diretrizes:

  • Instale a versão mais recente do Visual Studio com o ASP.NET e o desenvolvimento da Web carga de trabalho.

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

    • Blazor Web App: Cria um aplicativo Web Blazor que oferece suporte à renderização interativa do lado do servidor (SSR interativo) e à renderização do lado do cliente (CSR). O modelo de Blazor Web App é recomendado para começar a usar o Blazor para saber mais sobre os recursos de Blazor do lado do servidor e do cliente.
    • Blazor WebAssembly Standalone App: cria um aplicativo Web cliente autônomo que pode ser implantado como um site estático.

Selecione Avançar.

  • Instale a versão mais recente do Visual Studio com a carga de trabalho ASP.NET e desenvolvimento web.

  • Crie um novo projeto:

    • Para uma experiência Blazor Server, escolha o modelo Blazor Server App, que inclui código de demonstração e Bootstrap, ou o modelo Blazor Server App Empty sem código de demonstração e Bootstrap. Selecione Avançar.
    • Para uma experiência de Blazor WebAssembly independente, escolha o modelo Blazor WebAssembly App, que inclui código de demonstração e Bootstrap, ou o modelo Blazor WebAssembly App Empty sem código de demonstração e Bootstrap. Selecione Avançar.

  • Instale a versão mais recente do Visual Studio com a carga de trabalho de ASP.NET e desenvolvimento da Web.

  • Crie um novo projeto:

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

Observação

O modelo de projeto Blazor WebAssembly hospedado não está disponível no ASP.NET Core 8.0 ou posterior. Para criar uma aplicação de Blazor WebAssembly hospedada, uma opção do Framework anterior ao .NET 8.0 deve ser selecionada marcando a caixa ASP.NET Core Hosted.

  • Para uma aplicação hospedadaBlazor WebAssembly, selecione a opção ASP.NET Core Hosted na caixa de diálogo Informações adicionais.
  • Selecione Criar.

Visual Studio Code é um ambiente de desenvolvimento integrado (IDE) de código aberto e multiplataforma que pode ser usado para desenvolver aplicativos Blazor.

Instale a versão mais recente do Visual Studio Code para sua plataforma.

Instale o C# Dev Kit para Visual Studio Code. Para obter mais informações, consulte Depurar aplicativos ASP.NET Core Blazor.

Se você é novo no VS Code, consulte a documentação do VS Code. Se você é novo no SDK do .NET, consulte O que é o SDK do .NET? e os artigos associados na documentação do SDK do .NET.

Crie um novo projeto:

  • Abra o VS Code.

  • Vá para a visualização Explorer e selecione o botão Criar Projeto .NET. Como alternativa, você pode abrir a Paleta de Comandos usando Ctrl+Shift+Pe, em seguida, digite ".NET" e localize e selecione o comando .NET: New Project.

  • Selecione o modelo de projeto Blazor na lista.

  • Na caixa de diálogo Local do Projeto, crie ou selecione uma pasta para o projeto.

  • Na Paleta de Comandos, forneça um nome para o projeto ou aceite o nome padrão.

  • Selecione Criar projeto para criar o projeto ou ajuste as opções do projeto selecionando Mostrar todas as opções de modelo. Para obter mais informações sobre os modelos e opções, consulte a seção Blazor modelos de projeto e opções de modelo.

  • Pressione F5 no teclado para executar o aplicativo com o depurador ou Ctrl+F5 para executar o aplicativo sem o depurador.

    O Command Palette solicita que você selecione um depurador. Selecione C# da lista.

    Em seguida, selecione a configuração de inicialização https.

  • Para parar o aplicativo, pressione Shift+F5 no teclado.

As instruções do Visual Studio Code (VS Code) para o desenvolvimento do ASP.NET Core em algumas partes da documentação do Blazor usam o da CLI do .NET, que faz parte do SDK do .NET. Os comandos da CLI do .NET são emitidos noTerminalintegrado do VS Code, que assume como padrão um shell de comando do PowerShell. O do Terminal é aberto selecionando Novo Terminal no menu Terminal na barra de menus.

Para obter mais informações sobre a configuração e o uso do Visual Studio Code, consulte a documentação do Visual Studio Code.

Lançamento e configuração de tarefas num ambiente de hospedagem Blazor WebAssembly

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

Examine o arquivo de Properties/launchSettings.json e determine a URL do aplicativo a partir da propriedade applicationUrl. Dependendo da versão da estrutura, o protocolo de URL é seguro (HTTPS) https://localhost:{PORT} ou inseguro (HTTP) http://localhost:{PORT}, onde o espaço reservado para {PORT} é uma porta atribuída. Anote 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 Server do projeto.
  • Indique o 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 da aplicação, que é especificada no ficheiro Properties/launchSettings.json da aplicação na propriedade applicationUrl.

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

O seguinte arquivo de exemplo .vscode/launch.json:

  • Define o diretório de trabalho atual para 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 ficheiro completo .vscode/launch.json:

{
  "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 especifique 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 da aplicação, geralmente baseado no nome da solução seguido por .Server numa aplicação gerada a partir do modelo de projeto Blazor WebAssembly.

Um exemplo .vscode/tasks.json arquivo 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"
    }
  ]
}

Observação

Apenas a depuração do navegador é suportada no momento.

Não é possível reconstruir automaticamente a aplicação backend Server de uma solução hospedada Blazor WebAssembly durante a depuração, por exemplo, ao executar a aplicação com o dotnet watch run.

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

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

Na configuração anterior para o diretório de trabalho atual (cwd), o marcador de posição {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 que utiliza o Microsoft Edge como o navegador durante as execuções de depuração, em vez do navegador padrão, o Google Chrome.

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

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

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

No argumento anterior:

  • O marcador de posição {SERVER APP FOLDER} corresponde à pasta do projeto Server, normalmente "Server".
  • O marcador de posição {PROJECT NAME} é o nome da aplicação, normalmente baseado no nome da solução seguido por ".Server" numa aplicação gerada a partir do modelo de projeto Blazor.

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

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

O SDK do .NET é um conjunto de bibliotecas e ferramentas que os desenvolvedores usam para criar aplicativos e bibliotecas .NET.

Instale o SDK do .NET. Os comandos são emitidos em um shell de comando usando o .NET CLI.

Se você instalou anteriormente um ou mais SDKs do .NET e deseja ver sua versão ativa, execute o seguinte comando em um shell de comando:

dotnet --version

Se você é novo no SDK do .NET, consulte O que é o SDK do .NET? e os artigos associados na documentação do SDK do .NET.

Crie um novo projeto:

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

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

    dotnet new blazor -o BlazorApp

  • Para uma experiência de Blazor WebAssembly autónoma, execute o seguinte comando numa linha de comandos que use o modelo blazorwasm:

    dotnet new blazorwasm -o BlazorApp

Crie um novo projeto:

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

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

    dotnet new blazorserver -o BlazorApp

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

    dotnet new blazorwasm -o BlazorApp

  • Para uma experiência de Blazor WebAssembly hospedada com código de demonstração e Bootstrap, adicione a opção de hospedagem (-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 uma aplicação de Blazor WebAssembly hospedada utilizando 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:

  • Mude para o diretório usando o comando cd para onde 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 de 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 uma aplicação de Blazor WebAssembly hospedada usando um SDK do .NET 8.0 ou superior, passe a opção -f|--framework com o identificador 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

Para obter mais informações sobre os modelos e opções, consulte a seção Blazor modelos de projeto e opções de modelo.

Executar o aplicativo

Importante

Ao executar um Blazor Web App, execute o aplicativo a partir do projeto de servidor da solução, que é o projeto com um nome que não termina em .Client.

Importante

Ao executar um aplicativo de Blazor WebAssembly hospedado, execute o aplicativo a partir do projeto Server da solução.

Pressione Ctrl+F5 no teclado para executar o aplicativo sem o depurador.

O Visual Studio exibe a seguinte caixa de diálogo quando um projeto não está configurado para usar SSL:

diálogo de confiança no certificado autoassinado

Selecione Sim se confiar no certificado SSL ASP.NET Core.

A seguinte caixa de diálogo é exibida:

Caixa de diálogo de aviso de segurança

Selecione Sim para reconhecer o risco e instalar o certificado.

Visual Studio:

  • Compila e executa o aplicativo.
  • Inicia o navegador padrão no https://localhost:{PORT}, que exibe a interface do usuário do aplicativo. O marcador {PORT} é a porta aleatória atribuída na criação da aplicação. Se você precisar alterar a porta devido a um conflito de porta local, altere a porta no arquivo Properties/launchSettings.json do projeto.

No VS Code, pressione Ctrl+F5 para executar o aplicativo sem depuração.

No prompt do depurador Select na Command Palette na parte superior da interface do usuário do VS Code, selecione C#. No prompt seguinte, selecione o perfil HTTPS ([https]).

O navegador padrão é iniciado em https://localhost:{PORT}, que exibe a interface do usuário do aplicativo. O marcador de posição {PORT} é a porta aleatória atribuída à criação da aplicação. Se você precisar alterar a porta devido a um conflito de porta local, altere a porta no arquivo Properties/launchSettings.json do projeto.

Em um shell de comando aberto na pasta raiz do projeto, execute o comando dotnet watch para compilar e iniciar o aplicativo:

dotnet watch

O navegador padrão é iniciado em https://localhost:{PORT}, que exibe a interface de utilizador do aplicativo. O *placeholder* {PORT} é a porta aleatória atribuída na criação da aplicação. Se você precisar alterar a porta devido a um conflito de porta local, altere a porta no arquivo Properties/launchSettings.json do projeto.

Quando um aplicativo criado a partir do modelo de projeto Blazor Web App é executado com a CLI do .NET, o aplicativo é executado em um ponto de extremidade HTTP (inseguro) porque o primeiro perfil encontrado no arquivo de configurações de inicialização do aplicativo (Properties/launchSettings.json) é o perfil HTTP (inseguro), chamado http. O perfil HTTP foi colocado na primeira posição para facilitar a transição da adoção de segurança SSL/HTTPS para usuários não-Windows.

Uma abordagem para executar o aplicativo com SSL/HTTPS é passar a opção -lp|--launch-profile com o nome do perfil https para o comando dotnet watch:

dotnet watch -lp https

Uma abordagem alternativa é mover o perfil https acima do perfil http no arquivo Properties/launchSettings.json e salvar a alteração. Depois de alterar a ordem do perfil no arquivo, o comando dotnet watch sempre usa o perfil https por padrão.

Parar a aplicação

Pare o aplicativo usando uma das seguintes abordagens:

  • Feche a janela do navegador.
  • No Visual Studio, pode escolher uma das seguintes opções:

    • Use o botão Parar na barra de menus do Visual Studio:

      botão Parar na barra de menus do Visual Studio

    • Pressione Shift+F5 no teclado.

Pare o aplicativo usando a seguinte abordagem:

  1. Feche a janela do navegador.
  2. No VS Code, escolha uma destas opções:
    • No menu Executar, selecione Parar Depuração.
    • Pressione Shift+F5 no teclado.

Pare o aplicativo usando a seguinte abordagem:

  1. Feche a janela do navegador.
  2. No shell de comando, pressione a tecla Ctrl+C.

Arquivo de solução do Visual Studio (.sln)

Uma solução é um contêiner para organizar um ou mais projetos de código relacionados. Os arquivos de solução usam um formato exclusivo e não se destinam a ser editados diretamente.

Visual Studio e Visual Studio Code (VS Code) usam um ficheiro de solução (.sln) para armazenar configurações para uma solução. O da CLI do .NET não organiza projetos usando um arquivo de solução, mas pode criar arquivos de solução e listar/modificar os projetos em arquivos de solução por meio do comando dotnet sln. Outros comandos da CLI do .NET usam o caminho do arquivo de solução para vários comandos de publicação, teste e empacotamento.

Ao longo da documentação do Blazor, a solução é usada para descrever aplicativos criados a partir do modelo de projeto Blazor WebAssembly com a opção ASP.NET Core Hosted habilitada ou de um modelo de projeto Blazor Hybrid. Os aplicativos produzidos a partir desses modelos de projeto incluem um arquivo de solução (.sln). Para aplicativos de Blazor WebAssembly hospedados em que o desenvolvedor não está usando o Visual Studio, o arquivo de solução pode ser ignorado ou excluído se não for usado com comandos da CLI do .NET.

Para obter mais informações, consulte os seguintes recursos:

Blazor modelos de projeto e opções de modelo

A estrutura Blazor fornece modelos de projeto para a criação de novos aplicativos. Os modelos são usados para criar novos projetos e soluções de Blazor, independentemente da ferramenta que escolher para o desenvolvimento de Blazor (Visual Studio, Visual Studio Code ou a CLI do .NET ):

  • Blazor Web App modelo de projeto: blazor
  • Modelo de projeto de aplicativo Blazor WebAssembly autônomo: blazorwasm
  • Blazor Server modelos de projeto: blazorserver, blazorserver-empty
  • Blazor WebAssembly modelos de projeto: blazorwasm, blazorwasm-empty
  • Blazor Server modelo de projeto: blazorserver
  • Blazor WebAssembly modelo de projeto: blazorwasm

Para mais informações sobre os modelos de projeto Blazor, consulte a estrutura do projeto ASP.NET Core Blazor.

Os termos e conceitos de renderização usados nas subseções a seguir são introduzidos nas seguintes seções do artigo de visão geral dos Fundamentos de .

Orientações detalhadas sobre modos de renderização são fornecidas pelo ASP.NET Core Blazor modos de renderização artigo.

Modo de renderização interativo

  • A renderização interativa do lado do servidor (SSR interativo) é ativada com a opção Server.
  • Para habilitar a interatividade apenas com a renderização do lado do cliente (CSR), use a opção WebAssembly.
  • Para habilitar os modos de renderização interativos e a capacidade de alternar automaticamente entre eles em tempo de execução, use a opção modo de renderização Auto (Server e WebAssembly) (automático).
  • Se a interatividade estiver definida como None, o aplicativo gerado não terá interatividade. O aplicativo só é configurado para renderização estática do lado do servidor.

O modo de renderização automática interativa inicialmente utiliza SSR interativo enquanto o pacote de aplicações .NET e o runtime são descarregados para o navegador. Depois de o runtime do .NET WebAssembly ser ativado, o modo de renderização alterna para a renderização interativa de WebAssembly.

O modelo Blazor Web App permite SSR estático e interativo usando um único projeto. Se você também habilitar o CSR, o projeto incluirá um projeto cliente adicional (.Client) para seus componentes baseados em WebAssembly. A saída construída do projeto cliente é baixada para o navegador e executada no cliente. Todos os componentes que usam o WebAssembly ou modos de renderização automática devem ser criados a partir do projeto cliente.

Importante

Ao usar um Blazor Web App, a maioria dos componentes de exemplo da documentação Blazorexige interatividade para funcionar e demonstrar os conceitos cobertos pelos artigos. Ao testar um componente de exemplo fornecido por um artigo, verifique se o aplicativo adota interatividade global ou se o componente adota um modo de renderização interativo.

Local de interatividade

Opções de local de interatividade:

  • Por página/componente: O padrão configura a interatividade por página ou por componente.
  • Global: Usar essa opção configura a interatividade globalmente para todo o aplicativo.

O local de interatividade só pode ser definido se modo de renderização interativo não estiver None e a autenticação não estiver habilitada.

Páginas de exemplo

Para incluir páginas de exemplo e um layout baseado no estilo do Bootstrap, use a opção Incluir páginas de exemplo. Desative esta opção para o projeto sem páginas de exemplo e estilo Bootstrap.

Orientações adicionais sobre opções de modelo

Para obter mais informações sobre opções de modelo, consulte os seguintes recursos:

  • O modelos padrão do .NET para dotnet new artigo na documentação do .NET Core:
  • Para passar a opção de ajuda (-h ou --help) ao comando CLI dotnet new em um ambiente de linha de comando:
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h

Para obter mais informações sobre opções de modelo, consulte os seguintes recursos:

  • Os modelos padrão do .NET para o artigo dotnet new na documentação do .NET Core:
  • Passando a opção de ajuda (-h ou --help) para o comando de linha de comandos dotnet new num shell de comandos:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Recursos adicionais