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!

Paolo Joaquin Pinto Perez

student•

++Instalación y configuración de Express.js++

mkdir webpack-express && cd webpack-express

para inicializar el proyecto:

git init && npm init -y

luego instalamos las dependencias: Express:

npm install express -S

Webpack y webpack-cli:

npm install webpack webpack-cli -D

Babel( Transpilar el código de cualquier estandar de ecma a navegadores para su compatibilidad):

npm install @babel/core @babel/preset-env babel-loader

Configuracion del proyecto:

creamos la carpeta src, y el archivo dentro de src > index.js

Para escuchar en nuestro server:

node src/index.js

url: localhost:3000 ó el puerto que pusieron.

Wilmar Yoan Malaver Malaver

student•

Muchas gracias.

Santiago Lopera Naranjo

student•

Actualmente no es necesario ingresar el flag -S para guardar como dependencias de produccion, ya que npm por defecto las guarda de esta forma.

Pero si es necesario el flag -D para aquellas que son solo de desarrollo.

Aun que npm pareca algo sencillo, tiene mucho por dentro, si te animas puedes aprender mas de él en el curso de npm

#nuncaparesdeaprender

Giovanny Hernandez

student•

Las dependencias de Babel se deberían salvar también como desarrollo: npm install @babel/core @babel/preset-env babel-loader -D

Santiago Lopera Naranjo

student•

Hay un pequeño trick que puedes usar para que puedas abrir tu navegador por defecto desde la terminal, y es que cuando muestres el puerto que esta escuchando le agreges una url completa de la siguiente forma:

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

Al poner el " http... " tu terminal reconocerá que se trata de una url, y solo bastará con darle click y automaticamente se te abrirá en tu navegador.

Jose Ever Muñoz Muñoz

student•

excelente truco !

Armando Chindoy

student•

Para aquellos que tengan problemas con WSL y no les habrá la ruta en el navegador colocar el host en app.listen()

PORT=3000
HOST:'0,0,0,0'
app.listen(PORT,HOST,()=>console.log(`App listening at localhost${PORT}`))

Jose Ever Muñoz Muñoz

student•

Webpack y Babel son herramientas esenciales en el desarrollo web moderno, pero cumplen funciones diferentes:

Webpack: Es un empaquetador de módulos que se encarga de combinar y gestionar recursos como JavaScript, CSS, imágenes, etc. Su principal objetivo es optimizar la carga de la aplicación mediante técnicas como el code splitting y lazy loading.
Babel: Es un transpilador que convierte código JavaScript moderno (ES6+) a versiones más antiguas compatibles con navegadores más viejos. Esto permite usar las últimas características de JavaScript sin preocuparse de la compatibilidad.

En resumen, Webpack se centra en la gestión y optimización de recursos, mientras que Babel se encarga de asegurar que el código JavaScript sea compatible con diferentes entornos.