Jump to content


   (1 review)

9 Screenshots

About This File


A perfect game mode to get started with if you're about to make a roleplay server!


This game mode is still work in progress, I will maintain and update it generally, plenty features are planned to be added so stay tunned!

At current state, this gamemode is perfect to be used as a boilerplate for you to start a rp server!

Built in:

Client side:

  • Typescript
  • Webpack

Server side

  • Typescript
  • Webpack
  • Typeorm
  • PostgreSQL


  • ReactTS
  • MobX


Current Features

  •  - Account system (Login/Register).
  •  - Character System (3 Available slots to create)
  •  - Inventory System
  •  - Notification system
  •  - Chat System
  •  - Command system


Getting started with setting up:

Database setup:
This code requires you to have PostgreSQL installed on your machine, read more at https://www.postgresql.org/
After installing PostgreSQL, connect to your database using PGAdmin or HeidiSQL and create a new database by executing a query like: 


After creating a database successfully, head back to the server files and edit .env by describing the database connection details there.
Once you're setup with that, simply start the server, and the TypeORM will start creating the required database tables on its own (see Database.module.ts for deeper info)


Code Structure:

├───config #contains webpack configuration files
│   └───src
│       ├───assets #contains assets such as page images or videos
│       ├───events #contains page events which can be called from the backend
│       ├───pages #contains pages
│       ├───stores #contains temporary stores
│       ├───styles #contains global styling
│       └───utils #contains useful code methods
├───source #contains backend code
│   ├───client #contains client-side code
│   ├───server #contains server-side code
│   └───shared #contains shared data between server and client
└───.env #contains database connection details


Getting started with development:


  1. After downloading the gamemode make sure you have an empty ragemp-server folder ready.
  2. Open the gamemode to your terminal and simply install the required packages executing 'npm install'
  3. After the packages are installed make sure you created the database explained above.
  4. Start server-side in development mode: Simply execute 'npm run watch:server' to start watching server side in development mode.
  5. Start client-side in development mode: Simply execute 'npm run watch:client' to start watching client side in development mode.


  1. Navigate to frontend folder in your terminal.
  2. Install the required packages executing 'npm install'
  3. Once packages are done installing simply run 'npm run build'
  4. Once the build is done, in client_packages create a folder named package2. (example: client_packages\package2)
  5. Drag and drop the built folder into package2. Your client-side folder should look like (client_packages\package2\build)
  6. Once you're done, start the server and that's pretty much it.


Github link: shr0x/ragemp-rp-gamemode: A startup rp script to make your way into making a rp server easier! (github.com)

More docs are in the github repo, also keep an eye since most of the updates will be published there first then will eventually be updated in this post.



Edited by shrox
github link (shows now gamemode instead of framework)

What's New in Version 0.0.5-RC2   See changelog



Frontend rework
Our frontend app now uses createContext for globally page setting which will make it easier later on to be able to set pages ('components') from inside other components.Example of using page setter/getter

import { FC, useCallback } from "react";
import { usePage } from "./PageContext";

export const MyComponent: FC = () => {
    const {page, setPage} = usePage();
    const handleClick = useCallback(() => {
        //check whether the page is or not 'auth' and if its not then set it!
        if (page !== "auth") setPage("auth")
    }, [])
    return <button onClick={() => handleClick()}>CLICK ME</button>

We are now using shared data in frontend also! Shared data are quite useful when you want to keep track of what you're doing, like what kind of data you're using, instead of having data declared in both parts, shared and frontend, we are now declaring and exporting them only from the shared folder. Eventually every interface that's being exported from the modules and used more than once will be moved to shared folder.

Instead of creating 'new files' to store events added with EventManager we're now creating events inside store class.

**This change requires you that every time you create a new store you make sure 'createEvents' method is there as a public method.**

import { useEffect } from "react";
import MyStore from "stores/MyStore";
import EventManager from "utils/EventManager.util";

export const InitMyStoreEvents = (store: MyStore) => {
    return useEffect(() => {
        EventManager.addHandler("pagename", "setdata", (data: number) => store.setData(data));
        return () => EventManager.removeTargetHandlers("pagename");
    }, [store]);


import { makeObservable, observable, action } from "mobx";
import EventManager from "utils/EventManager.util";

class MyStore {
    mydata: number = 0;

    setData(data: number) {
        this.mydata = data;

    public createEvents() {
        EventManager.addHandler("pagename", "setdata", (data: number) => this.setData(data));

Make sure the newly created store is included in the main `App.tsx` inside the primary used `useEffect`

const myStore = useLocalObservable(() => new MyStore());
const myOtherCoolStore = useLocalObservable(() => new MyOtherCoolStore());

useEffect(() => {
    const stores = [
        { store: myStore, event: "myStore" },
        { store: myOtherCoolStore, event: "myOtherCoolStore" },
    stores.forEach(({ store, event }) => {
        //this will call our created createEvents method to initialize events that can be called form backend
        return () => EventManager.removeTargetHandlers(event);
}, [myStore, myOtherCoolStore])


Shared data changes
Shared data now exports namespaces, interfaces and enums instead of declaring them. This mainly was done because we're now using shared data in frontend like interfaces and enums and using declared enum is not possible since frontend wouldn't know what that enum really is when building, but importing them let's the frontend know what their values are.

Other Fixes

[/] Fixed typeorm declared version always updating it to a higher version everytime you installed packages, causing issues when trying to start the server.
[/] Fixed errors when creating a second or third character due to database relations being described wrongly.
[/] Fixed an issue with things not working correctly after creating a character for the first time (like inventory or hud wasn't updating)
[/] Fixed chat input image tripping when a suggested command was displayed.
[/] Fixed item swapping causing issues with items equipped in quick use.
[/] Fixed an issue with plane engines not working correctly due to some values being set on they stream in.


  • Like 1

User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


   2 of 2 members found this review helpful 2 / 2 members

Great concept, awesome contribution - thanks for the release

Link to review
  • Create New...