Saltar al contenido principal

Guía frontend-backend

Para crear el código desde 0 puedes seguir los siguientes pasos

Estructura final del proyecto​

mi-proyecto/
├── mi-aplicacion-react/   # Proyecto React+Vite
│   ├── dist/             # Archivos compilados
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── vite.config.js
│
├── server/               # Servidor Express
│   ├── node_modules/
│   ├── package.json
│   └── server.js
│
└── package.json          # Scripts de despliegue

Paso 1: Crear un proyecto React con Vite​

# Usando npm
npm create vite@latest mi-aplicacion-react -- --template react

# O usando yarn
yarn create vite mi-aplicacion-react --template react

Paso 2: Desarrollar tu aplicación React​

cd mi-aplicacion-react
npm install  # o yarn
npm run dev  # o yarn dev

Esto debería iniciar el servidor de desarrollo de Vite y podrás ver tu aplicación en http://localhost:5173.

Paso 3: Compilar la aplicación para producción​

npm run build  # o yarn build

Esto creará una carpeta dist en la raíz de tu proyecto con todos los archivos estáticos compilados.

Paso 4: Configurar un servidor Express para servir los archivos estáticos​

Ahora, vamos a crear un servidor Express que servirá los archivos estáticos:

  1. Crea una carpeta llamada server en la raíz de tu proyecto:
mkdir server
cd server
  1. Inicializa un nuevo proyecto Node.js:
npm init -y
  1. Instala express
npm install express
  1. Crea un archivo server.js dentro de la carpeta server con el siguiente contenido:
// server.js - Versión corregida
const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware para servir archivos estáticos
app.use(express.static(path.join(__dirname, '../dist')));

// API endpoints (opcional)
app.get('/api/health', (req, res) => {
  res.json({ status: 'ok', timestamp: new Date() });
});

// Inicia el servidor
app.listen(PORT, () => {
  console.log(`Servidor ejecutándose en http://localhost:${PORT}`);
});

Paso 5: Crear un script para iniciar el servidor​

Añade un script de inicio en el package.json del servidor:

{
  "scripts": {
    "start": "node server.js"
  }
}

Paso 6: Preparar la estructura para despliegue​

Configurar un script para despliegue completo.

Crea un package.json en la raíz del proyecto que incluya scripts para compilar React y ejecutar el servidor:

{
  "name": "react-express-monolito",
  "version": "1.0.0",
  "scripts": {
    "build:client": "cd mi-aplicacion-react && npm run build",
    "start:server": "cd server && npm start",
    "deploy": "npm run build:client && npm run start:server"
  }
}

Paso 7: Ejecutar el servidor​

Navega a la carpeta server e inicia el servidor:

cd server
npm start

Tu aplicación React ahora estará disponible en http://localhost:3000 (o en el puerto que hayas configurado).