DEV Community: Justin Martin

FiveM - resource hot reload

Justin Martin — Fri, 13 Dec 2024 20:48:50 +0000

One repetitive task often disrupts you when you developing your FiveM resource: the resource reloading.

Indeed each time you make a change to your code, you need to run restart <resName> in the FiveM console inside the game. This process, while functional, is a time sink that adds up, especially when working on complex projects.

Wouldn't it be great if FiveM development could adopt a similar hot-reload mechanism of webapp? Let’s dive into the problem and explore how to create a hot-reload solution.

Conception

To run restart <resName> command, we can use the method ExecuteCommand provided by FiveM inside resource scripts. We also need an entry point to trigger this restart. In my side, I choose an http server (but other type of server can work).

My JS Hot-reload source code

I did it in JS because it's my main language but you can do it with Lua or C#.

TAKE CARE: Give the right permissio needed to run restart command //todo

const http = require("http");

// Set the port for the HTTP server
const PORT = 3000;

// Create the HTTP server
const server = http.createServer((req, res) => {
  console.log("url", req.url);

  if (req.method !== "POST" || !req.url?.startsWith("/restart?resource=")) {
    res.writeHead(400, { "Content-Type": "text/plain" });
    res.end("Invalid request");
    return;
  }

  const resource = new URLSearchParams(req.url.split("?")[1]).get("resource");

  console.log("Resource to restart:", resource);

  if (resource !== "hot-reload") {
    ExecuteCommand(`restart ${resource}`);
  }

  // Handle the response
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("Resource restarted");
});

// Start the server
server.listen(PORT, "0.0.0.0", () => {
  console.log(`HTTP Server running on port ${PORT}`);
});

How to detect when trigger hot-reload

For people using Javascript or Typescript, I assume you have a bundler tool like explained in this article

You can easily create a custom plugin to do it

function pluginTriggerFivemResourceRestart() {
  return {
    name: "trigger-fivem-resource-restart", // Name of the plugin
    closeBundle() {
      const resourceName = "<resName>"

      // Restart the resource by make a POST request with JSON data
      fetch(`http://localhost:3000/restart?resource=${resourceName}`, {
        method: "POST",
      });
    },
  };
}

For lua resource, a simple "watcher" like glob-watcher to check changes for *.lua files and run fetch request on change is "sufficient"

To go further

If you are in PNPM workspace with multiple typescript resources dependent on each other, you will find a way to create an efficient watch mode to automize dependencies rebuild.

FiveM x Prisma ORM

Justin Martin — Wed, 11 Sep 2024 16:08:50 +0000

⚠️ We are speaking about JavaScript/TypeScript FiveM server ⚠️⚠️

FiveM is a modification for Grand Theft Auto V enabling you to play multiplayer on customized dedicated servers, powered by Cfx.re.

When you develop a FiveM server, it’s classic to use a database to store player data, and all other persistent information.

To use database in server-side code, FiveM community created multiple connectors :

fivem-async-mysql
oxmysql
…

All of these connectors provide methods to execute raw queries like :

const response = await MySQL.query('SELECT `firstname`, `lastname` FROM `users` WHERE `identifier` = ?', [
  identifier
])

There are 2 main problems with this way of interacting with the database :

Dev has to parse the response to type it with a good model
Query are not validated in face of database schema before execution

These pain points are resolved using ORM, they allow you to describe your models, it will manage type checking. In this article, we will see how to integrate Prisma ORM inside FiveM.

The FiveM resource folder I will use in my article is a pnpm workspace. It allows managing multiple packages with shared code.

├── player-manager
│   └── prisma
│     │   ├── player.schema.prisma
│   │   └── package.json // @player-manager/prisma package
│     └── server
│     │   ├── server.ts
│   │   └── package.json // @player-manager/server package
│   └── fxmanifest.lua
├── lib
│   └── prisma-orm.  // @lib/prisma-orm package
│          ├── package.json
│          └── ... 
├── package.json
└── pnpm-worspace.yml

Split prisma schema

In prisma-orm folder setup Prisma following the Getting started. Firstly, we will change to split the Prisma schema into multiple source.

To do this, we will use the merge-prisma-schema tool. It will be used to merge schema fragments spread into multiples modules

merge-prisma-schema.config.ts

