developomp 1aca18b21d Web Interface setting up update

- Improved readability
- Grammatical improvements
- Removed unnecessary parts
- Added new docs page to more info section

2022-02-25 17:54:12 +09:00

3.8 KiB

Raw Blame History

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 (version 16 is recommended)
yarn
Discord account
Google account
Payment method (No payment required for light usage. More info here)

Discord

Go to the Discord Developer Portal and create an application. Select one if you already have it. You may use the same application used by the discord bot.
Go to OAuth2 tab.
Add the following redirects:
- testing (http): http://localhost:5000/api/auth
- production (https): https://<YOUR_SITE_NAME_HERE>/api/auth (e.g. https://llama.developomp.com/api/auth)

Firebase

Create a firebase project. Select one if you already have it. It must be the same project used by the discord bot. Make sure it is using the blaze plan.
Go to the Firestore Database tab and enable it. Usage of production mode is highly recommended.

Local

Clone the llama-bot-web-interface repository.

Functions

Edit functions/src/config.json.

{
  "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

Create 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
}

Visit this link, select your firebase project and download the firebase admin sdk key by pressing the "Generate new private key" button. Rename the downloaded file to firebase-adminsdk.json and put it in the functions/src/ directory.
Install firebase tools.
```
yarn global add firebase-tools
```
Select your firebase project. You must run this command in the project root.
```
firebase use <FIREBASE_PROJECT_ID_HERE>
```
Go to the functions directory and install the dependencies.
```
yarn install
```
Build production code.
```
yarn build
```

Frontend

Go to the frontend directory and install the dependencies.
```
yarn install
```
Test with hot reloading.
```
yarn dev
```
Build site for production.
```
yarn build
```
Preview the production build
```
yarn preview
```

Testing

After building the backend and the frontend code, run the following command to start a local test server:

firebase serve

Deployment

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

firebase deploy

The deployment could take a while so be patient.

Deploying frontend code only:

firebase deploy --only hosting

Deploying backend code only:

firebase deploy --only functions

3.8 KiB Raw Blame History