Module C3 · Interfaces (NUI)

Production NUI: a React and Vite build pipeline

In the from-scratch lesson you wrote three loose files and FiveM served them as-is. That stops scaling the moment you want React, TypeScript, or any npm package. Production NUI is a real frontend project: you write source under ui/, run a build step that bundles everything into a dist/ folder, and the resource serves that built output. This lesson wires that pipeline end to end with React and Vite, then drills the one workflow detail everyone trips on: editing source does nothing in-game until you rebuild.

You'll build: A React + Vite NUI that opens on a command, shows one value Lua sent, and POSTs back to close. The resource serves a built dist folder, not loose HTML.
Time: ~35 minutes
You need: The NUI from scratch lesson done so you know SendNUIMessage, RegisterNUICallback, and SetNuiFocus. Node 18+ installed, and a server you can restart.
You'll learn: A ui/ source folder vs a built dist/ output, ui_page on the build artifact, typed Lua-to-React messages, the cfx-nui fetch back to Lua, and the build-then-refresh dev loop.
Pass condition: /phone opens a React panel showing a balance Lua pushed, the Close button POSTs to Lua, and F8 prints the round-trip.

BEFORE YOU START

Production NUI: a React and Vite build pipeline

Build it

Make the resource and the ui source folder

Write the ui project files

Write the React app

Write client.lua

Write fxmanifest.lua pointing at the build output

Build the ui, then start the resource

Keep reading the full lesson