Skip to main content

Setting up

This page will teach you how to set up the Llama bot web Interface.

Steps#

Pre-requirements#

  • Node.js version 14 or greater
  • npm & yarn (npm is included in node.js)
  • Discord account
  • Google Firebase account
  • Payment method (No payment required for light usage. More info here)

Discord#

  1. Go to the Discord Developer Portal and create an application. Select one if you already have it. Using the same application used by the discord bot is recommended.

  2. Go to the OAuth2 tab.

  3. Add the following redirects:

    • testing (http): http://localhost:5000/api/auth
    • production (https): https://<YOUR_SITE_NAME_HERE>/api/auth (example: https://llama.developomp.com/api/auth)

Firebase#

  1. Create a firebase project. Select one if you already have it. Using the same project usd by the bot is recommended. Make sure it is using the blaze plan

    https://console.firebase.google.com

  2. Go to the Firestore Database tab and enable it. Using production mode is highly recommended.

Local#

Clone the llama-bot-web-interface repository

Using HTTPS

git clone https://github.com/llama-bot/llama-bot-web-interface.git

Using SSH:

git clone git@github.com:llama-bot/llama-bot-web-interface.git

Functions#

  1. Edit functions/src/config.json.

    functions/src/config.json (default values)
    {  "pathPrefix": "/api", // where the API endpoints will be located. Set it to "/" if it's on another domain (example: api.example.com)  "scopes": ["identify", "email", "guilds"] // Discord OAuth2 scopes.}

    more info about discord OAuth2 scopes can be found in the discord developers documentation

  2. Create functions/src/secret.json and fill in the data.

    functions/src/secret.json
    {  "clientID": "DISCORD_CLIENT_ID_HERE", // Discord OAuth2 Client ID  "clientSecret": "DISCORD_CLIENT_SECRET_HERE", // Discord OAuth2 Client Secret  "secret": "SECRET_COOKIE_KEY_HERE" // secret key to be used for express session security}

  3. Go to this link, select your firebase project and download the firebase admin sdk key by pressing the "Generate new private key" button. Rename it to firebase-adminsdk.json and put it in functions/src/. This is necessary for firebase firestore database access.

  4. Install firebase cli tools.

    npm install -g firebase-tools

  5. Select firebase project

    firebase use <FIREBASE_PROJECT_ID_HERE>

  6. Go to functions directory and install necessary dependencies.

    npm install

  7. Build production code.

    npm run build

Frontend#

  1. Go to frontend directory and install dependencies.

    yarn install

  2. Build site for production.

    yarn build

Testing#

info

Build backend and frontend code first

  1. Start local test server by running the following command:

    firebase serve

  2. Open locally served test site and log in with your discord account.

    http://localhost:5000

  3. If everything is set up correctly, this should have added a new user in firestore database.

Deployment#

warning

Make sure to test your code before deploying to production

Deploying the code to production is as simple as running the following command:

firebase deploy

The deployment could take a while so be patient.

To deploy frontend code only:

firebase deploy --only hosting

To deploy backend code only:

firebase deploy --only functions

More info#