Ejercicio: Proyectos reales con Vite y el ecosistema

⏱ 25 minutos
📶 Nivel: principiante

Objetivo

Preparar un proyecto de React para publicarse automáticamente en GitHub Pages: configuración de Vite y flujo de GitHub Actions.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Escribe el contenido de un vite.config.js que importe defineConfig y @vitejs/plugin-react, active plugins: [react()] y defina base con el nombre de tu repositorio.
Escribe un archivo .github/workflows/deploy.yml que se ejecute en cada push a main.
El flujo debe: descargar el código, preparar Node 20, instalar dependencias con npm ci, construir con npm run build, subir dist y desplegar con actions/deploy-pages.
Pega ambos archivos (uno debajo del otro) en el comprobador.

💡 Pista 1: la base

base debe empezar y terminar con barra: si tu repositorio se llama mi-app, escribe base: "/mi-app/".

💡 Pista 2: los pasos del flujo

Los pasos van en una lista dentro de steps:. Usa uses: para acciones ya hechas y run: para comandos.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tus archivos de configuración

✅ Ver una solución posible

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

vite.config.js y deploy.yml

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/mi-app/",
});

# .github/workflows/deploy.yml
name: Publicar en GitHub Pages
on:
  push:
    branches: [main]
permissions:
  pages: write
  id-token: write
  contents: read
jobs:
  desplegar:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 24
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v5
        with:
          path: dist
      - uses: actions/deploy-pages@v5

💡 🏁 Reto extra (opcional)

Añade al flujo un paso que ejecute npm run lint (o npm test) antes de construir, para no publicar código con errores.