Go to file Use this template
2024-01-17 17:56:35 +07:00
.github/workflows Update autorelease.yml 2024-01-17 17:56:35 +07:00
client z 2024-01-02 10:50:35 +07:00
server/impl z 2024-01-02 10:50:35 +07:00
web Update App.tsx 2024-01-17 17:17:58 +07:00
.gitignore first commit 2023-12-05 13:55:38 +07:00
config.lua add locale func 2024-01-12 17:45:08 +07:00
fxmanifest.lua Update fxmanifest.lua 2024-01-17 17:29:54 +07:00
impl.lua z 2024-01-15 10:46:41 +07:00
LICENSE first commit 2023-12-05 13:55:38 +07:00
main.lua z 2024-01-15 10:46:41 +07:00
main.obf.lua Update main.obf.lua 2023-12-13 00:36:05 +07:00
README.md Update README.md 2023-12-13 00:23:22 +07:00

Project logo

LR Fivem lua module

This repository is a basic boilerplate for getting started with React in NUI. It contains several helpful utilities and is bootstrapped using create-react-app. It is for both browser and in-game based development workflows.

For in-game workflows, Utilizing craco to override CRA, we can have hot builds that just require a resource restart instead of a full production build

This version of the boilerplate is meant for the CfxLua runtime.

Requirements

A basic understanding of the modern web development workflow. If you don't know this yet, React might not be for you just yet.

Getting Started

First clone the repository or use the template option and place it within your resources folder

Installation

The boilerplate was made using yarn but is still compatible with npm.

Install dependencies by navigating to the web folder within a terminal of your choice and type npm i or yarn.

Enable modules in Config.EnableModules

Config.EnableModules = {
  ["Newbie"] = {
    enabled = true,
    client = true, -- enable client side
    priority = 1, -- 1 : init on start | 2 : init on player loaded
  },
  ["Test"] = {
    enabled = true,
    priority = 2, -- 1 : init on start | 2 : init on player loaded
  },
}
Config.Debug = true -- print log
Config.Dev = false
Config.Nui = true -- will wait NUI trigger RegisterNUICallback('AppReady', ...) before init

This boilerplate will export all method from all modules

  • To call method in module out side of script
    exports['lr_addon']:ImplCall(name, func, ...) --Call a method in module external
    

Main

variable `main` is global
you can use this variable in anywhere
  • Properties

    main.playerId
    main.playerPed
    main.playerCoords
    main.playerHeading
    main.playerServerId
    
  • methods (internal use)

    main:GetImpl(implName) --Get module instance
    
    main:ImplCall(implName, methodName, ...args) --Call a method in module
    --You can also use this way
    local testImpl = main:GetImpl("Test")
    testImpl:<methodName>(...args)
    

Impl

  • default methods

    Impl:GetName() --Get name of module
    
    Impl:OnReady() --Called when module was initialized
    --Example
    local Impl = NewImpl("Test")
    
    function Impl:OnReady()
      self:LogInfo("%s initialized", self:GetName())
      --will print out: [INFO] [TEST] Test initialized
      --Your rest of script
    end
    
    function Impl:HookHere(value)
      return value + 1
    end
    
    function Impl:ReplaceThis(a, b)
      return a + b
    end
    
    
    Impl:OnDestroy() --Called when module start destroying (when hot reload module)
    
    Impl:HookMethod(method, hookFn) --Hook a function at start of method. Must return value same as arguments of method
    --Example
    
    local testImpl = main:GetImpl("Test")
    print(testImpl:HookHere(2))
    --print out: 3
    
    testImpl:HookMethod("HookHere", function(this, value)
      print("Hook called");
      return value
    end)
    print(testImpl:HookHere(2))
    --print out: Hook called
    --print out: 3
    
    testImpl:HookMethod("HookHere", function(this, value)
      print("Hook called 2");
      return value + 1
    end)
    print(testImpl:HookHere(2))
    --print out: Hook called 2
    --print out: Hook called
    --print out: 4 (because we was modified value = value + 1)
    
    Impl:ReplaceMethod(method, newMethod) --Replace method with new function
    --Example
    
    local testImpl = main:GetImpl("Test")
    print(testImpl:ReplaceThis(2, 3))
    --print out: 5
    
    testImpl:ReplaceMethod("ReplaceThis", function(this, a, b)
      return a * b
    end)
    print(testImpl:ReplaceThis(2, 3))
    --print out: 6
    
    Impl:RefreshMethod(method) --Refresh method to original
    --Example
    
    local testImpl = main:GetImpl("Test")
    
    testImpl:RefreshMethod("HookHere")
    print(testImpl:HookHere(2))
    --print out: 3
    
    testImpl:RefreshMethod("ReplaceThis")
    print(testImpl:ReplaceThis(2, 3))
    --print out: 5
    
    Impl:LogInfo(msg, ...) --Print log when Config.Debug == true
    
    Impl:LogError(msg, ...) --Print log when Config.Debug == true
    
    Impl:LogSuccess(msg, ...) --Print log when Config.Debug == true
    
    Impl:LogWarning(msg, ...) --Print log when Config.Debug == true
    
    Impl:Destroy() --Destroy module (Called when hot reload module)
    
  • Impl default properties

    self.destroyed = false
    self.originalMethods = {}
    self.eventHandlers = {}
    
  • Create Impl

    Module name must be the same as file name

    local Impl = NewImpl("Test2")
    --file name must be Test2.impl.lua
    --Place file in client/impl for clientside and server/impl for serverside
    
    local Impl = NewImpl("Test")
    
    function Impl:OnReady()
      -- Entry of module
      self.testVar = 0
    end
    
    function Impl:GetData()
      return self.data
    end
    
    function Impl:Add(amount, amount2)
      self.testVar = self.testVar + amount + amount2
      return self.testVar
    end
    

Commands

reload:<resourcename> <implname> <mode>
--Used for hot reload a module
--mode: 0 [default] (reload server and client) | 1 (reload only client) | 2 (reload only server)
--Example:
reload:lr_boilerplate Test --for reload module `Test` clientside and serverside
reload:lr_boilerplate Test 1 --for reload module `Test` clientside
reload:lr_boilerplate Test 2 --for reload module `Test` serverside
toggledebug:<resourcename>
--Used for toggle debug mode [modify variable Config.Debug] (print out log ...)
toggledev:<resourcename>
--Used for toggle dev mode [modify variable Config.Dev]