# Custom APPs

{% hint style="warning" %}
Custom APPs are only available for customers who bought the complete laptop bundle, if you don't own it please ignore this guide.
{% endhint %}

{% file src="<https://1688068901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bCwnajAqpi3Viykb5Wi%2Fuploads%2F3WGaebMNRw2LGwzdY5OS%2Fapp_template.zip?alt=media&token=93885a46-7037-4abf-aa86-e9ff9eae8de3>" %}
App Template using React + TS + Mantine
{% endfile %}

{% file src="<https://1688068901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bCwnajAqpi3Viykb5Wi%2Fuploads%2FdcSOezpwwvf5eCmrM1Lv%2Fapp_template_js.zip?alt=media&token=ccab1f5b-312c-4186-8c3d-8c6f7fc93a48>" %}
App Template using Vanilla JS
{% endfile %}

<details>

<summary>Startup order</summary>

```markdown
## Make sure to start ox_lib and your framework first.
ensure ox_lib
ensure your_framework

ensure av_laptop
ensure av_apps
## your custom app(s):
ensure app_template
```

</details>

<details>

<summary>Restart Order</summary>

<pre class="language-markdown"><code class="lang-markdown"><strong>## When testing in game you probably will need to restart your custom app
</strong>## To do this you will need to restart the scripts in the following order:
ensure av_laptop
ensure av_apps
ensure your_custom_app
</code></pre>

</details>

<details>

<summary>Other Info</summary>

```markdown
# Plase DON'T try to register a custom APP using av_laptop files
# You need to create your own resource folder and register the app from there,
# that's why a template exists so u can copy/paste and add all the apps u want
```

</details>

{% tabs %}
{% tab title="Custom APPs" %}

> For React TS template:
>
> * Navigate to **app\_template/ui** folder using your terminal.
> * Run command `yarn` to install dependencies.
> * Once all dependencies are fully loaded run `yarn dev` to start the project.
> * To build just run command `yarn build` or `yarn build --w`
>   {% endtab %}

{% tab title="Using Websites" %}

> * If you don't want to build an APP but just to trigger a website to be shown in the laptop window, make sure to follow the template from config/\_config.lua:
>
> ```lua
> local resourceName = GetCurrentResourceName()
> Config = {}
> Config.App = { -- This config will open a website, you don't need the UI folder at all
>     name = "template", -- You can modify this just make sure don't use duplicated app names
>     label = "App Template", -- You can modify this
>     resource = resourceName, -- don't modify this
>     icon = resourceName..'/icon.png', -- don't modify this?
>     website = "https://uwucatcafe.com/", -- custom website
>     isEnabled = function()
>         -- this check runs when the player opens the laptop, return true/false to enable/disable app
>         return true
>     end
> }
> ```

<figure><img src="https://1688068901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bCwnajAqpi3Viykb5Wi%2Fuploads%2FzX9rH37DXutsTY2t7y4y%2Fimage.png?alt=media&#x26;token=90d02760-5f35-4e5b-85be-e0ebad1ca928" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="NUI Events" %}

> * If you don't want to open any window in laptop but you want to trigger an event from an external resource you can trigger a NUI Callback, check the config from config/\_config.lua:
>
> <pre class="language-lua"><code class="lang-lua">local resourceName = GetCurrentResourceName()
> Config = {}
> Config.App = { -- This config will trigger a NUIEvent (check client/nui/example)
> <strong>    name = "template", -- You can modify this just make sure don't use duplicated app names
> </strong>    label = "App Template", -- You can modify this
>     resource = resourceName, -- don't modify this
>     icon = resourceName..'/icon.png', -- don't modify this?
>     event = "doSomething", -- trigger a nui event
>     isEnabled = function()
>         -- this check runs when the player opens the laptop, return true/false to enable/disable app
>         return true
>     end
> }
> </code></pre>

> * This will trigger the NUI Callback from **client/nui/example.lua**
>
> ```lua
> RegisterNUICallback("doSomething", function(data,cb)
>     TriggerEvent("av_laptop:notification", Config['app_title'], "Event triggered from laptop", "success")
>     cb("ok")
> end)
> ```

> * The resource where the NUI callback is located needs to be the same resource that is used to register the APP using the **registerApp** export from **client/editable/app.lua**

<figure><img src="https://1688068901-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bCwnajAqpi3Viykb5Wi%2Fuploads%2Fqe2Tcl32NDhU5yis6ZS6%2Fimage.png?alt=media&#x26;token=fe08ae22-5c43-49df-94a2-6963103ee082" alt=""><figcaption></figcaption></figure>

> **Note:** If you choose to just trigger a nui event you can delete the UI folder and all ui references from fxmanifest.lua
> {% endtab %}
> {% endtabs %}

{% hint style="danger" %}
I don't provide any support for custom APPs, if you don't know how React or JS works, please hire a dev from Fiverr or any other platform, I won't do any custom commission at all, refrain from opening a ticket about custom apps.
{% endhint %}