Servidor Express con TypeScript desde cero

Curso de Server Side Render o SSR con React.js

Contenido del curso

No sé dónde empezar

Fundamentos de SSR

Crea tu primer app con SSR

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:48

Servidor Express con TypeScript desde cero

Curso de Server Side Render o SSR con React.js

Clase 8 de 17

Clase 8 / 17

Recursos

Montar un servidor con Express y TypeScript te permite combinar la rapidez de un framework minimalista con la seguridad de los tipos estáticos. Aquí aprendes a instalar dependencias, configurar variables de entorno y responder rutas dinámicas, ideal si vienes de Node.js y quieres un proyecto más robusto.

¿Cómo instalar Express con TypeScript en tu proyecto?

Después de tener listo webpack compilando tu código, el siguiente paso es sumar Express como dependencia de producción. La instalación se hace con tu gestor de paquetes y, además, conviene traer los tipados oficiales para aprovechar el autocompletado y la validación.

Instala Express como dependencia principal con yarn add express [01:05].
Suma los tipos como dependencia de desarrollo: yarn add -D @types/express @types/node [04:10].
Importa en tu archivo server.ts tanto Express como los tipos Request y Response.

¿Por qué usar TypeScript con Express? Porque te avisa de errores antes de mandar el código a producción. Si declaras que tu app es una instancia de Express y le pasas un number, el compilador te detiene en seco.

¿Cómo se ve el código mínimo de un servidor Express en TypeScript?

El esqueleto es directo: importas, instancias, defines una ruta y escuchas en un puerto. Lo importante es tipar correctamente request y response para que el editor te guíe.

typescript import express, { Request, Response } from 'express';

const app: express.Application = express();

app.get('/', (req: Request, res: Response) => { res.send('Hola, mundo'); });

app.listen(3500, () => { console.log('Listening in port http://localhost:3500'); });

Al correr yarn dev y abrir localhost:3500, deberías ver tu mensaje en pantalla [03:30]. Ese es el primer indicador de que el servidor responde.

¿Cómo configurar variables de entorno con dotenv?

Dejar el puerto escrito directamente en el código es mala práctica. Lo correcto es centralizar esos valores en un archivo de configuración que lea las variables de entorno desde tu .env.

La dependencia dotenv se encarga de cargar esas variables al objeto process.env, para que tu aplicación las consuma sin exponerlas en el repositorio.

¿Dónde colocar el archivo de configuración?

La convención más limpia es crear una carpeta config con un index.ts que exporte un objeto con todos los valores que tu app necesita. Así, si mañana cambias un puerto o agregas una clave de API, modificas un solo lugar.

typescript import dotenv from 'dotenv'; dotenv.config();

export const config = { port: process.env.PORT, };

Luego, en tu servidor, reemplazas el número quemado por un template literal que use config.port [05:40]. Pequeño cambio, gran diferencia en mantenibilidad.

¿Qué hace dotenv exactamente? Lee tu archivo .env y carga cada variable dentro de process.env, para que tu código acceda a ellas sin escribir secretos directamente en los archivos fuente.

¿Cómo responder rutas dinámicas con Express?

Un servidor real no responde solo en /. Necesitas capturar cualquier ruta y devolver contenido que cambie según la URL. Express permite hacerlo con el comodín * en el método get.

Dentro del callback, puedes leer req.url y construir una respuesta personalizada. Aquí entra el primer acercamiento al server-side rendering: enviar HTML desde el backend en lugar de solo texto plano.

typescript app.get('*', (req: Request, res: Response) => { res.send(<h1>Hola, mundo con ruta ${req.url}</h1>); });

Si visitas localhost:3500/platzi, verás el H1 mostrando esa ruta. Si entras a /cursos, mostrará /cursos. La respuesta cambia dinámicamente según la petición [07:20].

¿Esto ya es server-side rendering?

Es la versión más primitiva. Devolver una etiqueta <h1> suelta no es suficiente: un SSR completo entrega un documento HTML estructurado, con <head>, <body> y contenido que varía según el estado de la aplicación.

La idea queda sembrada y es la base para construir un renderizado del lado del servidor funcional, donde cada ruta entrega un HTML completo listo para el navegador.

¿Ya probaste levantar tu primer servidor con esta estructura? Cuéntame en los comentarios qué puerto usaste y si te aparecieron errores con los tipos.

Fundamentos de SSR

Por qué React necesita server-side rendering

Problemas reales de las SPAs con JavaScript

Creación y Funcionamiento de una SPA con Create React App

CSR vs SSR: cómo el servidor pinta primero

Ventajas y desventajas del server-side rendering

Crea tu primer app con SSR

Proyecto Helix Eye: de CSR a SSR

Webpack para servidor Node con TypeScript

Servidor Express con TypeScript desde cero

Función template HTML dinámica en TypeScript

renderToString y StaticRouter en el servidor

Hidratación de React con hydrateRoot en SSR

Prefetching de API en el servidor con Axios

Inyectando initialProps del servidor a React

Cómo inyectar estilos de SSR sin flickering

Bonus

Hot Module Replacement con Webpack y Express

Tu motor SSR vs Next.js en práctica

Helix Eye como proyecto de portafolio

Servidor Express con TypeScript desde cero

Progreso del curso

Fundamentos de SSR

Crea tu primer app con SSR

Bonus

Recursos

Recursos