fivem-typescript-boilerplate

This repository is a basic boilerplate for getting started with TypeScript resources in FiveM. This boilerplate only comes with development dependencies needed for FiveM-centered TypeScript transpilation, the rest is up to you.

Note: This boilerplate is targeting TypeScript in context of game-scripts, if you wish to use TypeScript in NUI, take a look at our other boilerplate

Foreword

This boilerplate was originally based off a previous popular TypeScript boilerplate, made by d0p3t. He heartbeakingly passed in 2021, leaving the original unmaintained. This boilerplate was an up-to-date alternative.

Since then, this boilerplate has been updated to take advantage of tooling progress made in the greater NPM ecosystem.

Requirements

• Node > v16
• Yarn

Getting Started

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

Install Dependencies

Navigate into the newly cloned folder and execute the following command, to install dependencies.

npm i

Development

Hot Building

While developing your resource, this boilerplate offers a watch script that will automatically hot rebuild on any change within the client or server directories.

npm run watch

This script still requires you restart the resource for the changes to be reflected in-game

Entry Points

Client - ./client/client.ts

Server - ./server/server.ts

Production Build

Once you have completed the development phase of your resource, you must create an optimized & minimized production build, using the build script.

npm run build

Version < 2.0.0

Version 2.0.0 introduced ESBuild as the primary bundler, removing the option for automatic builds through the embedded FXServer webpack builder.

This documentation is preserved for legacy purposes.

Automatic Builds (Optional)

This is not recommended as the embedded version of yarn is ocassionally prone to performance and environment problems. We highly recomend, you manually run the build script

If desired, the fxmanifest.lua can be setup to allow for FXServer to automatically build on resource start. This utilizes the embedded yarn & webpack default resources.

To enable this, add the following to your fxmanifest.lua

dependency {
    'yarn',
    'webpack'
}

webpack_config 'webpack.config.js'

Additional Notes

Need further support? Join our Discord!