Before Creating a Resource

In order to make programming easier. It is highly recommended to change a file explorer setting that hides the extensions of file types. In your Windows search bar type File Explorer Options and open the first link. UNCHECK hide extensions for known file types in the View tab.

Creating a Resource

Simply create a folder inside the resources folder and call it whatever you want. In this bootcamp we will be calling it example.

Your folder structure should look similar to this:

│   altv-server.exe
│   server.cfg
│   package.json # Generated with 'npm init' in cmd line.
│                # See previous tutorial for more info.
├───data/
├───modules/
└───resources/
    └───example/ # We created this folder.

Create two more folders inside of example called client and server. Then inside of the example folder you will want to create a file called resource.cfg. You can do this by using the context menu or VSCode to create your file. Create a text file and rename the extension to .cfg. Example being resource.txt -> resource.cfg.

This can be done for all file types in the future.

│   altv-server.exe
│   server.cfg
│   package.json
├───data/
├───modules/
└───resources/
    └───example/
        ├───server/ # We created this folder.
        ├───client/ # We created this folder.
        └───resource.cfg # We created this file.

Great! Now let's open resource.cfg and we'll add information about the resource we are creating.

# We are making a file called `resource.cfg` and adding the text below.

type: 'js',
main: server/startup.js,
client-main: client/startup.js,
client-files: [
    client/*
],
deps: []

Now we can add the last files that we need which are server/startup.js and client/startup.js.

Here's how your directory should look:

│   altv-server.exe
│   server.cfg
│   package.json
├───data/
├───modules/
└───resources/
    └───example/
        ├───server/
        │    └───startup.js # We created this file.
        ├───client/
        │    └───startup.js # We created this file.
        └───resource.cfg

Inside of server/startup.js you will want to put the following inside.

/// <reference types="@altv/types-server" />
import * as alt from 'alt-server';

alt.log('Hello from server');

Inside of client/startup.js you will want to put the following inside.

/// <reference types="@altv/types-client" />
/// <reference types="@altv/types-natives" />
import * as alt from 'alt-client';
import * as native from 'natives';

alt.log('Hello from client'); // Only visible in 'F8' menu.

Open the Whole Folder in VSCode

Before we go any further it's important that you open the entire folder structure in VSCode.

File -> Open Folder and then open the folder where you have altv-server located. This will install all the necessary types needed to work with alt:V as well as configure your package.json a little bit further.

However, if you wish to perform this step manually that is no problem.

Simply run these commands in the root of your folder where package.json is located in a terminal, powershell, or cmd.

npm i @altv/types-client --save-dev
npm i @altv/types-server --save-dev
npm i @altv/types-natives --save-dev
npm i @altv/types-webview --save-dev

Your package.json should look similar this:

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "type": "module",
    "devDependencies": {
        "@altv/types-client": "latest",
        "@altv/types-natives": "latest",
        "@altv/types-server": "latest",
        "@altv/types-webview": "latest"
    }
}

If you wish to re-install dependencies you should run just npm install.

Written by Stuyk & Alexa