const config = {
  schemas: [
    "header.prisma",
    "@player-manager/prisma/player.schema.prisma",
  ],
  output: "prisma/schema.prisma",
  schemaSearchFolders: ["node_modules", "prisma"],
  prismaCli: "npx prisma",
};

export default config;

header.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider      = "prisma-client-js"
  engineType    = "binary"
  binaryTargets = ["windows"]
  output        = "C:/gta-fivem/txData/CFXDefaultFiveM_8AE314.base/resources/lib/prisma-orm/prisma/generated"
}

datasource db {
  provider = "sqlite"
  url      = "file:C:/gta-fivem/txData/CFXDefaultFiveM_8AE314.base/resources/dev.db"
}

inside @player-module the file player.schema.prisma

model Player {
  id          Int      @id @default(autoincrement())
  steamId     String   @unique 
  lastname    String
  firstname   String
  inventory   Inventory?
}

Update prisma-orm module package.json

{
  "name": "@lib/database",
  "version": "1.0.0",
  "scripts": {
    "--------- BUILD ---------": "--------- BUILD ---------",
    "pregenerate": "npx merge-prisma-schema && rm -rf ./prisma/generated",
    "generate": "prisma generate",
    "--------- MIGRATE ---------": "--------- MIGRATE ---------",
    "premigrate": "npx merge-prisma-schema",
    "migrate": "prisma migrate"
  },
  "devDependencies": {
    "@player-manager/prisma": "workspace:*",
    "merge-prisma-schema": "^1.0.0",
    "prisma": "catalog:",
    "ts-node": "catalog:",
    "typescript": "catalog:",
  },
  "dependencies": {
    "@prisma/client": "catalog:"
  }
}

If you run npx pregenerate it update the prisma.schema file like this :

// Generated at 2024-09-07T20:46:01.740Z by "merge-prisma-schema"

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider      = "prisma-client-js"
  engineType    = "binary"
  binaryTargets = ["windows"]
  output        = "C:/gta-fivem/txData/CFXDefaultFiveM_8AE314.base/resources/lib/database/prisma/generated"
}

datasource db {
  provider = "sqlite"
  url      = "file:C:/gta-fivem/txData/CFXDefaultFiveM_8AE314.base/resources/dev.db"
}

model Player {
  id          Int      @id @default(autoincrement())
  steamId     String   @unique 
  lastname    String
  firstname   String
  inventory   Inventory?
}

Generate prisma runtime

We will use npx generate to create the Prisma runtime, as the documentation explains. After generating, we will use a script to modify the file index.js which has been generated. To do it will use the package tsx.

package.json

{
  "name": "@lib/prisma-orm",
  "version": "1.0.0",
  "scripts": {
    "--------- BUILD ---------": "--------- BUILD ---------",
    "pregenerate": "npx merge-prisma-schema && rm -rf ./prisma/generated",
    "generate": "prisma generate",
    "postgenerate": "npx tsx patch-generated-runtime.ts",
    "--------- MIGRATE ---------": "--------- MIGRATE ---------",
    "premigrate": "npx merge-prisma-schema",
    "migrate": "prisma migrate"
  },
  "devDependencies": {
    "@player-manager/prisma": "workspace:*",
    "merge-prisma-schema": "^1.0.0",
    "prisma": "catalog:",
    "ts-node": "catalog:",
    "typescript": "catalog:",
  },
  "dependencies": {
    "@prisma/client": "catalog:"
  }
}

patch-generated-runtime.ts

import { readFileSync, writeFileSync } from "fs";
import { join } from "path";

const toReplace = `
  const alternativePath = alternativePaths.find((altPath) => {
    return fs.existsSync(path.join(process.cwd(), altPath, 'schema.prisma'))
  }) ?? alternativePaths[0]

  config.dirname = path.join(process.cwd(), alternativePath)
  config.isBundled = true
`;

const replaceValue = `
  const alternativePath = alternativePaths.find((altPath) => {
    return fs.existsSync(path.join(process.cwd(), altPath, 'schema.prisma'))
  }); 

  if(alternativePath) {
    config.dirname = path.join(process.cwd(), alternativePath)
  } else if(config?.generator?.output?.value) {
    config.dirname = config.generator.output.value;
  } else {
    config.dirname = path.join(process.cwd(), alternativePaths[0]);
  }

  config.isBundled = true  
`;

