FiveM Status Page

A real-time status page for FiveM servers built with Elysia and Vite.

Features

• Real-time server status monitoring
• Player count and list display
• Response time tracking
• 24-hour uptime history graph
• Discord webhook notifications for server outages
• Mobile responsive design
• Admin page for creating notices for downtime, maintenance, etc.

Quick Start

1. Install Dependencies

bun install

2. Configure Environment

Copy the example environment file and configure it:

cp .env.example .env

Edit .env with your settings:

FIVEM_SERVER_URL=http://your-server-ip:30120

DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/your-webhook-url

# Customization
SITE_TITLE=JRP Status
LOGO_URL=
FAVICON_URL=
SERVER_TITLE=

# Status page URL (used in Discord webhooks)
STATUS_PAGE_URL=https://status.yourdomain.com

# API key for posting status updates (generate a random string)
STATUS_UPDATE_KEY=your-secret-key-here

# Server port for the status page
PORT=3000

# Default: 30000 (30 seconds)
CHECK_INTERVAL=30000

3. Development

Run both frontend and backend in development mode:

bun run dev

Or run them separately:

# Frontend (Vite dev server on port 5173)
bun run dev:frontend

# Backend (Elysia server on port 3000)
bun run dev:backend

4. Production

Build and run in production:

bun run build
bun run start

Admin Page

Go to {base_url}/admin and enter your STATUS_UPDATE_KEY to enter the status update page.

Discord Webhook Alerts

When configured, the status page will send Discord notifications when:

• Server goes offline
• Server comes back online

The webhook will include:

• Server name
• Current/last known player count
• Response time (when back online)
• Timestamp

Tech Stack

• Backend: Elysia (Bun web framework)
• Frontend: Vite + React
• Runtime: Bun