[Developer] [NUI] React (TypeScript) and Lua Boilerplate

FiveM Resource Development & Modding Releases
, , ,
1

FiveM React and Lua Boilerplate

A simple and extendable React (TypeScript) boilerplate designed around the Lua ScRT

license Dependabot Status

Github Repository

This is another developer targeted release, this time around React (TypeScript) and the Lua runtime.
It is bootstrapped using create-react-app but modified to best suit the development workflow of the
NUI/CEF environment.

Boilerplate Focuses

This boilerplate has some specific focuses.

  • Minimizing dependencies (aside from those provided by create-react-app)
  • Creating an efficient workflow for both browser based and in-game development
  • Widely applicable and without much opinionated structure.

This means that this boilerplate is barebones. There are no included libraries such as Redux, Router, Material-UI, etc. We left these library choices up to the user

Why Create React App?

Many boilerplates of the past have bootstrapped with CRA but didn’t utilize it for things like building and serving. Instead, using standalone Webpack configs and Webpack DevServer setups. In the case of this boilerplate, by offloading as much as possible to CRA, this should hopefully help to improve maintainability by relying on a single well maintained package rather than one reliant on the user.

In cases where the default create-react-app was not suited to the boilerplate, we used craco to override aspects of react-scripts where applicable.

You can still eject react-scripts if that still fits your use case. But you must edit its configuration to match the craco overrides.

Further Info

This forum post does not contain all the information regarding this boilerplate. If you wish to learn more about its features and focuses please visit the linked GitHub repository.

PLEASE POST ANY ISSUES OR ENHANCEMENTS AT THE LINKED REPOSITORY

11 Likes
2

Thanks, will be using this

3

Another great release from PE, keep it up guys!

1 Like
4

My UseCase is to show the current speed of a vehicle in the React UI.
Is it better to use " useNuiEvent" or " fetchNui" for this UseCase?
I am a bit confused about choosing the correct and optimised way for getting this information form the client.lua script.
Already I tried it with both ways and both ways were possible. But what is the performance optimised way for this case?

Way 1:

const MyComp: React.FC = () => {
  const [speed, setSpeed] = useState('')
  
  useNuiEvent<string>('myAction', (data) => {
    setState(data)
  })
  
  return(
      <p>{speed}</p>
  )
}

or Way 2:

fetchNui<ReturnData>('getSpeed').then(retData => {
  setClientData(retData)
}).catch(e => {
  console.error('Setting mock data due to error', e)
  setClientData({ speed: 0})
})
5

In this case, there isn’t a specific “correct” way of doing it, but if you’re updating this in a set interval, I would suggest leaning towards the useNuiEvent hook rather than the fetchNui approach.

Reason being that fetchNui, in general, requires more handling on both the NUI side and the client side and subsequently more code.

Also as a general rule, you should use fetchNui whenever you need to fetch data as a result of direct user interaction in NUI, while you should utilize useNuiEvent for anything that updates passively independently of any specific user interaction.

6

thx for your answer. That helped me a lot to reach out the best practise :slight_smile:

7

Hi i need to change font in project with google font but it generate

access-control-allow-origin: http://localhost:40120

how i can fix it