Desarrollo local del proyecto

Información general

El desarrollo local significa configurar y ejecutar el proyecto en tu propio equipo en lugar de en la nube o en un servidor remoto. Al desarrollar localmente, puedes trabajar en el código sin una conexión a Internet y experimentar sin afectar a la aplicación activa.

Los pasos necesarios para configurar un entorno de desarrollo local son diferentes para cada proyecto, en función de sus lenguajes de programación, marcos, herramientas y dependencias. En esta guía, aprenderás las aptitudes básicas necesarias para configurar cualquier proyecto trabajando con una aplicación del lado cliente de ejemplo basada en HTML, CSS y JavaScript. A continuación, puedes aplicar esas mismas aptitudes a otros proyectos en el futuro.

Instalación de herramientas de desarrollo esenciales

Antes de empezar, deberás instalar algunas herramientas esenciales que se usan ampliamente para el desarrollo local.

1.           [Configure VS Code con GitHub Copilot](https://code.visualstudio.com/docs/copilot/setup-simplified).
   

2.        [Instale Git](https://git-scm.com/downloads).
   

Clonación y apertura del repositorio en VS Code

Primero, haz una copia del repositorio en tu equipo mediante la clonación.

1.        [Empieza por clonar el repositorio new2code/client-side-web-application](vscode://vscode.git/clone?url=https://github.com/new2code/client-side-web-application). Este vínculo abre un cuadro de diálogo en VS Code para clonar el repositorio. <!-- markdownlint-disable-line GHD003 -->
   

2. Elige una ubicación para guardar el repositorio en el equipo y, a continuación, haz clic en Seleccionar como destino del repositorio.
3. Cuando se te solicite, abre el repositorio.

Instalación de los requisitos de proyecto

1.        [Abra chat de Copilot](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text), y luego pídale que identifique lo que necesita instalar con la siguiente solicitud. <!-- markdownlint-disable-line GHD003 -->
   

   Text

   What do I need to install to develop this project locally? 
   

   En este ejemplo, Copilot dirá que este proyecto necesita Node.js. Node.js permite ejecutar código JavaScript en el equipo y proporciona herramientas para el desarrollo web.

2. Pregunta a Copilot cómo instalar los requisitos del proyecto y sigue los pasos para instalarlos en el equipo.

   En este ejemplo, podríamos preguntar "¿Cómo puedo instalar Node.js?" Copilot proporcionará instrucciones para visitar https://nodejs.org/ y descargar el instalador.

Instalación de dependencias del proyecto

Ahora que tienes instalado el software necesario, debe comprender cómo usarlo para este proyecto específico.

          **Compruebe primero el archivo LÉAME**. La mayoría de los proyectos incluyen un archivo LÉAME en el directorio raíz que explica cómo configurar y ejecutar el proyecto. Para este proyecto, tanto el archivo LÉAME como preguntar a Copilot te indicarán que el siguiente paso es instalar las dependencias del proyecto mediante npm, el administrador de paquetes de Node.js.

1. Abra la paleta de comandos presionando Ctrl+Shift+P (Windows o Cmd+Shift+P (Mac).

2. Escriba Terminal: Create New Terminal y presione Entrar.

3. En la pestaña del terminal, pega el siguiente comando.

   Bash

   npm install
   

Dado que este proyecto usa Node.js, usamos npm install para leer el archivo package.json y descargar todas las dependencias que el proyecto necesita para funcionar correctamente. Otros tipos de proyectos usarán comandos diferentes. Por ejemplo, los proyectos de Python podrían usar pip install -r requirements.txt y los proyectos de Ruby podrían usar bundle install.

Si el archivo LÉAME no incluye información sobre la instalación de dependencias, puedes hacer lo siguiente:

•         **Buscar archivos de configuración**: proyectos diferentes usan distintos archivos para enumerar sus dependencias; por ejemplo, proyectos de Node.js usan `package.json`, proyectos de Python usan `requirements.txt`, y los proyectos de Ruby usan `Gemfile`.
  

•         **Pregunta a Copilot**: Prueba un mensaje como" "Ahora que tengo Node.js instalado, ¿cuál es el siguiente paso para configurar este proyecto?"
  

Ejecución y desarrollo del proyecto

Ahora que el entorno de desarrollo está configurado, puedes iniciar el servidor de desarrollo y usarlo para obtener una vista previa de los cambios en el código.

1. Obtén información sobre cómo iniciar el proyecto comprobando el archivo LÉAME en la carpeta del proyecto.

   En este ejemplo, la sección "Pasos para ejecutar localmente" del archivo LÉAME explica que puedes iniciar el servidor de desarrollo con el comando npm start. Escribe el siguiente comando en el terminal.

   Bash

   npm start
   

2. Para identificar dónde está disponible el servidor local, revisa la salida del terminal. Verás que el servidor local está disponible en http://localhost:8080. Ve a esa dirección en el explorador.

3. Realiza un pequeño cambio en el código, como editar texto en el archivo HTML o cambiar un color en el archivo CSS. Guarda los cambios.

4. Comprueba la documentación del proyecto o la salida del terminal para comprender cómo ver los cambios. Algunos proyectos se actualizan automáticamente después de guardar los cambios, mientras que otros requieren actualizar la ventana del explorador.

   Para este proyecto, actualiza la ventana del explorador para ver los cambios.

Si el archivo LÉAME no contiene la información que necesitas, comprueba los archivos de configuración para ver los comandos disponibles. También puede preguntar a chat de Copilot con la siguiente solicitud.

How do I start this project locally?

How do I start this project locally?

¿Qué sigue?

Ahora que has configurado correctamente tu primer entorno de desarrollo local, es el momento de aplicar estas aptitudes a diferentes tipos de proyectos.

          **Practica con un proyecto diferente**: intenta configurar otro proyecto con requisitos diferentes. Por ejemplo, [@new2code aplicación web Python](https://github.com/new2code/python-web-application) usa Python y Flask en lugar de Node.js. <!-- markdownlint-disable-line GHD003 -->

Utiliza lo que aprendiste en este tutorial para:

• Clonar el repositorio mediante VS Code
• Preguntar a Copilot qué herramientas y dependencias necesitas instalar
• Leer el archivo LÉAME para comprender cómo ejecutar el proyecto
• Hacer que la aplicación se ejecute en el explorador

Esta práctica te ayudará a reconocer patrones en diferentes tecnologías y a crear confianza en tu capacidad de configurar cualquier proyecto localmente.