Tutorial:Getting Started - JS

From alt:V / Wiki
Jump to navigation Jump to search

Last Update: 17 May 2020 - Release #1181

Requirements

  • Windows 10
  • Code Editor (E.g Visual Studio Code)
  • Basic knowledge of Command Prompts
  • VS Redist Latest Version

Summary

If you are interested in learning all of the ins and outs of getting a server setup please follow this tutorial entirely.

If you are more interested in getting a server running in a few minutes check out alt:V Quickstart repository and follow those instructions.

Obtaining the Server Files

Download the latest build here.
Within the Dropdown navigate to: Release, Release candidate OR Development °
°For development, most of the time the branch Release candidate is used.

Tick the following elements:

[x] Data Files
[x] NodeJS Module
[ ] C# Module
[x] Sample Config File
[x] Example Resource Pack

Press DOWNLOAD once you're done => Extract the .zip with your prefered program (E.g 7-zip) °
°Into a folder that is not on your Desktop!

Running the Server

Depending on your chosen Code Editor, you may consider the following Options:

Visual Studio Code

- Within VSC, open the Server Root (File > Open Folder)
- Create a new Terminal (Terminal > New Terminal )

Once you archieved to have a Terminal, it's up to you:

For PowerShell:
- Select the Prompt PowerShell
- Type > ./altv-server.exe

For Command Prompt:
- Select the Command Prompt
- Type > altv-server.exe

Congrats, your server is now running

- Press CTRL + C to stop the server.
- Press arrow up and press enter simply restart the server.

PowerShell

- Navigate to the root folder of your altv-server.exe 
- Head to the adress bar of the file explorer
- Type > powershell
- Type > ./altv-server.exe

Congrats, your server is now running

- Press CTRL + C to stop the server.
- Press arrow up and press enter simply restart the server.

Command Prompt

Just run altv-server.exe

Configuring your Client for Development

- Navigate to your root of alt:V Client
- View altv.cfg in your prefered Editor.

Now something similar to this should appear:

branch: 'rc'
build: '1182'
debug: 'true'
gtapath: 'D:\\Program Files (x86)\\Steam\\steamapps\\common\\Grand Theft Auto V'
ignoreLowPriorityProps: 'false'
lang: 'en'
lastip: ''
name: 'YourWonderfulName'
netgraph: 'false'
streamerMode: 'false'
voiceActivationEnabled: 'false'
voiceActivationKey: '78'
voiceEnabled: 'true'
voiceInputSensitivity: '20'
voiceVolume: '100'

Using Branches

Set your branch based on what you've choose on Obtaining the Server Files

Branch Names:

  • release
  • release candidate
  • dev
Release:
branch: 'release'

Release candidate (Mostly used):
branch: 'rc'

Development:
branch: 'dev'

Using Debugmode (Client)

Set your debug to 'true'

debug: true

This allows the use of reconnect, the re -/ start & stop of resources with the in-game console (F8).

Configuring your Server.cfg

Once you're done changing the stated things above, it's time to head to the server again.
The server.cfg is where the magic happens, here you can change what is most important.

Once opened, something similar to this should appear:

name: 'alt:V Server'
host: 0.0.0.0
port: 7788
players: 128
#password: ultra-password
announce: false
#token: YOUR_TOKEN
gamemode: Freeroam
website: example.com
language: en
description: 'alt:V Sample Server'
modules: [ node-module ]
resources: [
  
]

Using Debugmode (Server)

While you are developing make sure you ENABLE the following inside the server.cfg
Add this right after modules...

debug: true

Once enabled, you can now use Debug Commands like:

restart [RESOURCE]
stop [RESOURCE]
start [RESOURCE]
reconnect °
° Synchronization will be slightly broken on reconnect.

Adding Resources

Adding a resource is as simple as putting the folders name inside of the resources array.
No commas necessary - But you can add them if you want.

Right now, your resource array is empty.
Keep in mind, as you've chosen the Example Resource Pack you've got three example resources.

Load them, by simple adding the folder names °
° The name is case sensitive! - Also templating with [resourceName] isn't gonna work as seen in other Multiplayer Modifications

resources: [
    freeroam
    chat
    newResource
]

General Server Structure

We'll go on by explaining the general server structure and how to add a resource.

Server/
├── cache/
├── data/
├── modules/
├── resources/
    ├── chat/
    ├── freeroam/
    ├── voice-chat/
    ├── example/
├── altv-server.exe
├── libnode.dll
├── server.cfg

Let's create an example resource

This is the name of your resource:
example/

Here go the Client-side Files:
example/client/

Here go the Server-side Files:
example/server/

Here go the configuration & information:
example/resource.cfg

Configuring the resource.cfg

When you create a resource.cfg, it should look like something similar to this.

type: js,
main: server/server.mjs,
client-main: client/client.mjs,
client-files: [
    client/*
],
deps: [ 
    chat
]

deps Allows you to require other resources, if they'rent found your resource will fail to load!
You can access exported functions & more by adding the following in your code:

import chat from 'chat';

main is the main server file.

client-main is the first file loaded on Client-side for a player.

client-files can usually just contain client/* which will load ALL files.

Creating Server-side Code - server.mjs

We're going to add chat as a dependency to our resource.
Then we're going to import 'alt' & 'chat'.

import * as alt from 'alt';
import chat from 'chat';

console.log('==> Your Resource Has Loaded! Horray!');

// Called on Server-side
alt.on('playerConnect', (player) => {
    // Logs to the console.
    alt.log(`==> ${player.name} has connected.`);

    // Displays message to all players.
    chat.broadcast(`==> ${player.name} has joined.`);

    // Sets the player's model.
    player.model = 'mp_m_freemode_01';

    // Spawns the player at coordinates x, y, z, with a delay of 1000 Milliseconds.
    player.spawn(813, -279, 66, 1000);

    // Emit to the player passed, the event name, the argument to send.
    alt.emitClient(player, 'Server:Log', 'hello', 'world');
});

Congrats you've written your first Server-side code!
That logs to the console
Broadcasts to the chat on player join
Forces the player to have the freeroam model & spawns them
Emits an event to Client-side

See the Client-side section down below to see how to intercept the event on Client-side.

Creating Client-side Code - client.mjs

We're going to import two essential alt:V dependencies: native & alt

import * as alt from 'alt';
import * as native from 'native';

alt.log('Client-side has loaded!');

alt.onServer('Server:Log', (msg1, msg2) => {
    alt.log(`Message From Server: ${msg1}`);
    alt.log(`Message From Server: ${msg2}`);
});

Final Words

First of all - Congrats you've written your first Client-side Code that logs to the 'F8' console => Open the console to see it.
Followed by setting up a whole server with basic fundamentals!

Word of advice

Keep in mind that...
... alt:V uses ES6
... the Server does not update automatically