Inicio rápido: usar Visual Studio para crear su primera aplicación de Node.jsQuickstart: Use Visual Studio to create your first Node.js app

En esta introducción al entorno de desarrollo integrado (IDE) de Visual Studio, con una duración de entre 5 y 10 minutos, creará una sencilla aplicación web de Node.js.In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create a simple Node.js web application. Si todavía no ha instalado Visual Studio 2017, vaya a la página Descargas de Visual Studio para instalarlo de forma gratuita.If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

Crear un proyectoCreate a project

En primer lugar, creará un proyecto de aplicación web de Node.js.First, you'll create an Node.js web application project.

  1. Si todavía no tiene instalado el entorno de ejecución de Node.js, instale la versión LTS desde el sitio web de Node.js.If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.

    En general, Visual Studio detecta automáticamente el entorno de ejecución de Node.js instalado.In general, Visual Studio automatically detects the installed Node.js runtime. Si no detecta un runtime instalado, puede configurar el proyecto para que haga referencia al runtime instalado en la página de propiedades (después de crear un proyecto, haga clic con el botón derecho en el nodo del proyecto y elija Propiedades).If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node and choose Properties).

  2. Abra Visual Studio 2017.Open Visual Studio 2017.

  3. En la barra de menús superior, seleccione Archivo > Nuevo > Proyecto.From the top menu bar, choose File > New > Project.

  4. En el panel de la izquierda del cuadro de diálogo Nuevo proyecto, expanda JavaScript y después seleccione Node.js.In the New Project dialog box, in the left pane, expand JavaScript, then choose Node.js. En el panel central, elija Aplicación web en blanco de Node.js y después haga clic en Aceptar.In the middle pane, choose Blank Node.js Web application, then choose OK.

    Si no ve la plantilla de proyecto Aplicación web en blanco de Node.js, haga clic en el vínculo Abrir el instalador de Visual Studio en el panel izquierdo del cuadro de diálogo Nuevo proyecto.If you don't see the Blank Node.js Web application project template, click the Open Visual Studio Installer link in the left pane of the New Project dialog box. Se iniciará el Instalador de Visual Studio.The Visual Studio Installer launches. Elija la carga de trabajo Desarrollo de Node.js y, después, haga clic en Modificar.Choose the Node.js development workload, then choose Modify.

    Carga de trabajo Node.js en el instalador de Visual Studio

    Después de elegir la plantilla aplicación web de Node.js en blanco y de hacer clic en Aceptar, Visual Studio crea la solución y abre el proyecto.After you choose the Blank Node.js Web Application template and click OK, Visual Studio creates and the new solution and opens the project. server.js se abre en el editor en el panel izquierdo.server.js opens in the editor in the left pane.

Explorar el IDEExplore the IDE

  1. Eche un vistazo al panel de la derecha del Explorador de soluciones.Take a look at Solution Explorer in the right pane.

    Explorador de soluciones

    • El proyecto está resaltado en negrita. Tiene el nombre que le asignó en el cuadro de diálogo Nuevo proyecto.Highlighted in bold is your project, using the name you gave in the New Project dialog box. En el disco, este proyecto se representa mediante un archivo .njsproj en la carpeta del proyecto.On disk, this project is represented by a .njsproj file in your project folder.

    • En el nivel superior se encuentra una solución, que de forma predeterminada tiene el mismo nombre que el proyecto.At the top level is a solution, which by default has the same name as your project. Una solución, representada por un archivo .sln en el disco, es un contenedor para uno o más proyectos relacionados.A solution, represented by a .sln file on disk, is a container for one or more related projects.

    • En el nodo npm se muestran todos los paquetes npm instalados.The npm node shows any installed npm packages. Puede hacer clic con el botón derecho en el nodo npm para buscar e instalar paquetes npm mediante un cuadro de diálogo.You can right-click the npm node to search for and install npm packages using a dialog box.

  2. Si quiere instalar paquetes npm o comandos de Node.js desde un símbolo del sistema, haga clic con el botón derecho en el nodo del proyecto y seleccione Abrir símbolo del sistema aquí.If you want to install npm packages or Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

    Símbolo del sistema de Node.js

  3. En el archivo server.js en el editor (panel de la izquierda), elija http.createServer y, después, presione F12 o seleccione Ir a definición en el menú contextual (clic con el botón derecho).In the server.js file in the editor (left pane), choose http.createServer and then press F12 or choose Go To Definition from the context (right-click) menu. Este comando le lleva a la definición de la función createServer en index.d.ts.This command takes you to the definition of the createServer function in index.d.ts.

    Menú contextual Ir a definición

  4. Vuelva a server.js. Después, coloque el cursor al final de la cadena en esta línea de código, res.end('Hello World\n');, y modifíquela para que tenga el aspecto siguiente:Got back to server.js, then put your cursor at the end of the string in this line of code, res.end('Hello World\n');, and modify it so that it looks like this:

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

    Donde escribe connection., IntelliSense proporciona opciones para autocompletar la entrada de código.Where you type connection., IntelliSense provides options to auto-complete the code entry.

    Autocompletar de IntelliSense

  5. Seleccione localPort y, después, escriba ); para completar la instrucción para que tenga el aspecto siguiente:Choose localPort, and then type ); to complete the statement so that it looks like this:

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

Ejecutar la aplicaciónRun the application

  1. Presione Ctrl+F5 (o seleccione Depurar > Iniciar sin depurar) para ejecutar la aplicación.Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. La aplicación se abre en un explorador.The app opens in a browser.

  2. En la ventana del explorador, verá "Hello World" más el número de puerto local.In the browser window, you will see "Hello World" plus the local port number.

  3. Cierre el explorador web.Close the web browser.

Enhorabuena, ha completado este Inicio rápido en el que ha empezado a usar el IDE de Visual Studio y Node.js.Congratulations on completing this Quickstart in which you got started with the Visual Studio IDE and Node.js. Si quiere profundizar más en sus funcionalidades, continúe con el tutorial que encontrará en la sección Tutoriales de la tabla de contenido.If you'd like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

Pasos siguientesNext steps

Deploy the app to Linux App Service (Implementar la aplicación en App Service de Linux)Deploy the app to Linux App Service