Running one loading screen across several servers
Keep one loading screen resource in Git and pass per-server values at runtime: set convars in each server.cfg (for example set loading_variant "whitelist"), read them on the server with GetConvar and send them with deferrals.handover in playerConnecting, and let the page pick name, colours, rules and music from that. Static differences can live in one JSON config keyed by server.
Communities often run more than one server — main and whitelist, EU and NA, or live and development. Maintaining a separate loading screen for each means fixing the same bug three times. One codebase with per-server settings keeps them consistent and still lets each server show its own name, colours and rules.
Per-server convars
set loading_variant "whitelist"
set loading_discord "discord.gg/example"Each server sets its own values; the resource files stay identical.
Passing values with handover data
AddEventHandler('playerConnecting', function(_, _, deferrals)
deferrals.handover({
variant = GetConvar('loading_variant', 'main'),
discord = GetConvar('loading_discord', ''),
})
end)const data = window.nuiHandoverData || {};
const variant = data.variant || 'main';
document.documentElement.dataset.variant = variant;Details and limits: handover data.
Static content per server
{
"main": { "name": "Night City RP", "accent": "#7c5cff", "music": "main.mp3" },
"whitelist": { "name": "Night City WL", "accent": "#ff5c8a", "music": "wl.mp3" },
"dev": { "name": "Night City DEV", "accent": "#999999", "music": null }
}Include variants.json and assets in the manifest files list so the page can load them — see NUI asset paths.
Workflow
- 1Keep the resource in one Git repository.
- 2Deploy the same version to every server.
- 3Change only convars per server.
- 4Test each variant on the dev server with the same convars.
Common questions
Can two FiveM servers share one loading screen?
Yes — use the same resource and switch name, colours and content with per-server convars passed through handover data.
How does a loading screen read server.cfg values?
Read the convar on the server with GetConvar and pass it with deferrals.handover; the page reads window.nuiHandoverData.
Where should per-server text live?
In a JSON config keyed by variant, listed in the manifest files.
Should the dev server use the same loading screen?
Yes, with a dev variant — it is the best place to test changes before live.
Server list, banners, connecting and queues, loading screens in HTML or React, music and video, NUI, branding, Discord, marketing, Tebex rules and a launch plan — everything in one page.
Want a loading screen you never have to debug?
Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.
Start free