const file = join(process.cwd(), 'prisma', 'generated', 'index.js');

const indexContent = readFileSync(file, { encoding: 'utf-8'});

const newIndexContent = indexContent.replace(toReplace, replaceValue);

writeFileSync(file, newIndexContent);

With the patch, Prisma directory will be defined with the output property set in schema.prisma

Bundle prisma client

As FiveM works only with commonjs bundled files, we will use rollup to create a compatible built code. This code will be shared with other packages/resources.

rollup.config.mjs

import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";

const banner = `
  const { resolve, join } = require("path");
  const { cwd } = require("process");

  var __dirname = resolve();
  var __filename = join(__dirname, "index.js");

  process.env["PRISMA_QUERY_ENGINE_BINARY"] = join(cwd(), "resources", "lib", "prisma-orm", "prisma", "generated", "query-engine-windows.exe");
`;

export default {
  input: "./index.ts",
  output: {
    dir: "dist",
    format: "cjs",
    sourcemap: false,
    banner,
  },
  plugins: [resolve(), typescript(), commonjs()],
};

With this config, we create a bundle and prefix it with some critical information :

__dirname and __filename do not exist in FiveM node execution context, so we define it manually because it’s needed by Prisma.
process.env["PRISMA_QUERY_ENGINE_BINARY"] is the location of query engine executable generated inside Prisma runtime folder

Example of use

Inside @player-manager/server which is a Typescript package with rollup config explained here, I add @lib/prisma-orm to the dependencies.

server.ts

import { prisma } from "@lib/database"

on("onResourceStart", async (resName: string) => {
  if (resName === GetCurrentResourceName()) {
    const players = await prisma.player.findMany();
    console.log("players", JSON.stringify(players))
  }
});

You can retrieve a full example here https://github.com/JustinMartinDev/experimental-rp

FiveM x TypeScript

Justin Martin — Sun, 08 Sep 2024 01:53:32 +0000

FiveM is a modification for Grand Theft Auto V enabling you to play multiplayer on customized dedicated servers, powered by Cfx.re.

When you develop a FiveM server, you can create resource. Theses resources can be write in multiple langage Lua, C# and JavaScript. In this article we are going to see how to build a resource using TypeScript

Type :

For typing our code, we will use two packages provided by CFX.re the company behind FiveM

@citizenfx/client
@citizenfx/server

These packages provided types for each native method usable inside client-side or server-side code.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    // Location
    "outDir": "./dist",
    // Other
    "types": ["@citizenfx/client", "@types/node"],
    "lib": ["ES2020"],
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["**/node_modules", "**/.test.ts"]
}

Bundle :

After the compilation of .ts files, you will have to create a bundle which going to be loaded and ran by FiveM server. Indeed, FiveM only allows require of native node.js package like path, fs, …

To do it, we use the tool named rollup, it’s a JavaScript module bundler based on plugin system. I also explored other tools like vite, rspack, but it’s too complicated. An other tool which offers good performance will be turbopack a tool behind next bundling but it still inside next for the moment.

rollup.config.mjs

import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";

export default {
  input: "src/index.ts",
  output: {
    dir: "dist",
    format: "cjs",
    sourcemap: false,
  },
  plugins: [resolve(), typescript(), commonjs()],
};

package.json :

{
  ...
  "devDependencies": {
    "@citizenfx/client": "2.0.9282-1",
    "@rollup/plugin-commonjs": "^26.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "@types/node": "^20.14.12",
    "rollup": "^4.20.0",
    "tslib": "^2.6.3",
    "typescript": "^5.5.4"
  },
  ...
}

Exemple

init.ts

import { join } from "path"

export const init = () => {
    console.log("inited", join(".", "init.js"));
}

index.ts

import { init } from "./init"

on("onResourceStart", async (resName: string) => {
  if (resName === GetCurrentResourceName()) {
    init();
  }
});

After running rollup -c, you will have only one file :

'use strict';

var path = require('path');

const init = () => {
    console.log("inited", path.join(".", "init.js"));
};

on("onResourceStart", async (resName) => {
    if (resName === GetCurrentResourceName()) {
        init();
    }
});

NestJS-TypeORM Listener & Subscriber

Justin Martin — Thu, 02 Jun 2022 05:58:53 +0000

