Getting Started with Client-side
Introduction
Client-side is the side where you have better control over a single player and provides you access to more information about the game world, but less information about the other players. You can use client-side to create GUI (Graphical User Interface), visual effects, and much more.
Using Client-side
Client-side has a different pattern than server-side. Requiring the files are a bit different, and you can't use NPM Packages like server-side. Client-side's requiring files system needs to start from the root folder until the file you want to require. Let us give you a little example of the structure of client-side.
1. Go to the client_packages folder inside your server-files and create a new file called index.js.
2. Create a folder and name it whatever you want, let's say gamemode.
Now your structure should be like this:
<File:Client_struct_1.png>
3. Edit your index.js and add `require('./gamemode/index');` or `require('./gamemode');`
4. Open your gamemode folder and create a new file called index.js.
5. In the file, add any test script you want and it should work once you enter the game. For example, add `mp.gui.chat.push('Hello World')`. You should get the message once you join the server.
Create your first client-side resource
As we learned how the structure works in the previous section, now we'll create our first resource to show how client-side actually works. Remember the index we added inside the gamemode folder, it's the first file that triggered when you completely download your files, so now we'll create a simple resource which sets your discord rich presence into a custom made message.
1. Create a folder called modules (optional) inside your gamemode folder.
2. Create a file called discord.js
3. Add the following code:
4. Go back to your index.js inside the gamemode folder and add `require('./gamemode/modules/discord');`.
Like that you required the discord module once you join/download the server.
It's always necessary to add the rootFolder in your required file-path to get the file, it's not like server-side where you can just do `require('./modules/discord');`.
5. Now in your index.js, add `mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')`.
If you're new to the events system, check [Getting Started with Events tutorial](/getting-started-with-events).
If you want autocomplete, check [Getting Started with Development tutorial](/getting-started-with-development).
Your code structure should be like this:
<File:Client_struct_2.png>
Now join the server and check your discord status. It should look like this:
<File:UpdatedRichPresence.jpg>
Final notes
You have accomplished your first client-sided resource. You can view more [resources](https://rage.mp/files/) created by the community.