Ir al artículo
Aniq-UI

Financial DashboardPublícala en internet

Publícala en internet

Publica el panel en Vercel, en cualquier servidor que ejecute Node.js o como imagen de Docker.

Antes de desplegar

El inicio de sesión incluido es un marcador de posición: la cuenta está en el código de la app y se comprueba en el navegador, así que cualquiera puede leerla e iniciar sesión. Conecta el inicio de sesión a tu propia API antes de que lleguen usuarios o datos reales al panel.

Inicio de sesión

No hay que configurar nada para desplegar: no hay base de datos, ni secretos, ni variables obligatorias.

  • Reemplaza las cifras, tarjetas y transacciones de ejemplo por tus propios datos o por datos de tu API.
  • Deja NEXT_PUBLIC_DEMO_MODE desactivada, salvo que el despliegue sea una demo pública.

Vercel

  1. Pon la carpeta en un repositorio de Git privado

    Sube la carpeta dashboard-template-1 a un repositorio privado en GitHub, GitLab o Bitbucket. Tu licencia no permite compartir el código fuente públicamente. La descarga ya incluye un .gitignore que excluye node_modules, la construcción y tus archivos .env.

  2. Impórtala en Vercel

    En Vercel, añade un proyecto nuevo a partir de ese repositorio. Detecta Next.js; conserva los ajustes de construcción por defecto.

  3. Añade las variables de entorno

    En Environment Variables del proyecto, añade ENABLE_EXPERIMENTAL_COREPACK con el valor 1 para que Vercel instale con la versión de Yarn que fija package.json. Añade NEXT_PUBLIC_DEMO_MODE solo si quieres el modo demo.

  4. Despliega

    Inicia el despliegue y luego añade tu dominio en los ajustes Domains del proyecto.

    Resultado esperado: Tu dominio con /en/login abre la página de inicio de sesión.

Después de cambiar una variable, vuelve a desplegar: la app en ejecución conserva los valores con los que se construyó.

Cualquier servidor con Node.js

En un servidor con Node.js 20.9 o superior, copia la carpeta y luego instala, construye e inicia:

Terminalen dashboard-template-1
corepack enable
yarn install
yarn build
yarn start

El panel responde en el puerto 3030. Pon delante un servidor web como Nginx o Caddy para tu dominio y HTTPS, y mantén yarn start en ejecución con un gestor de procesos o un servicio del sistema.

Proveedores que eligen el puerto

yarn start siempre escucha en 3030, aunque el proveedor de alojamiento defina una variable PORT. En un proveedor que te asigna un puerto, usa como comando de inicio yarn start -p $PORT.

Una imagen de Docker

El Dockerfile construye una imagen pequeña que sirve el panel con Node.js en el puerto 3030, con un usuario sin derechos de administrador. Constrúyela y ejecútala en segundo plano para que se reinicie con el servidor:

Terminalen dashboard-template-1
docker build -t financial-dashboard .
docker run -d --restart unless-stopped -p 3030:3030 financial-dashboard

Cualquier hosting que ejecute un Dockerfile puede construirlo tal como está. Pon un servidor web delante del puerto 3030 para tu dominio y HTTPS, como con Node.js.

Cuando ya está en internet

  • Abre tu dirección con /en/login y /ar/login y comprueba los dos idiomas.
  • Cada página indica a los buscadores que no la indexen, porque un panel con sesión iniciada no debe aparecer en los resultados de búsqueda. El ajuste es robots en src/app/[locale]/layout.tsx.

¿Te atascaste en un paso?

Busca una solución antes de empezar de nuevo.

Solución de problemas

Preferencias de Cookies

Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies para análisis y publicidad personalizada.