# Installation Guide

## Installation video

{% embed url="<https://www.youtube.com/watch?v=HHkdvehjw5U>" %}
If you are getting stuck on any of the steps feel free to follow the video guide
{% endembed %}

{% stepper %}
{% step %}

### 1. Codesign Bridge

{% hint style="success" %}

#### Framework, Database, and Integration Handling

**This resource requires `cd_bridge` to be installed and running before it can function.**

`cd_bridge` is **drag-and-drop** and requires **no configuration or file editing**.

It handles framework connections, database setup, and error handling behind the scenes. When the bridge starts, it automatically detects and initializes all compatible resources — including all Codesign scripts and any Codesign-compatible scripts you have installed.

**For installation instructions, see the** [**👉 full bridge setup guide →**](https://docs.codesign.pro/paid-scripts/bridge/installation-guide)**.**
{% endhint %}
{% endstep %}

{% step %}

### 2. Download Resource

{% hint style="success" %}

#### Download the Resource from FiveM’s Portal

1. [**👉 Download cd\_garage →**](https://portal.cfx.re/assets/granted-assets?search=cd_garage)
2. Unzip the downloaded file
3. In your server’s `resources` directory, **create a folder named `[codesign]` if it does not already exist**
4. Place **`cd_garage`** (and all other Codesign resources) inside the **`[codesign]`** folder
   {% endhint %}

<div align="left" data-with-frame="true"><figure><img src="https://789235289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSKsM-AnxI2icNixJI8%2Fuploads%2FJ4X171ntUgjXRAfeQt9Z%2Fimage.png?alt=media&#x26;token=262e54f9-7780-4c91-adba-9babd0c5a498" alt=""><figcaption><p>Example resources folder with a <code>[codesign]</code> directory</p></figcaption></figure></div>
{% endstep %}

{% step %}

### 3. Install Dependencies

{% hint style="success" %}

#### Required and Optional Dependencies

**Where Can I Find These Dependencies?**

You can find all dependencies in the `[cd_garage/dependencies]` folder.\
Each dependency has its own folder containing a text file with a GitHub download link.\
Alternatively, you can view the full list in the table below.

***

**Where Should I Put These Dependencies?**

Place all dependencies inside the **`[codesign]`** folder in your server’s `resources` directory.

⚠️ **Do not place them inside the `cd_garage` folder.**

***

**Do I Need to Add Them to the Server Start Config?**

* **Required:** No need to add these to your `server.cfg` — they start automatically as dependencies of this resource.
* **Optional:** Yes, these must be manually added to your `server.cfg`.
  {% endhint %}

<table data-full-width="true"><thead><tr><th width="174.66670735677081">Resource Name</th><th width="115.3333740234375">Download</th><th width="112.3333740234375" data-type="checkbox">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong><code>cd_garageshell</code></strong></td><td><code>cd_garage/dependancies</code></td><td>true</td><td></td></tr><tr><td><strong><code>cd_drawtextui</code></strong></td><td><a href="https://github.com/dsheedes/cd_drawtextui">Github</a></td><td>false</td><td>Default draw-text UI (change via <code>Config.GarageInteractMethod</code>).</td></tr><tr><td><strong><code>cd_easytime</code></strong></td><td><a href="https://github.com/dsheedes/cd_easytime">Github</a></td><td>false</td><td>Default garage time sync.</td></tr><tr><td><strong><code>cd_keymaster</code></strong></td><td><a href="https://github.com/dsheedes/cd_keymaster">Github</a></td><td>false</td><td>Default lockpicking.</td></tr></tbody></table>
{% endstep %}

{% step %}

### 4. Configure Resource

{% hint style="success" %}

#### Review and Adjust config.lua Options

You must review all configurable options in `[cd_garage/configs/config.lua]` and adjust them to suit your server’s needs.

\
Be sure to read the **commented help text** at the end of each line — it explains the purpose of each configuration option.

<img src="https://789235289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSKsM-AnxI2icNixJI8%2Fuploads%2FurkjRxUUUtDJpPPUP7fB%2Fimage.png?alt=media&#x26;token=6ae6966d-c853-484d-b68f-c61fcab4abba" alt="" data-size="original">

The most important config options are in the **Important** category at the top of `config.lua`.\
All other settings are optional.

<img src="https://789235289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSKsM-AnxI2icNixJI8%2Fuploads%2FFKtHGrG0RQZqwmFqS8Do%2Fimage.png?alt=media&#x26;token=6434e357-ea6d-493e-a1e4-7436ab6bb07a" alt="" data-size="original">
{% endhint %}
{% endstep %}

{% step %}

### 5. Configure Key Binds

{% hint style="success" %}

#### Configure Before Starting the Resource

**Before Starting the Resource**

Before launching this resource on your main or live server, we strongly recommend configuring your **key binds**, as this resource uses [**FiveM’s Key Mapping**](https://docs.codesign.pro/helpful-guides/register-key-mapping) system.

**Where Can I Configure My Key Binds?**

You can configure all key binds directly in `[cd_garage/configs/config.lua`**]**.

**Why Is This Important?**

Once a player joins your server with this resource running, you can no longer force key bind changes through the config file — players must adjust them manually through the **in-game pause menu settings**.\
However, any changes you make will still apply to new players who join afterward.

This system is more **optimized** and gives players the flexibility to customize their key binds for both **keyboard** and **controller** use.\
You can also review the [**Default Keybinds**](https://docs.codesign.pro/paid-scripts/garage/developer-api/keys) provided with this resource.
{% endhint %}

<div align="left" data-with-frame="true"><figure><img src="https://789235289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSKsM-AnxI2icNixJI8%2Fuploads%2FKgp27vGiug6WGuulhAvV%2Fimage.png?alt=media&#x26;token=99b11713-21a0-482b-b4df-f442ff037471" alt=""><figcaption><p>Keybind settings located in the pause menu</p></figcaption></figure></div>
{% endstep %}
{% endstepper %}