Configuración Básica de Express y Webpack para Proyectos Node.js

Clase 3 de 22 • Curso de Webpack con Express.js, React.js y TypeScript

Resumen

¿Cómo configurar un proyecto de Express con Webpack?

Desarrollar un proyecto web moderno requiere herramientas que permitan una configuración efectiva y un flujo de trabajo optimizado. En esta guía, te mostraremos cómo configurar un proyecto de Express con Webpack para desarrollar aplicaciones eficientes y bien organizadas. Aprende a manejar herramientas básicas como npm y Git mientras preparas tus dependencias esenciales para un entorno de trabajo efectivo.

¿Cómo inicializar un proyecto con npm y Git?

Iniciar un proyecto correctamente es crucial para asegurar que todas tus herramientas funcionen de manera óptima. Aquí te mostramos los pasos clave:

Inicializar Git:
- Abre tu terminal e ingresa:
```
git init
```
- Esto creará un repositorio local para gestionar el control de versiones en tu proyecto.
Inicializar npm:
- Para generar un archivo package.json que registre todas las configuraciones y dependencias del proyecto, ejecuta:
```
npm init -y
```
- El flag -y acepta las configuraciones predeterminadas. Estas configuraciones pueden ajustarse posteriormente según las necesidades del proyecto.

¿Qué dependencias instalar para tu proyecto?

Una vez inicializado el proyecto, debemos instalar las dependencias necesarias para desarrollar y ejecutar una aplicación Express con optimización mediante Webpack y Babel.

Instalar Express:
- Express es el marco para aplicaciones web en Node.js que simplifica la creación de servidores.
- Usa el siguiente comando:
```
npm install express --save
```
Instalar recursos para desarrollo:
- Webpack y Babel son herramientas cruciales para optimizar y transpilar tu código.
- Los comandos siguientes instalan Webpack y su CLI como dependencias de desarrollo:
```
npm install webpack webpack-cli --save-dev
```
- Para Babel, utiliza:
```
npm install @babel/core @babel/preset-env babel-loader --save-dev
```

¿Cómo estructurar tu proyecto?

Organizar el código es un estándar profesional que facilita el trabajo en equipos y proyectos individuales. Conoce cómo organizar tu estructura de proyecto:

Crear directorios y archivos principales:
- Dentro de tu proyecto, crea una carpeta llamada src:
```
mkdir src
```
- Dentro de src, genera un archivo principal para tu aplicación, index.js:
```
touch src/index.js
```

¿Cómo configurar y correr un servidor Express?

Configuraremos un servidor básico de Express que pueda recibir solicitudes y devolver respuestas adecuadas.

Configurar Express en index.js:

const express = require('express');
const app = express();

const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});

Este bloque de código realiza varias tareas:

Declara e importa las dependencias necesarias.
Configura una aplicación básica de Express que responde con "Hello World" cuando se accede a la ruta raíz (/).
Especifica un puerto en el que la aplicación escuchará solicitudes (por defecto, utiliza el puerto 3000).

Ejecutar la aplicación:
- Desde tu terminal, asegúrate de estar en el directorio raíz de tu aplicación y ejecuta:
```
node src/index.js
```
- Visita http://localhost:3000 en tu navegador para verificar que la aplicación muestra Hello World.

¿Qué sigue después de configurar Express?

La configuración inicial te proporciona un servidor básico corriendo en tu máquina local. En adelante, aprenderemos a integrar Webpack para optimizar la entrega de recursos y desarrollar características adicionales que mejorarán el rendimiento y la modularidad de tu aplicación. Te invitamos a seguir mejorando y explorando más posibilidades en el desarrollo con Express y Webpack. ¡El conocimiento es poder, y en el desarrollo web, nunca se deja de aprender!