Tutorial: Criar um aplicativo Node.js e Express no Visual Studio

2025-06-12

Este artigo demonstra como usar o Visual Studio para criar um aplicativo Web Node.js básico que usa a estrutura express.

Node.js é um ambiente de runtime javaScript do lado do servidor que executa código JavaScript. Por padrão, Node.js usa o gerenciador de pacotes npm para facilitar o uso e o compartilhamento de bibliotecas de código-fonte Node.js. O gerenciador de pacotes npm simplifica a instalação, atualização e desinstalação de bibliotecas.

O Express é uma estrutura de aplicativo Web do servidor que Node.js usa para criar aplicativos Web. Com o Express, há muitas maneiras diferentes de criar uma interface do usuário. A implementação fornecida neste tutorial usa o mecanismo de modelo padrão do gerador de aplicativos Express, chamado Pug, para renderizar o front-end.

Neste tutorial, você:

Criar um aplicativo Node.js usando um modelo JavaScript
Criar o aplicativo e examinar o processo em execução
Depurar o aplicativo no depurador do Visual Studio

Pré-requisitos

Visual Studio 2022 versão 17.12 ou posterior com a carga de trabalho ASP.NET e desenvolvimento para a Web instalada.
- Para instalar o Visual Studio gratuitamente, acesse a página de downloads do Visual Studio.
- Se você já tiver o Visual Studio, poderá instalar a carga de trabalho de dentro do IDE (Ambiente de Desenvolvimento Interativo):
  1. Selecione Ferramentas>Obter Ferramentas e Recursos.
  2. No Instalador do Visual Studio, selecione a guia Cargas de Trabalho.
  3. Selecione a carga de trabalho ASP.NET e desenvolvimento para a Web e, em seguida, selecione Modificar.
  4. Siga os prompts e conclua a instalação.
Node.js com o gerenciador de pacotes npm e o pacote npx.

Você pode verificar a instalação do Node.js com o comando node -v. A saída do comando deve mostrar a versão instalada do Node.js, como v23.4.0. Para obter mais informações, confira Baixar e instalar Node.js e npm.
- O gerenciador de pacotes npm está incluído na instalação Node.js. Verifique a instalação com o comando npm -v. A saída do comando deve mostrar a versão instalada do gerenciador de pacotes, como 10.9.2.
- O pacote npx faz parte da CLI do npm. Confirme a instalação do pacote com o comando npx -v. A saída do comando deve mostrar a versão do pacote instalado, como 10.9.2.

Criar seu aplicativo

Siga estas etapas para criar um novo aplicativo Node.js no Visual Studio:

Na janela Iniciar do Visual Studio (Arquivo>Janela Iniciar), selecione Criar um projeto:
Na caixa Pesquisa, insira Express e selecione o modelo de Aplicativo JavaScript Express na lista de resultados:
Selecione Próximo para continuar na página de configuração.
Insira um Nome de projeto e o Nome da solução do novo aplicativo. Escolha o Local padrão ou navegue até um caminho diferente em seu ambiente.
Selecione Criar para criar o novo projeto de Node.js.

O Visual Studio cria seu novo projeto e abre sua hierarquia de projetos no do Gerenciador de Soluções.

Exibir as propriedades do projeto

As configurações padrão do projeto permitem compilar e depurar o projeto. Você pode alterar as configurações conforme necessário.

No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Propriedades. Você também pode acessar essas propriedades selecionando Project>Propriedades do ExpressProject.
No painel Propriedades do Projeto, vá para a seção Criar e configure as propriedades conforme desejado.
Para definir as configurações de depuração, selecione Depurar>Propriedades de Depuração do ExpressProject.

Nota

O arquivo launch.json armazena as configurações de inicialização associadas à ação Iniciar na barra de ferramentas de depuração. Atualmente, o launch.json deve estar localizado na pasta .vscode.

Criar seu projeto

Crie o projeto selecionando Build>Solução de Build.

Iniciar seu aplicativo

Inicie o novo aplicativo selecionando Ctrl + F5 ou Iniciar sem depuração (ícone de estrutura de tópicos de seta verde) na barra de ferramentas.

Um terminal é aberto e mostra o comando em execução:

> expressproject@0.0.0 start
> node ./bin/www

GET / 200 29342.066 ms - 170
GET /stylesheets/style.css 200 18.967 ms - 111

Nota

Verifique a saída do terminal para ver mensagens. Verifique também o painel Saída no Visual Studio. Observe as instruções para atualizar sua versão do Node.js.

Quando o aplicativo é iniciado com êxito, uma janela do navegador é aberta mostrando o aplicativo Express:

Captura de tela que mostra o aplicativo Express em execução no navegador.

Depurar seu aplicativo

Agora você está preparado para explorar as maneiras de depurar o aplicativo.

Se o aplicativo ainda estiver em execução, selecione Shift + F5 para encerrar a sessão atual ou Parar (ícone quadrado vermelho) na barra de ferramentas de depuração. Você pode notar que o término da sessão fecha o navegador que mostra seu aplicativo, mas a janela do terminal que executa o processo do Node permanece aberta. Por enquanto, feche as janelas remanescentes. Posteriormente neste artigo, você analisará cenários de quando quiser deixar o processo do Node em execução.

