# Vercel Setup Guide

### Vercel Setup Instructions

#### Demo

Check out the live demo: <https://vercel.cssbans.online/>

#### What is Vercel?

Vercel is a free serverless hosting platform that allows you to host your web applications without any server or hosting knowledge. It's managed directly through GitHub builds!

#### Instructions

Follow these steps to set up your environment variables for the project on Vercel.

**1. Fork the Repository**

1. Click "Fork" on the GitHub repository page.

**2. Add Project to Vercel**

1. Go to your Vercel dashboard.
2. Click "New Project".
3. Select "Import Git Repository".
4. Choose your forked repository.

**3. First Build**

1. Vercel will automatically build the project.
2. Once the build is complete, obtain the domain for your project.

**4. Edit Configuration**

1. Copy the contents of `.env.vercel.example` and fill in the required values.
2. Go to your Vercel project settings and select Node.js version `18.x`.

**5. Environment Variables**

Configure the `.env.verce.example` file with the following settings:

**Modules:**

```
RANKS="Disabled"
VIP="Disabled"
SKINS="Disabled"
```

**Database:**

```
DB_HOST_VIP=
DB_DATABASE_VIP=
DB_USERNAME_VIP=
DB_PASSWORD_VIP=
DB_PORT_VIP=3306

DB_HOST_RANKS=
DB_DATABASE_RANKS=
DB_USERNAME_RANKS=
DB_PASSWORD_RANKS=
DB_PORT_RANKS=3306

DB_HOST_SKINS=
DB_DATABASE_SKINS=
DB_USERNAME_SKINS=
DB_PASSWORD_SKINS=
DB_PORT_SKINS=3306
```

**Application Settings:**

```
APP_DEBUG=false
APP_NAME='css-bans'
APP_URL= # Replace with your domain, e.g., https://mysite.vercel.app

DB_HOST=
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=

STEAM_CLIENT_SECRET=
RCON_PASSWORD=
STEAM_REDIRECT_URI=${APP_URL}/auth/steam/callback # Replace ${APP_URL} with your domain
ASSET_URL=${APP_URL} # Replace ${APP_URL} with your domain
```

**6. Upload Configuration to Vercel**

1. Navigate to your Vercel project settings.
2. Under the "Environment Variables" tab, add each key-value pair from your `.env` file.

**7. Rebuild Your Project**

1. Ensure all values, especially URLs and database credentials, are correct.
2. Rebuild your project on Vercel.
3. Your site should now be up and running!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://css-bans.gitbook.io/css-bans-counterstirkesharp-admin-web-panel/self-hosting-optional/vercel-setup-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.