NestJS est devenu un incontournable pour créer des API efficaces et stables, tout en fournissant au développeur un environnement de développement très complet. Les “entity listeners” et les “subscribers” font partie de ses outils peu connus et pourtant pouvant être très utile.

Les entity listeners et les subscribers permettent d’attacher l’exécution d’une fonction à un événement.

Entity listener:

Pour initialiser les listeners on utilise un decorator, et une méthode directement au sein de la déclaration de l’entité. Voici la liste des décorateurs disponible : @AfterLoad, @BeforeInsert, @AfterInsert, @BeforeUpdate, @AfterUpdate, @BeforeRemove, @AfterRemove, @BeforeSoftRemove, @AfterSoftRemove, @BeforeRecover, @AfterRecover.

Un des cas d’usage classique de “entity listeners” concerne le hachage automatique du mot de passe. En effet, avant d’insérer un compte dans la base de données, on va hacher son mot de passe.

account.entity.ts

@Entity()
export class Account extends BaseEntity {
  @Column({ length: 100, select: false })
  password!: string;

  @Column({ length: 100 })
  email!: string;

  @BeforeInsert
  autoHashPassword(): void {
        this.password = bcrypt.hashSync(this.password, SALT_ROUNDS);
  }
}

Cependant les entity listener ont une limitation relativement importante, on ne peut pas faire de call à la base de données dans notre listener. Pour effectuer ce genre de call il faut utiliser les subscribers.

Subscribers :

Pour mettre en place un subscribers on doit créer une nouvelle classe implémentant l’interface EntitySubscriberInterface et une fois de plus utiliser un décorateur. Une fois dans notre classe, il suffit de créer des méthodes avec un nom spécifique comme : afterInsert, beforeInsert, …

Par exemple, si ont souhaite notifier tous les utilisateurs de la création d’un nouveau compte:

account.subscriber.ts :

@Injectable()
@EventSubscriber()
export class AccountSubscriber implements EntitySubscriberInterface<Account> {
  constructor(
    private readonly connection: Connection, 
    private readonly notificationService: NotificationService
  ) {
    connection.subscribers.push(this);
    Logger.log(`Subscriber Account initialized`);
  }

  listenTo(): typeof Account {
    return Account;
  }

  afterInsert = async (event: InsertEvent<Account>): Promise<void> => {
    const newAccountMail = event.entity.email; 
    const emailsToNotify = await event.manager.find(Account, { where: { email: Not(newAccountMail)}});
    await notificationService.sendEmail(
      emailsToNotify,
      "Nouvelle utilisation",
      `Salut un nouvel utilisateur nous a rejoint, vous pouvez le contacter ici: ${newAccountMail}` 
    );
  };
}

Pour aller plus loin :

Pour qu’un subscriber fonctionne il faut indiquer à TypeORM de le prendre en compte. Si vous utilisez la même syntaxe que moi, c’est fait automatique par le constructeur via cette instruction connection.subscribers.push(this);. De plus, cette méthode vous permet d’utiliser des services dans votre subscriber.

