TypeScript
Manual installation of the fivem-compiler with TypeScript
Installing Dependencies
npm i @whitigol/fivem-compiler @citizenfx/client @citizenfx/server @types/node --save-devCreating Configuration Files
Compiler Configuration
Create a new file called wfm.config.ts in the root of your project. This will serve as the main configuration file for the compiler. Add the following content:
import { defineConfig } from "@whitigol/fivem-compiler";
export default defineConfig({
// Watch for file changes in the specified directories and subdirectories.
// This configuration allows targeted builds by specifying different scopes: server, client, or all files.
// Use these options with build flags such as --skip-server or --skip-client for more control.
watch: {
server: ["src/server/**/*.{lua,ts,js}"], // Files specific to the server-side codebase
client: ["src/client/**/*.{lua,ts,js}"], // Files specific to the client-side codebase
all: ["src/data/**/*", "src/stream/**/*"], // Shared files, including assets and data
},
// Define files or folders to copy from the project source to the output destination.
// Each entry specifies a source path (from) and a destination path (to), relative to the project and output roots.
//! DO NOT USE A LEADING SLASH — IT WILL BREAK THE BUILD!
copy: [
{
from: "src/stream/**/*", // Directory containing files for FiveM's streaming functionality (e.g., models, textures)
to: "stream", // Target location in the root of the output directory
},
{
from: "src/data/**/*", // Directory for configuration or supplemental data files
to: "data", // Target location in the root of the output directory
},
/*
{
* Single File Example
from: "src/nested/single-file.txt", // Specify the exact file to copy
to: "into/any/path/from/resource/root/filename.txt", // Target path including filename
? Note: If you change the filename in the "to" path, it will rename the file after moving it.
},
*/
],
// Skips moving files defined in the "copy" option during watch mode.
// This helps speed up build times in development, especially for large files
// (e.g., assets in the "stream" folder) that you only want to move during a build.
skipCopyDuringWatch: true,
//! WARNING: Minification is discouraged and may violate FiveM's Terms of Service. Use at your own risk.
//* Note: Minification is not supported for Lua files.
minify: false,
//! WARNING: Obfuscation is discouraged and may violate FiveM's Terms of Service. Use at your own risk.
//* Note: Obfuscation is not supported for Lua files.
obfuscate: false, //? Enabling this option may significantly increase build times.
// Configuration for the output resource directory.
resource: {
// Specify the root output directory for the final built resource.
//* NOTE: If the "OUTPUT_DIR" environment variable is defined, it will override this value.
//! DO NOT USE A LEADING SLASH — IT WILL BREAK THE BUILD!
directory: "resource",
},
});Language Definition
In the root of your project, create a new file named ts.wfm. This file tells the compiler to use TypeScript.
Project Structure
Project Source Folder
Create a src folder in the root of your project. This will be the base for organizing your code.
Client and Server Folders
Inside the src folder, create two subfolders: client and server. These will contain your client-side and server-side code.
TypeScript Configuration
Each side of your project needs its own tsconfig.json. Create one in both the client and server folders using the configs below.
{
"compilerOptions": {
"baseUrl": ".",
"noImplicitAny": true,
"module": "esnext",
"target": "es2021",
"lib": ["es2021"],
"types": ["@citizenfx/client", "@whitigol/fivem-compiler/client", "@whitigol/fivem-compiler/common"],
"moduleResolution": "bundler",
"resolveJsonModule": true,
"esModuleInterop": true,
"noEmit": true
},
"include": ["./", "../common", "@whitigol/fivem-compiler"]
}{
"compilerOptions": {
"baseUrl": ".",
"noImplicitAny": true,
"module": "esnext",
"target": "es2021",
"lib": ["es2021"],
"types": ["@citizenfx/server", "@types/node", "@whitigol/fivem-compiler/server", "@whitigol/fivem-compiler/common"],
"moduleResolution": "bundler",
"resolveJsonModule": true,
"esModuleInterop": true,
"noEmit": true
},
"include": ["./", "../common", "@whitigol/fivem-compiler"]
}Entry Points
Finally, create an index.ts file in both the client and server folders. These will serve as the entry point scripts for each environment.