This lightweight library was specifically designed for UI-focused resource development. Throughout the process, we realized the need to repeatedly create boilerplate code to effectively communicate with the backend of our resources. In our search for a streamlined solution, we conceptualized a drag-and-drop library that places strong emphasis on simplicity and a straightforward data structure.
If you require any assistance or have suggestions, we encourage you to join our Discord community. We provide dedicated channels where you can seek help and support. Your active participation is highly valued, and we are here to address any queries or provide guidance as needed. Discord Invite
- Download the Library: Go to the release section and obtain the latest version of the library. It's a single file, making it easy to download.
- Install the Library: Copy the file to your desired location within your resource.
- Configure Your Resource: Simply add the following snippet to your
fxmanifest.luafile.
shared_scripts {
"{YOUR_PATH}/api-lib.lua"
}To ensure registration of callbacks received from FiveM's NUI, we need to create a client file. You can choose any name you prefer, but for the sake of simplicity, let's name it middleware.lua. In this file, all you have to do is add the following method.
API:RegisterEndpoints({
-- Endpoints
})To register your desired endpoints, simply add them to the table as strings. It should follow a format similar to this example:
Important! You have the freedom to choose any names for these paths. In this demonstration, I'll be using standard Web API conventions.
API:RegisterEndpoints({
"/api/test",
"/api/test/2"
})Adding your endpoints to the server is a straightforward process. Open the file where you want to define your route and add the following snippet at the top of the file (although it can be placed anywhere, the top is usually the easiest):
router = API.RouterIt's worth mentioning that you're not required to follow this approach, but it helps keep your code clean and maintainable, especially as your resource expands.
Defining a route is a simple process. By adding the following code, you can define your desired route:
-- Any value you return from this function will be sent back to the NUI.
router:Register("/api/test", function(req)
local data = {}
return data
end)As you can see, this code snippet accepts one parameter. This parameter grants you access to the request data, which currently includes only the body for exchanging data between the server and NUI. In the future, additional request options will be supported.