DWEC

Appearance

Entorno de desarrollo ​

Objetivo ​

Configurar y utilizar un entorno de desarrollo para aplicaciones web cliente con Node.js, npm, Vite, Visual Studio Code y las DevTools del navegador.

1. Node.js y npm ​

Abre un terminal y comprueba las versiones instaladas:

bash
node --version
npm --version

Anota las versiones obtenidas.

Comprueba también si tienes disponible nvm:

bash
nvm --version

Si utilizas nvm, consulta las versiones de Node.js instaladas:

bash
nvm list

Identifica cuál está activa actualmente.

2. Creación del proyecto ​

Crea un nuevo proyecto con Vite:

bash
npm create vite@latest

Utiliza la siguiente configuración:

  • Nombre del proyecto: dwec-vite.
  • Framework: Vanilla.
  • Variante: JavaScript.

Accede al directorio creado:

bash
cd dwec-vite

Instala las dependencias:

bash
npm install

Abre el proyecto con Visual Studio Code:

bash
code .

3. Estructura del proyecto ​

Explora los archivos y directorios generados por Vite.

Localiza:

  • index.html.
  • package.json.
  • src/.
  • public/.
  • node_modules/.

Indica brevemente la función de cada uno.

Abre package.json e identifica:

  • Los scripts disponibles.
  • Las dependencias del proyecto.
  • La versión de Vite instalada.

4. Servidor de desarrollo ​

Inicia el servidor de desarrollo:

bash
npm run dev

Abre en el navegador la dirección indicada por Vite.

Identifica:

  • La dirección utilizada.
  • El puerto.
  • El protocolo utilizado.

Modifica algún texto de la aplicación desde Visual Studio Code y guarda el archivo.

Comprueba qué ocurre en el navegador.

Explica brevemente qué función está realizando Vite durante este proceso.

5. Modificación de la aplicación ​

Elimina el contenido de ejemplo generado por Vite y crea una aplicación sencilla que contenga:

  • Un encabezado con el texto DWEC.
  • Un párrafo con el texto Client-side web development.
  • Un botón con el texto Click me.

Añade desde JavaScript el comportamiento necesario para que, al pulsar el botón, aparezca en la consola:

text
Button clicked

Mantén separados el contenido HTML, la presentación CSS y el comportamiento JavaScript.

6. DevTools ​

Con la aplicación ejecutándose, abre las DevTools.

Realiza las siguientes comprobaciones:

  • Utiliza Elements para localizar el botón.
  • Utiliza Console para comprobar el mensaje generado al pulsarlo.
  • Utiliza Sources para localizar el archivo JavaScript.
  • Utiliza Network para localizar index.html y los recursos JavaScript y CSS.
  • Recarga la página con Network abierta y observa las peticiones realizadas.

Selecciona la petición correspondiente a index.html e identifica:

  • El método HTTP utilizado.
  • El código de estado recibido.
  • El tipo de recurso.
  • El servidor o dirección desde la que se ha obtenido.

7. Construcción para producción ​

Detén el servidor de desarrollo y ejecuta:

bash
npm run build

Comprueba que se ha generado el directorio:

text
dist/

Explora su contenido y compáralo con los archivos utilizados durante el desarrollo.

Responde:

  1. ¿Qué diferencia existe entre npm run dev y npm run build?
  2. ¿Qué finalidad tiene el directorio dist/?
  3. ¿Qué herramienta ejecuta estos procesos?
  4. ¿Se necesita que Node.js ejecute la aplicación una vez que los archivos generados se sirven al navegador?

8. Herramientas utilizadas ​

Completa la siguiente tabla:

HerramientaFunción en el proyecto
Visual Studio Code.
DevTools.
Node.js.
nvm.
npm.
Vite.

Indica finalmente qué herramientas intervienen principalmente durante el desarrollo y cuál es el entorno en el que se ejecuta finalmente el código de la aplicación cliente.