Cómo crear una web para tu servidor de FiveM

La mayoría de las comunidades de FiveM empiezan con una invitación de Discord y una página de Tebex, y dejan la web para más adelante, hasta que alguien pregunta dónde están las reglas. Esta guía es la versión corta de construir esa web: configurar la plantilla, apuntarla a tu servidor, escribir tus propias páginas, publicar. La primera vez lleva alrededor de una hora, y en ningún momento necesitas escribir React.

Los pasos de abajo usan RPWebsite, que es la plantilla que vende esta página. Donde un paso trata más sobre FiveM que sobre esta plantilla, está señalado como tal, para que la guía siga siendo útil aunque construyas tu web de otra forma.

Lo que necesitas antes de empezar

Cuatro cosas, y solo las dos primeras son realmente obligatorias.

Node.js 20 o más reciente, y pnpm. La plantilla es una aplicación Next.js. node --version debería mostrar v20 o superior.
Un dominio. No tiene que apuntar a ningún sitio todavía, pero la web necesita conocer su propia dirección durante el build, así que decídelo ahora.
Tu código de conexión de cfx.re, si quieres el número de jugadores en directo y un botón de unirse funcional. Son los seis caracteres en cfx.re/join/xxxxxx, y también puedes leerlo desde la consola F8 dentro del juego.
Un sitio donde publicarla. Vercel es el camino de menor resistencia y tiene un plan gratuito que es suficiente para una web de comunidad. Cualquier cosa que ejecute next start funciona igual.

No necesitas una base de datos, ni un CMS, ni un sistema de inicio de sesión, ni un backend. La web lee el estado de tu servidor desde una API pública en el momento de la petición, y todo lo demás desde archivos del repositorio.

Instalarla y arrancarla en local

Descomprime la plantilla y luego, desde dentro de la carpeta:

pnpm install
cp .env.example .env.local
pnpm dev

Abre http://localhost:3000. Verás una web completa con contenido de ejemplo: página de inicio, reglas, FAQ, noticias y páginas legales, en cuatro idiomas.

Deja pnpm dev corriendo en esa terminal durante el resto de esta guía. Recarga al editar, así que cada cambio de abajo se ve en uno o dos segundos.

Apuntar la web a tu servidor de FiveM

Abre .env.local, el archivo que acabas de copiar. Dos valores importan ahora.

NEXT_PUBLIC_SITE_URL=https://tu-dominio.example
NEXT_PUBLIC_CFX_JOIN_CODE=abc123

NEXT_PUBLIC_SITE_URL es la dirección pública de la web terminada. Cada URL absoluta se construye a partir de ella: el enlace canónico, las etiquetas hreflang, el sitemap, la tarjeta de vista previa social. Es el único valor sin el que pnpm build se niega a continuar, y es a propósito. Una web que le dice a Google que vive en localhost es peor que una que no llega a compilar.

NEXT_PUBLIC_CFX_JOIN_CODE alimenta tanto la sección de estado en directo como el botón de unirse. Guarda el archivo, reinicia pnpm dev para que recoja las nuevas variables, y la sección de estado debería mostrar tu número real de jugadores.

Si el número dice que tu servidor está offline mientras está claramente en marcha, salta a la última sección.

Configurar la identidad de tu servidor

Abre src/config/site.ts. Aquí es donde se configura la plantilla, y es un objeto de TypeScript simple con comentarios en cada campo. Los que merece la pena cambiar el primer día:

name es el nombre de tu servidor, que leen juntos la pestaña del navegador, la cabecera y la tarjeta social.
platform es fivem o ragemp. Decide qué adaptador de estado se ejecuta y qué hace el botón de unirse.
theme es noir, crimson o azure. Un valor desconocido hace fallar el build a propósito, porque un error de tecleo en un panel de hosting es invisible de otra forma hasta que alguien hace una captura con los colores equivocados.
features contiene los interruptores para páginas completas. Desactiva lo que no vayas a mantener. Una página de noticias vacía es peor que no tener página de noticias.
legal contiene los datos de tu operador. Llevar una web de comunidad de forma comercial suele obligar a publicarlos, y dejarlos vacíos no imprime nada en absoluto.

Escribir tus propias páginas

Dos carpetas contienen todo lo que lee un visitante.

messages/es.json es el texto de la interfaz: títulos, etiquetas de botones, introducciones de sección. Hay un archivo por idioma. Una clave que existe en un idioma y no en otro es un error de build en lugar de un fallback silencioso, así que los cuatro archivos se mantienen sincronizados por construcción.

content/es/ contiene las páginas largas como Markdown: tus reglas, tu FAQ, tus noticias, tu aviso legal y tu política de privacidad. Añadir un archivo publica una página. No hay ninguna ruta que registrar ni ninguna entrada de configuración que recordar, porque dónde aparece una página en la navegación se declara en su propio frontmatter.

Empieza por content/es/rules.mdx. Es la página que los nuevos jugadores realmente leen, y el texto de ejemplo que contiene no es tu reglamento.

Publicarla

Antes de publicar, ejecuta la comprobación que también ejecuta la CI:

pnpm check

Eso compila, comprueba tipos y pasa el linter, en ese orden, porque next build genera los tipos de rutas contra los que TypeScript comprueba después las páginas. Si pasa, la web está lista para publicarse.

En Vercel: importa el repositorio, pon las mismas variables que pusiste en .env.local en los ajustes de entorno del proyecto, y publica. No hay ningún paso de build aparte de next build ni ningún servicio que aprovisionar.

En un VPS, Coolify, Docker o Railway: cualquier cosa que ejecute next start funciona igual. Configura las variables de entorno en el panel de tu proveedor en vez de subir .env.local.

Una cosa que conviene saber antes de buscarla: la exportación estática no está soportada tal como se entrega. Un proxy se ejecuta en cada petición para resolver el idioma del visitante, y una exportación estática no tiene fase de petición. El README de la plantilla documenta la receta de cuatro pasos para hacerla estática de todos modos, y lo que se pierde al hacerlo: la tarjeta social generada, el helper de consulta de RAGE:MP y la optimización de imágenes.

Cuando el número de jugadores dice offline

Es la pregunta de soporte más habitual, y normalmente tiene una de tres causas.

El código de conexión está mal o falta. Compáralo con cfx.re/join/xxxxxx de tu servidor. El código distingue mayúsculas de minúsculas.

Tu servidor rechaza la petición. El ajuste sv_requestParanoia de FiveM, a partir de 2, hace que los endpoints JSON integrados rechacen a todo el mundo, incluida tu propia web. La solución no es bajarlo. Configura en su lugar el recurso de estado que se incluye en integrations/fivem-status/ en tu servidor, y apunta la web hacia él:

CUSTOM_STATUS_URL=http://tu-servidor:30120/fivem-status/?token=tu-secreto

Ese camino también es cómo consigues la cifra de pico diario, que la API de Cfx no puede reportar en absoluto.

Estás intentando usar txAdmin. No expone una API REST pública, y su único endpoint protegido por entorno reporta métricas del host detrás del puerto de administración en lugar de jugadores. El recurso de arriba es el camino soportado.

Si el número es correcto en local pero incorrecto en producción, comprueba que la variable de entorno esté realmente configurada en el panel de tu proveedor. .env.local no se publica, y es a propósito.