Boilerplate

ERR Boilerplate

Github
Releases

A modern and feature-rich boilerplate for FiveM resources, built with the latest React 19, TailwindCSS, and Shadcn UI components.

⚠️

This boilerplate is in active development. Breaking changes may occur in future updates. Please check the releases page for the latest stable version.

Features

  • Modern Tech Stack: React 19, TailwindCSS 4, Shadcn UI components
  • Type Safety: Full TypeScript support
  • NUI Integration: Seamless communication between Lua and React
  • Development Tools: Hot module replacement for rapid development
  • Responsive Design: Mobile-first approach with beautiful UI components
  • FontAwesome Icons: Comprehensive icon library included
  • Error Handling: Built-in error boundary to prevent UI crashes

Installation

Make sure to follow the installation instructions carefully to ensure proper functionality.

Install dependencies

Download the Resource

You can either:

git clone https://github.com/errDev-t/err_boilerplate.git
cd err_boilerplate/web
pnpm install
pnpm build

Add to Server Resources

  • Place the err_boilerplate folder into a new [ERR] directory within your server's resources folder
  • Ensure all dependencies are properly installed

Update Server Configuration

Open your server.cfg file and add one of the following lines:

ensure [ERR]

Install Frontend Dependencies

Navigate to the web directory and install the dependencies:

cd resources/[ERR]/err_boilerplate/web
pnpm install

Build for Production

Build the frontend for production use:

pnpm build

Development Workflow

Development Modes

The boilerplate supports two development modes:

1. Local Development (Hot Reload)

Best for rapid UI development and testing without the game:

  1. In fxmanifest.lua, update the UI configuration:

    -- Enable this line for development
ui_page 'http://localhost:3000/'
 
-- Comment out this line
-- ui_page 'web/build/index.html'

  2. Start the development server:

    cd web
pnpm start

The development server will run at http://localhost:3000 with hot module replacement (HMR) enabled. Changes to your code will be reflected immediately without manual refresh.

Testing Your UI

  1. In-game commands:

    • Use /show-nui to display the UI
    • Press ESC or click the close button to hide the UI

  2. Debug mode:

    • Open your web browser's DevTools (F12)
    • Check the console for NUI messages and errors
    • Use the React Developer Tools for component inspection
⚠️

Remember to rebuild the UI using pnpm build before deploying to production.

IntroductionConfiguration