Início Rápido: Criar seu primeiro aplicativo Node.js com Visual Studio

Nesta introdução de 5 a 10 minutos ao Visual Studio IDE (ambiente de desenvolvimento integrado), você cria um aplicativo Web Node.js simples.

Pré-requisitos

Antes de começar, instale o Visual Studio e configurar seu Node.js ambiente.

Instalar Visual Studio e a carga de trabalho Node.js aplicativo

Se você ainda não instalou o Visual Studio:

  1. Acesse a página Visual Studio downloads para instalar o Visual Studio 2022 gratuitamente.

  2. No Instalador do Visual Studio, selecione a carga de trabalhoNode.js desenvolvimento e selecione Instalar.

    Captura de tela mostrando a carga de trabalho do Node j s selecionada no Instalador do Visual Studio.

Se você já Visual Studio instalado.

  1. No Visual Studio, acesse Ferramentas Obter Ferramentas e > Recursos.

  2. No Instalador do Visual Studio, escolha a carga de trabalhoNode.js desenvolvimento e selecione Modificar para baixar e instalar a carga de trabalho.

Configurar seu ambiente Node.js ambiente

Instale a versão LTS do runtime Node.js. A versão ltS tem a melhor compatibilidade com outras estruturas e bibliotecas.

Embora Node.js seja criado para arquiteturas de 32 bits e 64 bits, o Node.js instalador dá suporte apenas a uma versão por vez.

Visual Studio geralmente detecta o runtime instalado, mas caso não seja, você pode configurar seu projeto para fazer referência ao runtime instalado:

  1. Depois de criar seu projeto,clique com o botão direito do mouse no nó do projeto.

  2. Selecione Propriedades e de definido o Node.exe caminho. Você pode usar uma instalação de Node.js global ou especificar o caminho para um interpretador local para qualquer Node.js projeto.

Instalar o Visual Studio

Se você ainda não instalou o Visual Studio 2019, acesse a página Visual Studio downloads para instalá-lo gratuitamente.

Instalar o Visual Studio

Se você ainda não tiver instalado o Visual Studio 2017, acesse a página Downloads do Visual Studio para instalá-lo gratuitamente.

Configurar seu ambiente Node.js ambiente

Visual Studio pode ajudar a configurar seu ambiente, incluindo a instalação de ferramentas comuns com Node.js desenvolvimento.

  1. No Visual Studio, acesse Ferramentas Obter Ferramentas e > Recursos.

  2. Na Instalador do Visual Studio, escolha a carga de trabalhoNode.js desenvolvimento e selecione Modificar para baixar e instalar a carga de trabalho.

    Captura de tela mostrando a carga de trabalho do Node J S selecionada na Instalador do Visual Studio.

  3. Instale a versão LTS do runtimeNode.js. Recomendamos a versão ltS para melhor compatibilidade com estruturas e bibliotecas externas.

    Embora Node.js seja criado para arquiteturas de 32 bits e 64 bits, o Node.js instalador dá suporte apenas a uma versão instalada por vez.

  4. Se Visual Studio não detectar o runtime instalado (geralmente, sim), configure seu projeto para fazer referência ao runtime instalado:

    1. Depois de criar seu projeto,clique com o botão direito do mouse no nó do projeto.

    2. Selecione Propriedades e de definido o Node.exe caminho. Você pode usar uma instalação global do Node.js ou especificar o caminho para um interpretador local em cada um dos seus Node.js projetos.

Criar seu projeto de aplicativo

No Visual Studio, crie um novo Node.js projeto.

  1. Inicie Visual Studio e pressione Esc para fechar a janela inicial.

  2. Pressione Ctrl + Q e digite node.js na caixa de pesquisa.

  3. Selecione Aplicativo Web Node.js em branco.

  4. Na caixa de diálogo, selecione Criar.

  1. Pressione Esc para fechar a janela de início.

  2. Pressione Ctrl + Q para abrir a caixa de pesquisa e digite Node.js.

  3. Escolha Em branco Node.js Aplicativo Web (JavaScript). Na caixa de diálogo, selecione Criar.

  1. Na barra de menus superior, escolha Arquivo > > Novo Project.

  2. No painel esquerdo da caixa de diálogo Novo Project, expanda JavaScript e escolha Node.js.

  3. No painel central, escolha Aplicativo Web Node.js em branco e selecione OK.

