Basic Lua & React (TypeScript) boilerplate for FiveM

Overview
Material-UI logo

FiveM React and Lua Boilerplate

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

license Discord David Dependabot Status

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.

Features

This boilerplate comes with some utilities and examples to work off of.

Lua Utils

SendReactMessage

This is a small wrapper for dispatching NUI messages. This is designed to be used with the useNuiEvent React hook.

Signature

--[email protected] action string The action you wish to target
--[email protected] data any The data you wish to send along with this action
SendReactMessage(action, data)

Usage

SendReactMessage('setVisible', true)

debugPrint

A debug printing utility that is dependent on a convar, if the convar is set this will print out to the console.

The convar is dependent on the name given to the resource. It follows this format YOUR_RESOURCE_NAME-debugMode

To turn on debugMode add +setr YOUR_RESOURCE_NAME-debugMode 1 to your server.cfg or use the setr console command instead.

Signature (Replicates print)

--[email protected] ... any[] The arguments you wish to send
debugPrint(...)

Usage

debugPrint('wow cool string to print', true, someOtherVar)

React Utils

Signatures are not included for these utilities as the type definitions are sufficient enough.

useNuiEvent

This is a custom React hook that is designed to intercept and handle messages dispatched by the game scripts. This is the primary way of creating passive listeners.

Note: For now handlers can only be registered a single time. I haven't come across a personal usecase for a cascading event system

Usage

const MyComp: React.FC = () => {
  const [state, setState] = useState('')
  
  useNuiEvent<string>('myAction', (data) => {
    // the first argument to the handler function
    // is the data argument sent using SendReactMessage
    
    // do whatever logic u want here
    setState(data)
  })
  
  return(
    <div>
      <h1>Some component</h1>
      <p>{state}</p>
    </div>
  )
}

fetchNui

This is a simple NUI focused wrapper around the standard fetch API. This is the main way to accomplish active NUI data fetching or for trigger NUI callbacks in the game scripts.

When using this, you must always at least callback using {} in the gamescripts.

This can be heavily customized to your use case

Usage

// First argument is the callback event name. 
fetchNui<ReturnData>('getClientData').then(retData => {
  console.log('Got return data from client scripts:')
  console.dir(retData)
  setClientData(retData)
}).catch(e => {
  console.error('Setting mock data due to error', e)
  setClientData({ x: 500, y: 300, z: 200})
})

debugData

This is a function allowing for mocking dispatched game script actions in a browser environment. It will trigger useNuiEvent handlers as if they were dispatched by the game scripts. It will only fire if the current environment is a regular browser and not CEF

Usage

// This will target the useNuiEvent hooks registered with `setVisible`
// and pass them the data of `true`
debugData([
  {
    action: 'setVisible',
    data: true,
  }
])

Misc Utils

These are small but useful included utilities.

  • isEnvBrowser() - Will return a boolean indicating if the current environment is a regular browser. (Useful for logic in development)

Development Workflow

This boilerplate was designed with development workflow in mind. It includes some helpful scripts to accomplish that.

Hot Builds In-Game

When developing in-game, you can use the hot build system by running the start:game script. This is essentially the start script but it writes to disk. Meaning all that is required is a resource restart to update the game script

Usage

# yarn
yarn start:game
# npm
npm run start:game

Production Builds

When you are done with development phase for your resource. You must create a production build that is optimized and minimized.

You can do this by running the following:

npm run build
yarn build 

Additional Notes

Need further support? Join our Discord!