Cependant, si vous voulez procéder manuellement à l’enregistrement des subscribers, il vous faudra supprimer l’instruction `

connection.subscribers.push(this); puis ajouter subscribers=[/dist/**/*.subscriber.js] dans votre configuration.

source:

React.js - Indicateur de "force" d'un mot de passe

Justin Martin — Fri, 04 Feb 2022 19:12:24 +0000

Pour sécuriser les mots de passe, on demande souvent à l’utilisateur d’utiliser un mot de passe “complexe” en ajoutant par exemple une majuscule, un caractère spécial ou un chiffre. Cependant, ces méthodes ne permettent pas de créer un mot de passe aussi sécurisé qu’on le pense.

Par exemple, le mot de passe: [Password1234] réponds à toutes ces règles, cependant il est l’un des plus testés lors des attaques.

Comment faire alors ?

L’une des solutions pour créer un processus de validation de mot de passe fiable est d’utiliser une librairie comme zxcvbn-ts (https://zxcvbn-ts.github.io/zxcvbn/). Cette librairie permet d’estimer la complexité d’un mot de passe et ainsi d’empêcher l’utilisateur d’utiliser un mot de passe jugé trop faible.

Implémentation en React.js

L’idée est de calculer le score du mot de passe indiqué par l’utilisateur et en fonction de ce score affiché les indicateurs qui correspondent :

App.tsx :

import React, { useEffect, useState } from "react";
import { zxcvbn } from "@zxcvbn-ts/core";

import { Indicators } from "./components/Indicators";

import "./App.css";

interface Indicator {
  score: number;
}

const App = () => {
  const [password, setPassword] = useState("");
  const [indicator, setIndicator] = useState<Indicator>({ score: -1 });

  useEffect(() => {
    if (password === "") return;

    setIndicator(zxcvbn(password));
  }, [password]);

  const { score } = indicator;

  return (
    <div className="d-block mx-4">
      <div className="position-relative mt-3">
        <label htmlFor="password-input" className="mr-2">
          Mot de passe
        </label>
        <input
          is="password-input"
          type="password"
          onChange={(event) => setPassword(event.target.value)}
          value={password}
          placeholder={"**********"}
        />
        {password !== "" && <Indicators score={score} />}
      </div>
    </div>
  );
};

export default App;

Indicators.tsx

import React from "react";

const colors = {
  0: "#e5e5e5",
  1: "#9B2C2C",
  2: "#D44949",
  3: "#DCA02D",
  4: "#387F95",
  5: "#48AE65"
};

const getColor = (power, index) => {
  if (power > index) {
    return colors[power];
  }
  return colors[0];
};

const indicatorIndexes = [0, 1, 2, 3, 4];

const Indicators = ({ score }: { score: number }) => (
  <div className="mt-2 indicator-container">
    {indicatorIndexes.map((indicatorIndex, index) => (
      <div
        className="indicator"
        key={indicatorIndex}
        style={{ backgroundColor: getColor(score + 1, indicatorIndex) }}
      />
    ))}
  </div>
);

export { Indicators };

App.css

.indicator {
  height: 4px;
  border-radius: 4px;
  width: 15%;
  margin-right: 8px;
}

.indicator-container {
  flex-direction: row;
  display: flex;
}

Pour allez plus loin

A présent, on va ajouter des options dans notre validation. Avec pour objectif pour rendre notre validation de mot de passes plus sécurisé. On va aussi ajouter des suggestions pour indiquer à l’utilisateur comment rendre son mot de passe plus fort.

App.tsx :

import React, { useEffect, useState } from "react";
import { zxcvbn, ZxcvbnOptions } from "@zxcvbn-ts/core";
import zxcvbnCommonPackage from "@zxcvbn-ts/language-common";
import zxcvbnFrPackage from "@zxcvbn-ts/language-fr";
import { FeedbackType } from "@zxcvbn-ts/core/dist/types";

import { Indicators } from "./components/Indicators";
import { Suggestions } from "./components/Suggestions";

import "./App.css";

const options = {
  translations: zxcvbnFrPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnFrPackage.dictionary
  }
};

ZxcvbnOptions.setOptions(options);

interface Indicator {
  score: number;
  feedback: FeedbackType;
}

const App = () => {
  const [password, setPassword] = useState("");
  const [indicator, setIndicator] = useState<Indicator | null>();

  useEffect(() => {
    if (password === "") return;

    setIndicator(zxcvbn(password));
  }, [password]);

  const score = indicator ? indicator.score : -1;
  const feedback = indicator ? indicator.feedback : undefined;

  return (
    <div className="d-block mx-4">
      <div className="position-relative mt-3">
        <label htmlFor="password-input" className="mr-2">
          Mot de passe
        </label>
        <input
          is="password-input"
          type="password"
          onChange={(event) => setPassword(event.target.value)}
          value={password}
          placeholder={"**********"}
        />
        {password !== "" && <Indicators score={score} />}
        {feedback && feedback.warning.length > 0 && (
          <Suggestions suggestions={feedback.suggestions} />
        )}
      </div>
    </div>
  );
};

export default App;

Suggestions.tsx

import React from "react";

const Suggestions = ({ suggestions }: { suggestions: string[] }) => (
  <ul>
    {suggestions.map((suggestion, index) => (
      <li key={suggestion}>{suggestion}</li>
    ))}
  </ul>
);

export { Suggestions };

Lien codesandbox:

https://codesandbox.io/s/password-zxcvbn-react-ts-3lt0q