FiveM Boilerplate – React + TypeScript

A complete boilerplate for developing FiveM scripts using React, with both client and server written in TypeScript.

📋 Features

• ✅ Client-Side: TypeScript with @citizenfx/client and Webpack bundling
• ✅ Server-Side: TypeScript with @citizenfx/server and Webpack bundling
• ✅ NUI Interface: React powered by Vite for hot reload and optimised builds
• ✅ TypeScript Support: Includes @citizenfx references for IntelliSense
• ✅ Encrypted Build: Extreme obfuscation for client and server (TypeScript Obfuscator + Terser)
• ✅ Key Bindings: Native ESC key to close the interface
• ✅ Communication: Fully integrated NUI ↔ Client ↔ Server messaging system

🚀 Installation

# Install all dependencies
cd client && npm install
cd server && npm install
cd nui && npm install

# Build the project
cd ..
npm run build

📁 Project Structure

fivem-boilerplate-react-typeScript/
├── client/         # Client-side
├── server/         # Server-side
├── nui/            # React interface
└── fxmanifest.lua

🎮 Usage

In-Game Commands:

• /opennui or F9 – Opens the NUI
• ESC – Closes the NUI

NUI → Client Communication:

fetchNui('exampleAction', { message: 'Hello!' });

Client → Server Communication:

emitNet('fivem-boilerplate:exampleServerEvent', data);

Server → Client Communication:

emitNet('fivem-boilerplate:updateNUI', player, data);

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made by TheMaderas