Premium FiveM Server Website Template
Welcome to the ultimate website template for your FiveM Roleplay Server! This project provides a stunning, high-performance web presence with zero database headaches.
Features & Capabilities
Live Server Status & Connectivity
- Real-Time Player Count: Automatically fetches your server's online status and live player count directly from the CFX API.
- Smart Fallbacks: Integrated API proxy to ensure the server status is always displayed, even if direct requests fail.
- Direct Connect: A built-in "Play Now" button that directly launches FiveM (fivem://connect/IP) and a one-click IP copy function.
Built-In News & Blog System (No Database Required!)
- Dynamic News Feed: Display announcements, changelogs, and updates in a beautifully designed card layout.
- Secure Admin Panel: Login with a secure password to access the hidden admin dashboard.
- File-Based Storage: Create, edit, and delete news posts directly from your browser. All posts are saved securely as JSON files—you don't need MySQL or MongoDB!
Stunning Premium Design
- Immersive Dark Mode: A sleek, modern user interface with glassmorphism (frosted glass) effects and glowing accents.
- Framer Motion Animations: Smooth scroll reveals, micro-interactions, and page transitions out of the box.
- Responsive Layout: Looks perfect on desktop, tablet, and mobile phones.
- Image Lightbox: Built-in gallery viewer for showcasing your best in-game screenshots to attract new players.
Easy Configuration
- Centralized site-config.ts: You don't need to hunt through code. Change your server name, Discord URL, logo, team members, and rules all from one single file!
- Dedicated Pages: Comes with pre-built pages for Home, Rules, News, Server Stats, and Privacy Policy.
- SEO Ready: Properly structured HTML and Meta-tags to ensure your server ranks well on Google.
Installation & Setup Guide
This template is built with Next.js 14 and Node.js. You can host it on any VPS, dedicated server, or free platforms like Vercel.Prerequisites
- Node.js (Version 18 or higher)
- A Code Editor (e.g., Visual Studio Code)
Step 1: Configuration
- Unpack the files to your desired folder.
- Locate the .env.example file and rename it to .env.local (or just .env).
- Open the file and set your secure Admin Password:
env
ADMIN_USERNAME=admin
ADMIN_PASSWORD=your_super_secret_password
SESSION_SECRET=a_long_random_string_here - Open /lib/site-config.ts to customize your server name, IP, Max Players, Discord Link, and Team.
Step 2: Install Dependencies
Open your terminal (or command prompt) inside the project folder and run:bash
npm install
Step 3: Run the Website
To test the website locally on your computer:bash
npm run dev
(You can view it in your browser at http://localhost:3000)
Step 4: Production Build (For your live server)
When you are ready to put the site online, build the optimized version:bash
npm run build
npm start
Note: For platforms like Vercel, simply import the GitHub repository, add your Environment Variables, and click "Deploy"!
Support