Depurar o processo Node

A lista suspensa à esquerda da ação Iniciar mostra as opções de início disponíveis para o aplicativo:

localhost (Edge)
localhost (Chrome)
Iniciar o ExpressProject
Iniciar o Node e o Navegador

Siga estas etapas para depurar o processo de Node.js do aplicativo:

Na lista suspensa Iniciar, selecione Executar o Node e o Navegador.
No Gerenciador de Soluções, expanda a pasta rotas e abra o arquivo index.js.
No editor de código, defina um ponto de interrupção no arquivo index.js:
1. Localize a instrução de código res.render('index', { title: 'Express' });.
2. Selecione na margem esquerda na linha da declaração. O Visual Studio adiciona um círculo vermelho na borda para indicar o ponto de parada definido.
Dica

Você também pode colocar o cursor em uma linha de código e selecionar F9 para alternar o ponto de interrupção dessa linha.
Inicie seu aplicativo no depurador selecionando F5 ou Iniciar Depuração (ícone de seta verde) na barra de ferramentas de depuração.

O Visual Studio inicia a execução do aplicativo. Quando o depurador atinge o ponto de interrupção definido, o processo de depuração é pausado.
Enquanto a execução é pausada, você pode inspecionar o estado do aplicativo. Passe o mouse sobre variáveis e examine suas propriedades.
Quando estiver pronto para continuar, selecione F5. O processamento continua e seu aplicativo é aberto no navegador.

Desta vez, se você selecionar Parar, observe que as janelas do navegador e do terminal são fechadas. Para entender por que o comportamento é diferente, dê uma olhada mais de perto no arquivo launch.json.

Examinar o arquivo launch.json

Siga estas etapas para examinar o arquivo de launch.json do projeto:

Em Gerenciador de Soluções, expanda a pasta .vscode e abra o arquivo launch.json.

Dica

Se você não vir a pasta .vscode no Gerenciador de Soluções, selecione a ação Mostrar Todos os Arquivos na barra de ferramentas do Gerenciador de Soluções.
Dê uma olhada no arquivo no editor de código. Se você tiver experiência com o Visual Studio Code, o arquivo launch.json provavelmente parecerá familiar. O arquivo launch.json neste projeto corresponde ao arquivo usado pelo Visual Studio Code para denotar as configurações de inicialização usadas para depuração. Cada entrada especifica um ou mais destinos a serem depurados.
Examine as duas primeiras entradas no arquivo. Essas entradas definem o comportamento para diferentes navegadores da Internet:
```
    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }
```
Os navegadores com suporte são indicados com a propriedade type. Se você iniciar o aplicativo com apenas um tipo de navegador como o único destino de depuração, o Visual Studio depura apenas o processo do navegador front-end. O processo Node é iniciado sem um depurador anexado. O Visual Studio não associa os pontos de interrupção definidos no processo do Node.js.

Nota

Atualmente, edge e chrome são os únicos tipos de navegador com suporte para depuração.

Quando você encerra a sessão, o processo do Node continua a ser executado intencionalmente. O processo é mantido em execução intencionalmente quando um navegador é o destino de depuração. Se o trabalho estiver sendo feito apenas no front-end, fazer com que o processo de back-end seja executado continuamente facilita o fluxo de trabalho de desenvolvimento.

No início desta seção, você fechou a janela do terminal remanescente para definir os pontos de interrupção no processo do Node. Para permitir que o Visual Studio depure o processo do Node.js, o processo deve ser reiniciado com o depurador vinculado. Se um processo não depurável do Node for deixado em execução, a tentativa de iniciar o processo do Node no modo de depuração (sem reconfigurar a porta) falhará.

Examine a terceira entrada no arquivo launch.json. Essa entrada especifica node como o tipo de depuração:

    {
      "name": "Launch ExpressProject",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

A terceira entrada inicia apenas o processo Node no modo debug. O Visual Studio não inicia o navegador.

Examine a quarta entrada no arquivo launch.json, que define uma configuração de inicialização composta:
```
    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Launch ExpressProject",                   
        "localhost (Edge)"
      ]
    }
```
Essa configuração composta é igual a uma configuração de inicialização composta do Visual Studio Code. Ao selecionar essa configuração, você pode depurar o front-end e o back-end. Observe que a definição simplesmente faz referência às configurações de inicialização individuais para os processos de Node e navegador.

Há muitos outros atributos que você pode usar em uma configuração de inicialização. Por exemplo, você pode ocultar uma configuração para removê-la da lista suspensa Iniciar, mas permitir referências à configuração definindo o atributo hidden no objeto presentation como true:
```
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }
```
Configure opções usando atributos com suporte para aprimorar sua experiência de depuração. Atualmente, apenas as configurações de lançamento são suportadas. Qualquer tentativa de usar uma configuração de anexar resulta em uma falha de implantação. Para obter mais informações, confira Opções.

Compartilhar via