Comments
  • Update @types/node: 16.9.1 → 16.11.6 (minor)

    Update @types/node: 16.9.1 → 16.11.6 (minor)

    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @​types/node (16.9.1 → 16.11.6) · Repo

    Sorry, we couldn't find anything useful about this release.


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 3
  • feat(web): vite

    feat(web): vite

    Pull Request Description

    Using Vite instead of craco for faster dev server startup and building times, the boilerplate is generated using Vite's create cli.

    Pull Request Checklist:

    • [X] Have you followed the guidelines in our contributing document and Code of Conduct?
    • [X] Have you checked to ensure there aren't other open for the same update/change?
    • [X] Have you built and tested the resource in-game after the relevant change?
    dependencies discussion 
    opened by LukeWasTakenn 2
  • Bug: Css hover elements with delay

    Bug: Css hover elements with delay

    All elements with hover selector has a delay to disappear from screen

    To Reproduce

    Steps to reproduce the behavior:

    1. Create any element with hover selector on css
    2. Press esc or backspace
    opened by FelipeLiraDev 2
  • Update fxmanifest.lua

    Update fxmanifest.lua

    I personally used your resource for a long time and noticed over several builds that the react build folder was increasing and each build and the resource streamer of fivem in according with your fxmanifest was always streaming all the build folder. After the changes I made to the manifest it went from 300mb to 7mb in my case with significative decrease in terms of storage and streaming speed and script environment for fivem.

    opened by kratess 2
  • Update @types/node: 16.9.1 → 16.11.9 (minor)

    Update @types/node: 16.9.1 → 16.11.9 (minor)

    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @​types/node (16.9.1 → 16.11.9) · Repo

    Sorry, we couldn't find anything useful about this release.


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 2
  • Update @testing-library/react: 12.0.0 → 12.1.0 (minor)

    Update @testing-library/react: 12.0.0 → 12.1.0 (minor)

    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @​testing-library/react (12.0.0 → 12.1.0) · Repo · Changelog

    Release Notes

    12.1.0

    12.1.0 (2021-09-11)

    Features

    Does any of this look wrong? Please let us know.

    Commits

    See the full diff on Github. The new version differs by 6 commits:


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 2
  • Update @types/node: 16.4.0 → 16.6.2 (minor)

    Update @types/node: 16.4.0 → 16.6.2 (minor)


    Welcome to Depfu 👋

    This is one of the first three pull requests with dependency updates we've sent your way. We tried to start with a few easy patch-level updates. Hopefully your tests will pass and you can merge this pull request without too much risk. This should give you an idea how Depfu works in general.

    After you merge your first pull request, we'll send you a few more. We'll never open more than seven PRs at the same time so you're not getting overwhelmed with updates.

    Let us know if you have any questions. Thanks so much for giving Depfu a try!


    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @​types/node (16.4.0 → 16.6.2) · Repo

    Sorry, we couldn't find anything useful about this release.


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 2
  • feat(prettier): add prettier options

    feat(prettier): add prettier options

    I'm adding prettier options, because nowadays almost everybody uses Prettier.

    Pull Request Checklist:

    • [x] Have you followed the guidelines in our contributing document and Code of Conduct?
    • [x] Have you checked to ensure there aren't other open for the same update/change?
    • [x] Have you built and tested the resource in-game after the relevant change?
    opened by GitScorz 1
  • Depfu Error: No dependency files found

    Depfu Error: No dependency files found

    Hello,

    We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

    Monorepos

    Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

    How to deactivate the project

    • Go to the Settings page of either your own account or the organization you've used
    • Go to "Installed Integrations"
    • Click the "Configure" button on the Depfu integration
    • Remove this repo (project-error/fivem-react-boilerplate-lua) from the list of accessible repos.

    Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

    If you think that this is a mistake

    Please let us know by sending an email to [email protected].


    This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

    opened by depfu[bot] 1
  • Update @types/react: 17.0.35 → 17.0.38 (patch)

    Update @types/react: 17.0.35 → 17.0.38 (patch)

    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @​types/react (17.0.35 → 17.0.38) · Repo

    Sorry, we couldn't find anything useful about this release.


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 1
  • Update @types/node: 16.11.9 → 16.11.13 (patch)

    Update @types/node: 16.11.9 → 16.11.13 (patch)

    Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ @​types/node (16.11.9 → 16.11.13) · Repo

    Sorry, we couldn't find anything useful about this release.


    Depfu Status

    Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

    All Depfu comment commands
    @​depfu rebase
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    @​depfu pause
    Ignores all future updates for this dependency and closes this PR
    @​depfu pause [minor|major]
    Ignores all future minor/major updates for this dependency and closes this PR
    @​depfu resume
    Future versions of this dependency will create PRs again (leaves this PR as is)
    depfu 
    opened by depfu[bot] 1
  • fix(web): transparent background

    fix(web): transparent background

    Pull Request Description

    Users having issue with white background over the UI so I added transparent to the index.css https://discord.com/channels/791854454760013827/795438488610537552/980474391093727256

    Pull Request Checklist:

    • [x] Have you followed the guidelines in our contributing document and Code of Conduct?
    • [x] Have you checked to ensure there aren't other open for the same update/change?
    • [x] Have you built and tested the resource in-game after the relevant change? (user tested it for me https://discord.com/channels/791854454760013827/795438488610537552/980476964567679017)
    opened by SamShanks1 1
Releases(v3.0.0)
  • v3.0.0(Jan 4, 2022)

  • v2.0.0(Dec 6, 2021)

    Commits

    • 8aaf46c: Update @types/react to version 17.0.24 (depfu[bot]) #42
    • b4417fc: Update @types/node to version 16.9.1 (depfu[bot]) #39
    • de4b4d3: Update @testing-library/react to version 12.1.2 (depfu[bot]) #43
    • a625b72: Update typescript to version 4.4.4 (depfu[bot]) #45
    • f2f1234: Update web-vitals to version 2.1.2 (#44) (depfu[bot]) #44
    • 4997ea7: Update @types/react-dom to version 17.0.11 (#47) (depfu[bot]) #47
    • 5a9bd14: Update @types/react to version 17.0.33 (#46) (depfu[bot]) #46
    • bba65f6: Update @testing-library/jest-dom to version 5.15.0 (depfu[bot]) #49
    • 973efac: Update typescript to version 4.5.2 (depfu[bot]) #50
    • 43ead44: Update @types/react to version 17.0.35 (depfu[bot]) #52
    • f2c11a3: Update @types/node to version 16.11.9 (depfu[bot]) #51
    • web/visibility: Add visibility provider instead of independent hook (Taso)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Sep 24, 2021)

    Chores

    • deps: bump @types/react from 17.0.13 to 17.0.14 in /web (#2) #2 (dependabot[bot])
    • deps: bump @types/react-dom from 17.0.8 to 17.0.9 in /web (#3) #3 (dependabot[bot])
    • deps: bump @testing-library/react from 11.2.7 to 12.0.0 in /web (#7) #7 (dependabot[bot])
    • deps: bump @types/node from 12.20.16 to 16.4.0 in /web (#14) #14 (dependabot[bot])
    • deps: bump web-vitals from 1.1.2 to 2.1.0 in /web (#5) #5 (dependabot[bot])
    • dependabot: remove dependabot for depfu (Taso)

    Commits

    • 3b2e018: debugPrint prints a nil. (brentN5) #8
    • readme: Fix amazing grammar (Taso)
    • b425af5: await JSON response (xDreamLand) #11
    • bbfdc2b: Update @types/react to version 17.0.18 (depfu[bot]) #34
    • 152d2ad: Update typescript to version 4.4.2 (depfu[bot]) #38
    • 1f2c157: Update @types/react to version 17.0.19 (depfu[bot]) #37
    • 131e7a3: Update @types/node to version 16.6.2 (depfu[bot]) #36
    • e0cbb05: Update typescript to version 4.4.3 (depfu[bot]) #41
    • a92ae3a: Update @testing-library/react to version 12.1.0 (depfu[bot]) #40
    Source code(tar.gz)
    Source code(zip)
Owner
Project Error
Project Error, a meme organization.
Project Error
NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

null 2 Nov 7, 2022
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

Basic Next.js boilerplate ready to use in any type of websites. View demo » My L

Matheus Alvarenga de Oliveira 48 Jun 29, 2022
Basic VITO Typescript project boilerplate

cra-template-vitotypescript This is the official VITO TypeScript template for Create React App. To use this template, add --template vitotypescript wh

null 1 Dec 24, 2021
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

React Avançado 26 Dec 4, 2022
This is a template for a Typescript-powered, redux-equipped, React application template supported by Eslint and other basic rules.

Getting Started with React-TS-Redux-App This project was bootstrapped with Create React App. What is it This is a template for Typescript powered, red

Sachintha 2 Oct 25, 2021
Palo-mern-boilerplate - A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly. Commands: npm install # install b

Jim 10 Oct 31, 2022
A simple Ethereum prediction market boilerplate build on top of Moralis Web3 SDK + Ethereum Boilerplate + Chainlink + OpenZeppelin. Happy BUIIDL!

ethereum-prediction-market-boilerplate This Project is a fork of Ethereum Boilerplate and demostrates how you can build your own Ethereum Prediction M

Ethereum Boilerplates 40 Nov 25, 2022
Solana-boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping

Solana Boilerplate Lightweight boilerplate for Solana dapps. Allows quick buildi

null 21 Nov 15, 2022
hopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate

Shopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate, but moved it to Typescript, and more modularized, so you can use any frontend framework you want. I left it comes by default, with React.

Leonel Aimar 10 Dec 5, 2022
This project is a React Starter Kit with basic tools and examples of their use.

Welcome React Starter Kit! This project is a React Starter Kit with basic tools and examples of their use. Tools used React: V17 react-hook-form: V7 r

Harold Velez Castaño 1 Oct 27, 2021
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Christian José Torrealba Rondón 4 Nov 11, 2022
An NFT Marketplace React dApp demo on the Polygon blockchain with basic functionalities such as acquire and mint NFTs using ERC721 Smart Contract and Interplanetary File System IPFS.

Polygon-NFT-marketplace generated from jellydn/dapp-starter Opinionated Dapp Starter Template Homepage - Marketplace NFT Minting Features The React Fr

null 129 Dec 31, 2022
React/Redux basic CRUD with persistent state, demo->

React/Redux basic CRUD example This little app was made to test a basic CRUD for a webpapp. This was done thinking on a mobile or chrome application s

Cristian Szwarc 28 May 27, 2022
Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optized code.

Tombola Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optimized c

null 3 Dec 30, 2021
Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet

cronos-dapp-basic Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet You need to have node version 14

Acclrate 1 Dec 27, 2021
Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries.

Math Magicians Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. Screen

Ranjeet Singh 12 Oct 20, 2022
Nft-marketplace - Reactjs And Smart Contracts Open Source Basic Nft Marketplace App

Open Source Nft Marketplace [Onprogress %1] Reactjs And Smart Contracts Open Sou

Özgür 281 Dec 29, 2022
FlashCards - A basic flash card with a circular slider to pick the answer

Demo demo.mp4 Getting Started with Create React App This project was bootstrappe

null 2 May 19, 2022