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.

Clonación y apertura del repositorio en VS Code

En primer lugar, realiza una copia del repositorio en el equipo mediante la clonación.

Empieza por clonar el repositorio new2code/client-side-web-application. Este vínculo abre un cuadro de diálogo en VS Code para clonar el repositorio.
Elige una ubicación para guardar el repositorio en el equipo y, a continuación, haz clic en Seleccionar como destino del repositorio.
Cuando se te solicite, abre el repositorio.

Instalación de los requisitos de proyecto

Abre Copilot Chat y después pídele que identifique lo que necesitas instalar con la siguiente indicación.
Text
```
What do I need to install to develop this project locally? 
```
```
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.
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.

Comprueba 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.

Abre la paleta de comandos presionando Ctrl+Mayús+P (Windows/Linux) o Cmd+Mayús+P (Mac).
Escriba Terminal: Create New Terminal y presione Entrar.
En la pestaña del terminal, pega el siguiente comando.
Bash
```
npm install
```
```
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 pueden usar pip install -r requirements.txt y los proyectos de Ruby pueden usar bundle install.

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

Busca archivos de configuración: los distintos proyectos usan archivos diferentes para enumerar sus dependencias; por ejemplo, los proyectos de Node.js usan package.json, los 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.

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
```
```
npm start
```
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.
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.
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 de los comandos disponibles. También puedes preguntar a Copilot Chat con la siguiente indicación.

Text

How do I start this project locally?

How do I start this project locally?

A continuación

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, la aplicación web @new2codede Python usa Python y Flask en lugar de Node.js.

En este tutorial aprendiste a:

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.

En este artículo