Visual Studio cria e abre o projeto. O arquivo server.js do projeto é aberto no editor.

Se você não vir o modelo de projeto aplicativo Web Node.js em branco, será necessário adicionar a carga de trabalho de Node.js desenvolvimento. Para obter instruções, consulte Pré-requisitos.

Explorar o IDE

Visual Studio pode ajudar a configurar seu ambiente, incluindo a instalação de ferramentas comuns com Node.js desenvolvimento.

  1. No painel direito, veja o Gerenciador de Soluções.

    • No nível superior, há uma solução, que, por padrão, tem o mesmo nome que seu projeto. Uma solução, representada por um arquivo .sln no disco, é um contêiner para um ou mais projetos relacionados.
    • Seu projeto, com o nome usado quando você o configura, é realçado em negrito. No disco, o projeto é representado por um arquivo .njsproj na pasta do projeto.
    • O nó npm mostra pacotes npm instalados. Você pode clicar com o botão direito do mouse no nó npm para pesquisar e instalar pacotes npm usando uma caixa de diálogo.

    Captura de tela mostrando o Gerenciador de Soluções de dados.

  2. Para instalar pacotes npm ou Node.js comandos de um prompt de comando, clique com o botão direito do mouse no nó do projeto e escolha Abrir Prompt de Comando Aqui.

    Captura de tela mostrando Abrir Prompt de Comando Aqui no menu de contexto do projeto.

  3. Para testar a navegação para o código-fonte, no arquivo server.js, selecione e pressione createServer F12 ou clique com o botão direito do mouse e selecione Ir para Definição no createServer menu de contexto. Esse comando leva você para a definição da createServer função em http.d.ts.

    Captura de tela mostrando Ir para Definição no menu de contexto createServer.

  4. De volta server.js, localize esta linha de código: res.end('Hello World\n'); e modifique-a para:

    res.end('Hello World\n' + res.connection.

    Quando você digita connection. , o IntelliSense fornece opções para preenchimento automático da entrada de código.

    Captura de tela mostrando as opções de conclusão automática do IntelliSense.

  5. Escolha localPort e digite para concluir a ); instrução:

    res.end('Hello World\n' + res.connection.localPort);

  1. No painel direito, veja o Gerenciador de Soluções.

    • No nível superior, há uma solução, que, por padrão, tem o mesmo nome que seu projeto. Uma solução, representada por um arquivo .sln no disco, é um contêiner para um ou mais projetos relacionados.
    • Seu projeto, com o nome usado quando você o configura, é realçado em negrito. No disco, o projeto é representado por um arquivo .njsproj na pasta do projeto.
    • O nó npm mostra pacotes npm instalados. Você pode clicar com o botão direito do mouse no nó npm para pesquisar e instalar pacotes npm usando uma caixa de diálogo.

    Captura de tela mostrando o Gerenciador de Soluções de dados.

  2. Para instalar pacotes npm ou Node.js comandos de um prompt de comando, clique com o botão direito do mouse no nó do projeto e escolha Abrir Prompt de Comando Aqui no menu de contexto.

    Captura de tela mostrando Abrir Prompt de Comando Aqui no menu de contexto do projeto.

  3. Para testar a navegação para o código-fonte, no arquivoserver.js, selecione http.createServer e pressione F12 ou escolha Ir para Definição no menu de contexto do clique com o botão direito do mouse. Esse comando leva você para a definição da createServer função em http.d.ts.

    Captura de tela mostrando Ir para Definição no menu de contexto createServer.

  4. De volta server.js, localize esta linha de código: res.end('Hello World\n'); e modifique-a para:

    res.end('Hello World\n' + res.connection.

    Quando você digita a conexão., o IntelliSense fornece opções para preenchimento automático da entrada de código.

    Captura de tela mostrando as opções de conclusão automática do IntelliSense.

  5. Escolha localPort e digite ); para concluir a instrução:

    res.end('Hello World\n' + res.connection.localPort);

Executar o aplicativo

  1. Pressione Ctrl + F5 ou selecione Depurar > Iniciar sem Depuração para executar o aplicativo.

    O aplicativo é aberto em um navegador.

  2. No navegador, verifique se você vê uma mensagem Olá, Mundo e o número da porta local.

Parabéns! Você criou um aplicativo de Node.js simples com Visual Studio. Para se aprofundar, continue na seção Tutoriais do índice.

Próximas etapas