From fa55b58c010c0b0740766050f5d0f16f2587b1a1 Mon Sep 17 00:00:00 2001 From: Presti Date: Thu, 30 Nov 2023 16:10:52 +0000 Subject: [PATCH] GITBOOK-9: No subject --- README.md | 44 ++++ SUMMARY.md | 25 ++ bot/addon-system/README.md | 10 + bot/addon-system/make-your-first-addon.md | 151 ++++++++++++ bot/configurations.md | 86 +++++++ bot/self-hosting/README.md | 51 ++++ .../self-host-with-pterodactyl.md | 15 ++ bot/streamtools.md | 219 ++++++++++++++++++ bot/translations.md | 9 + bot/troubleshooting.md | 3 + features/community.md | 22 ++ features/music-system.md | 14 ++ webinterface/self-hosting.md | 135 +++++++++++ 13 files changed, 784 insertions(+) create mode 100644 README.md create mode 100644 SUMMARY.md create mode 100644 bot/addon-system/README.md create mode 100644 bot/addon-system/make-your-first-addon.md create mode 100644 bot/configurations.md create mode 100644 bot/self-hosting/README.md create mode 100644 bot/self-hosting/self-host-with-pterodactyl.md create mode 100644 bot/streamtools.md create mode 100644 bot/translations.md create mode 100644 bot/troubleshooting.md create mode 100644 features/community.md create mode 100644 features/music-system.md create mode 100644 webinterface/self-hosting.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..ae47df8 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +--- +description: The official Wiki of Ree6! +coverY: 0 +layout: + cover: + visible: true + size: full + title: + visible: true + description: + visible: true + tableOfContents: + visible: true + outline: + visible: true + pagination: + visible: false +--- + +# Welcome to the Ree6 Wiki! + +## What can you expect here? + +In this Wiki we will be showing you everything from hosting Ree6 yourself to helping with the official Ree6 development! + +## What features does Ree6 have? + +{% content-ref url="broken-reference" %} +[Broken link](broken-reference) +{% endcontent-ref %} + +## How can I self host Ree6? + +For the Bot you can use this guide: + +{% content-ref url="bot/self-hosting/" %} +[self-hosting](bot/self-hosting/) +{% endcontent-ref %} + +For the Webinterface you can use this guide below: + +{% content-ref url="webinterface/self-hosting.md" %} +[self-hosting.md](webinterface/self-hosting.md) +{% endcontent-ref %} diff --git a/SUMMARY.md b/SUMMARY.md new file mode 100644 index 0000000..71e30a9 --- /dev/null +++ b/SUMMARY.md @@ -0,0 +1,25 @@ +# Table of contents + +## 🏠 Home + +* [Welcome to the Ree6 Wiki!](README.md) + +## ✨ Features + +* [Community](features/community.md) +* [Music System](features/music-system.md) + +## 🤖 Bot + +* [Self hosting](bot/self-hosting/README.md) + * [Self host with Pterodactyl](bot/self-hosting/self-host-with-pterodactyl.md) +* [Addon System](bot/addon-system/README.md) + * [Make your first Addon](bot/addon-system/make-your-first-addon.md) +* [StreamTools](bot/streamtools.md) +* [Configurations](bot/configurations.md) +* [Translations](bot/translations.md) +* [Troubleshooting](bot/troubleshooting.md) + +## 🌐 Webinterface + +* [Self hosting](webinterface/self-hosting.md) diff --git a/bot/addon-system/README.md b/bot/addon-system/README.md new file mode 100644 index 0000000..e6b3019 --- /dev/null +++ b/bot/addon-system/README.md @@ -0,0 +1,10 @@ +--- +description: Informations about the Addon System of Ree6! +--- + +# Addon System + +## Whats that? + +Its a API that allows users to create Addons for Ree6 without directly modifying the original Source! + diff --git a/bot/addon-system/make-your-first-addon.md b/bot/addon-system/make-your-first-addon.md new file mode 100644 index 0000000..b8c63ff --- /dev/null +++ b/bot/addon-system/make-your-first-addon.md @@ -0,0 +1,151 @@ +# Make your first Addon + +## Requirements + +Developing with the Ree6 Addon API requires Java 17.\ +We recommend using Maven or Gradle to import Ree6 as a Library file into your project. + +Example for Maven: + +```xml +... + + jitpack.io + https://jitpack.io + + +... + + + de.ree6 + Ree6 + VERSION + +... +``` + +## Lets get started! + +When working with the Ree6 Addon API you need to create a Main class of your Addon which implements our `AddonInterface` class! + +In this example we call the class AddonMain: + +```java +public class AddonMain implements AddonInterface { +} +``` + +After implementing the AddonInterface you should start with the onEnable and onDisable Methods! + +```java + @Override + public void onEnable() { + System.out.println("Start!"); + } + + @Override + public void onDisable() { + System.out.println("Goodybye!"); + } +``` + +## Creating a command! + +To create a command we need to first understand the concept behind the Ree6 Command System.\ +We have a `CommandManager` which is handling all the internal works like command parameter parsing and more!\ +For a command we need to create a class implements the `ICommand` class and having the `Command` Annonciation. + +Lets make a command together called `PongCommand`: + +```java +@Command(name = "ping", description = "Answer with Pong!", category = Category.FUN) +public class PongCommand extends ICommand { + + @Override + public void onPerform(CommandEvent commandEvent) { + } + + @Override + public CommandData getCommandData() { + return null; + } + + @Override + public String[] getAlias() { + return new String[0]; + } +} +``` + +When creating the commands you will need to implement these 3 methods to work with them.\ +The `onPerform` method is where you are going to do most of the stuff.\ +I will give you a `CommandEvent` as parameter which will contain informations like:\ + + +* Has this Command been executed as SlashCommand? +* Who executed this Command? +* In which Guild has this Command been executed? + +Now, lets continue with our work!\ +Since we want the Bot to respond with `Pong!` when someone writes `/ping` or `ree!ping`\ +We need to go into the `onPerform` method and respond to it!\ +For this we can use the internal reply method.\ +Just like this: + +```java +@Override +public void onPerform(CommandEvent commandEvent) { + commandEvent.reply("Pong!"); +} +``` + +## Register the command. + +Well now that we finished our great `PongCommand` we will need to register it!\ + + +How do we do that?\ +Simple, we go into our Main class into the `onEnable` method and tell the `CommandManager` to add it into the system! + +It would look like this: + +```java +@Override +public void onEnable() { + System.out.println("Start!"); + Main.getInstance().getCommandManager().addCommand(new PongCommand()); +} +``` + +But we shouldn't forget to also remove the Command once the Addon shutsdown!\ +You can do this like this: + +```java +@Override +public void onDisable() { + System.out.println("Goodybye!"); + Main.getInstance().getCommandManager().removeCommand(new PongCommand()); +} +``` + +## The missing Addon.yml + +To let Ree6 now where to look you will need to create a `Addon.yml`!\ +In this you will need to add the name of the Addon, the Author name, the path to the main class, the version of the addon, the version of Ree6 it has been made for!\ +For example addon it would looks like this: + +```yaml +name: Pong Command +version: 1.0 +api-version: 2.4.11 +author: Presti +main: de.presti.pongcommand.AddonMain +``` + +## Finishing up! + +You should be ready to go with your Addon!\ +Now you will need to export it either via Maven, Gradle or any desired way you have! + +After exporting it you just need to put it into the `addons` folder of Ree6!\ +You can either restart Ree6 to load the addon or use the `/addon load NAME` to load it! diff --git a/bot/configurations.md b/bot/configurations.md new file mode 100644 index 0000000..2b6b047 --- /dev/null +++ b/bot/configurations.md @@ -0,0 +1,86 @@ +--- +description: >- + This page contains the entire config file content as a table, we have marked + what you will need to run the bot. And its default values and + descriptions/explanations. +--- + +# Configurations + +## NOTE + +The current content is based on the unrelease Ree6 V3 version. + +## Config file + +| Name | Description | default | required | +| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------- | +| `config.version` | The config file version | 2.0.0 | yes | +| `config.creation` | The config file creation time | ? | yes | +| `hikari.sql.user` | The SQL username | root | yes | +| `hikari.sql.db` | The SQL Databasename | root | yes | +| `hikari.sql.pw` | The SQL password | yourpw | yes | +| `hikari.sql.host` | The SQL Server address | localhost | yes | +| `hikari.sql.port` | The SQL Server port | 3306 | yes | +| `hikari.misc.storage` | Possible entries: sqlite, mariadb, postgresql, h2, h2-server | sqlite | no | +| `hikari.sql.storageFile` | The SQL storage file | storage/Ree6.db | no | +| `hikari.misc.createEmbeddedServer` | Should an instance of an embedded Server be created? Only used for H2-Server. | false | no | +| `hikari.sql.poolSize` | Hikari SQL pool size | 10 | yes | +| `bot.tokens.release` | Token used when set to release build. | ReleaseTokenhere | yes | +| `bot.tokens.beta` | Token used when set to beta build. | BetaTokenhere | no | +| `bot.tokens.dev` | Token used when set to dev build. | DevTokenhere | no | +| `bot.misc.status` | The Status of the Bot. | ree6.de | %guilds% Servers. (%shard%) | +| `bot.misc.feedbackChannelId` | The Channel used for Feedback. | 0 | no | +| `bot.misc.ownerId` | The ID of the Bot Owner. Change this to yours! | 321580743488831490 | yes | +| `bot.misc.predefineInformation` | Predefined Information for the AI. | You are Ree6 a Discord bot. | no | +| `bot.misc.invite` | The Invite Link of the Bot. | https://invite.ree6.de | no | +| `bot.misc.support` | The Support Server Link of the Bot. | https://support.ree6.de | no | +| `bot.misc.github` | The GitHub Link of the Bot. | https://github.ree6.de | no | +| `bot.misc.website` | The Website Link of the Bot. | https://ree6.de | no | +| `bot.misc.webinterface` | The Webinterface Link of the Bot. | https://cp.ree6.de | no | +| `bot.misc.record` | The Recording Link of the Bot. | https://cp.ree6.de/external/recording | no | +| `bot.misc.twitchAuth` | The Twitch AuthenticationLink of the Bot. | https://cp.ree6.de/external/twitch | no | +| `bot.misc.advertisement` | The Advertisement in Embed Footers and the rest. | powered by Tube-hosting | no | +| `bot.misc.name` | The Name of the Bot. | Ree6 | yes | +| `bot.misc.shards` | The shard amount of the Bot. Check out https://anidiots.guide/understanding/sharding/#sharding for more information. | 1 | yes | +| `bot.misc.modules.moderation` | Enable the moderation module. | true | no | +| `bot.misc.modules.music` | Enable the music module. | true | no | +| `bot.misc.modules.fun` | Enable the fun commands. | true | no | +| `bot.misc.modules.community` | Enable the community commands. | true | no | +| `bot.misc.modules.economy` | Enable the economy commands. | true | no | +| `bot.misc.modules.level` | Enable the level module. | true | no | +| `bot.misc.modules.nsfw` | Enable the nsfw module. | true | no | +| `bot.misc.modules.info` | Enable the info commands. | true | no | +| `bot.misc.modules.hidden` | Enable the hidden commands. | true | no | +| `bot.misc.modules.logging` | Enable the logging module. | true | no | +| `bot.misc.modules.notifier` | Enable the notifier module. | true | no | +| `bot.misc.modules.streamtools` | Enable the Stream-tools module. | true | no | +| `bot.misc.modules.temporalvoice` | Enable the Temporal-voice module. | true | no | +| `bot.misc.modules.tickets` | Enable the Tickets module. | true | no | +| `bot.misc.modules.suggestions` | Enable the suggestions module. | true | no | +| `bot.misc.modules.customcommands` | Enable the custom Commands module. | true | no | +| `bot.misc.modules.customevents` | Enable the custom Events module. | true | no | +| `bot.misc.modules.ai` | Enable the AI module. | true | no | +| `bot.misc.modules.addons` | Enable the Addons module. | false | no | +| `bot.misc.modules.news` | Enable the news command/module. | true | no | +| `bot.misc.modules.games` | Enable the Games module. | true | no | +| `bot.misc.modules.reactionroles` | Enable the reaction-roles module. | true | no | +| `bot.misc.modules.slashcommands` | Enable the slash-commands support. | true | no | +| `bot.misc.modules.messagecommands` | Enable the message-commands support. | true | no | +| `heartbeat.url` | The URL to the Heartbeat-Server | none | no | +| `heartbeat.interval` | The Interval of the Heartbeat | 60 | no | +| `dagpi.apitoken` | Your Dagpi.xyz API-Token, for tweet image generation! | DAGPI.xyz API-Token | no | +| `amari.apitoken` | Your Amari API-Token, for Amari Level imports! | Amari API-Token | no | +| `openai.apiToken` | Your OpenAI API-Token, for ChatGPT! | OpenAI API-Token | no | +| `openai.apiUrl` | The URL to the OpenAI API. | https://api.openai.com/v1/chat/completions | no | +| `openai.model` | The Model used for the OpenAI API. | gpt-3.5-turbo-0301 | no | +| `sentry.dsn` | Your Sentry DSN, for error reporting! | yourSentryDSNHere | no | +| `spotify.client.id` | Your Spotify Application Client Id | yourspotifyclientid | no | +| `spotify.client.secret` | Your Spotify Application Client Secret | yourspotifyclientsecret | no | +| `twitch.client.id` | Your Twitch Application Client Id | yourtwitchclientid | no | +| `twitch.client.secret` | Your Twitch Application Client Secret | yourtwitchclientsecret | no | +| `twitter.bearer` | Your Twitter APIv2 Bearer Token | yourTwitterBearerToken | no | +| `reddit.client.id` | Your Reddit Application Client Id | yourredditclientid | no | +| `reddit.client.secret` | Your Reddit Application Client Secret | yourredditclientsecret | no | +| `instagram.username` | Your Instagram Username | yourInstagramUsername | no | +| `instagram.password` | Your Instagram Password | yourInstagramPassword | no | diff --git a/bot/self-hosting/README.md b/bot/self-hosting/README.md new file mode 100644 index 0000000..325c5ec --- /dev/null +++ b/bot/self-hosting/README.md @@ -0,0 +1,51 @@ +--- +description: A Guide about how to self host Ree6! +--- + +# Self hosting + +## Requirements + +* Java 17 +* 2GB Ram + +## Recommendation + +* MariaDB/MySQL + +## Pterodactyl + +Incase you want to run Ree6 via Pterodactyl visit this [self-host-with-pterodactyl.md](self-host-with-pterodactyl.md "mention") + +## Setup + +### Builds + +We have two different build types.\ + + +The first one would be development builds, these are builds that are being created when ever a change happends.\ +This can and will be unstable most of the time and might cause some Issues, but might also fix a major bug that is not in a release. + +The second one are the release builds, these have been tested and should work as intended and be stable.\ +We recommend to use these. + +#### Development builds + +These can be downloaded via our [CLI](https://github.com/Ree6-Applications/Ree6/actions/workflows/cli.yml). + +#### Release builds + +Download from our [release page](https://github.com/Ree6-Applications/Ree6/releases/latest). + +You can either download the `Ree6-[x.x.x]-jar-with-dependencies.jar` for the Bot or download our Installer.\ +The installer is called `Ree6-Installer-[x.x.x].jar`, it will help you with configurating the bot and download the latest file for you! + +### Running the Bot + +After downloading the desired file, you will need to run the file with Java.\ +Running the Bot will cause a shutdown on first boot and you will need to update the `config.yml`.\ +When using the Installer you will be prompted to configurate the bot before it downloads the latest file.\ +For more informations and the defaults of the configurations visit our Configuration page: [configurations.md](../configurations.md "mention") + +This should conclude all you need to selfhost Ree6! diff --git a/bot/self-hosting/self-host-with-pterodactyl.md b/bot/self-hosting/self-host-with-pterodactyl.md new file mode 100644 index 0000000..385f5b3 --- /dev/null +++ b/bot/self-hosting/self-host-with-pterodactyl.md @@ -0,0 +1,15 @@ +--- +description: A Guide about how to self host Ree6 with Pterodactyl! +--- + +# Self host with Pterodactyl + +Before we start you will need the Ree6 Egg!\ +You can get it from [here](https://github.com/parkervcp/eggs/tree/master/bots/discord/ree6)\ +After importing the Egg into your Pterodactyl Interface you will need to configurate your egg via Pterodactyl before running it.\ +All the required configurations should be marked as required by Pterodactyl.\ + + +## Note + +If you want to self host Ree6 instead of using Pterodactyl visit [.](./ "mention"). diff --git a/bot/streamtools.md b/bot/streamtools.md new file mode 100644 index 0000000..18255f6 --- /dev/null +++ b/bot/streamtools.md @@ -0,0 +1,219 @@ +--- +description: >- + StreamTools is a collection of features in Ree6 which aim to help out Content + Creators! +--- + +# StreamTools + +## Stream Actions + +This is a feature that allows users to make Ree6 to something based on Twitch Redemptions, Twitch Subs and Twitch Follows. + +These are all the Actions that Ree6 can do: + +| Name | Id | +| ------------------ | ----------- | +| Join Voicechannel | voice-join | +| Leave Voicechannel | voice-leave | +| Play TTS | play-tts | +| Play URL | play-url | +| Play Blerp | play-blerp | +| Say message | say | + +## Requirements + +Before we start with anything lets talk about the requirements for this!\ +You will first need to link you Twitch Account with Ree6.\ +You can do this by going onto [cp.ree6.de/external/twitch](https://cp.ree6.de/external/twitch)!\ + + +## Commands + +## Create + +With this Command we can create Stream-Actions: + +``` +/stream-action create +``` + +When creating a Stream-Action we have to give it a Name.\ +We will need that Name to manage it.\ + + +### Example + +``` +/stream-action create name:MyAction +``` + +## Delete + +As simple as it sounds, this Command deletes a Stream-Action. + +``` +/stream-action delete +``` + +When wanting to delete a Stream-Action we also have to enter a Name.\ + + +### Example + +``` +/stream-action delete name:MyAction +``` + +## Points + +With this you can see every Redemption Ree6 has access to on your Twitch Channel.\ +It will give a list that looks similiar to this one: + +``` +ID - NAME +``` + +## Manage + +This Command allows you to manage your Stream-Actions.\ +Before being able to use any of these you will need to already have a Stream-Action.\ +For that check out this: [#create](streamtools.md#create "mention")!\ + + +``` +/stream-action manage +``` + +The Manage command has 4 different subcommands, lets talk about them! + +### Create + +The first subcommand is the create Command, it allows you to create Actions in the Stream-Action.\ + + +``` +/stream-action manage create +``` + +#### Example + +Lets create a Action that lets Ree6 join a Voicechannel.\ +For that we will use a Stream-Action we previously created called `TTS`!\ + + +``` +/stream-action manage create name:TTS action:voice-join VOICEID +``` + +And the `VOICEID` will be the channel ID of the Voicechannel!\ + + +### Delete + +The second subcommand is the delete Command, it allows us to delete specific Actions in a Stream-Action.\ + + +``` +/stream-action manage delete +``` + +#### Example + +Lets delete the first Action in the Stream-Action.\ +For that we will use a Stream-Action we previously created called `TTS`!\ + + +``` +/stream-action manage delete name:TTS line:1 +``` + +### List + +The third subcommand is the list command, it allows us to list every Action in a Stream-Action.\ + + +``` +/stream-action manage list +``` + +#### Example + +Lets list all the Actions in a Stream-Action.\ +For that we will use a Stream-Action we previously created called `TTS`!\ + + +``` +/stream-action manage list name:TTS +``` + +You will receive a message that looks like this:\ + + +``` +ActionName -> ActionParameter +``` + +### Listener + +The fourth subcommand is the listener command, it allows us to let the Stream-Action listen to something.\ + + +``` +/stream-action manage listener +``` + +#### Example + +Lets let the Stream-Action listen to a Redemption.\ +For that we will use a Stream-Action we previously created called `TTS`!\ + + +``` +/stream-action manage listener name:TTS listener:redemption REDEMPTIONID +``` + +And the `REDEMPTIONID` will be the redemption ID that you found with the [points command](https://github.com/Ree6-Applications/Ree6/wiki/StreamTools#points)!\ + + +*** + +## Example + +Lets say you want to create a Stream-Action which plays a TTS Messages based on the Users Input.\ + + +### Create + +We first need to create a new Stream-Action likes this: + +``` +/stream-action create name:TTS +``` + +The name in this case is `TTS` keep that in mind since we will need the Action name to manage it. + +### Manage + +After that we will need to tell the Stream-Actions what to do!\ +To be exact, we gotta tell it to join a Voicechannel and play a TTS Mesage.\ +That would look like this: + +``` +/stream-action manage create name:TTS action:voice-join VOICEID +/stream-action manage create name:TTS action:play-tts %user_input% +``` + +In this case the `%user_input%` will take the message input of the user in a redemption.\ +And the `VOICEID` will be the channel ID of the Voicechannel!\ + + +### Listen + +And at last we need to tell the Stream-Action to listen to a specific Redemption!\ +For that we need the `REDEMPTIONID` we can get that one by running the [#points](streamtools.md#points "mention") command!\ +Once you have the right ID we execute this command: + +``` +/stream-action manage listen name:TTS listen:redemption REDEMPTIONID +``` diff --git a/bot/translations.md b/bot/translations.md new file mode 100644 index 0000000..4902213 --- /dev/null +++ b/bot/translations.md @@ -0,0 +1,9 @@ +# Translations + +The translations are mostly made by the community. + +You can support us by participating over here at [Crowdin](https://crowdin.com/project/ree6) + +## Placeholders + +We use %s for parameters. Placeholder starting and ending with a : are discord emojis. diff --git a/bot/troubleshooting.md b/bot/troubleshooting.md new file mode 100644 index 0000000..095babc --- /dev/null +++ b/bot/troubleshooting.md @@ -0,0 +1,3 @@ +# Troubleshooting + +If you run into Issues we recommend opening a Issue [here](https://github.com/Ree6-Applications/Ree6/issues). diff --git a/features/community.md b/features/community.md new file mode 100644 index 0000000..7a98f39 --- /dev/null +++ b/features/community.md @@ -0,0 +1,22 @@ +--- +description: Features that allow you to build up a community! +--- + +# Community + +## Notifier + +Our Notifier System allows you to setup Notification Messages on any channel for YouTube uploads, Twitch Streams and Reddit posts! + +## Birthday Reminder + +You can make Ree6 remind you or anyone else about specific Birthdays! + +## Statistics Channels + +Ree6 allows you to make channels that represent different stats related to YouTube, Twitter, Twitch, Reddit and the Server itself! + +## Welcome Message + +You can add a custom Welcome Message even with Images! + diff --git a/features/music-system.md b/features/music-system.md new file mode 100644 index 0000000..52456b5 --- /dev/null +++ b/features/music-system.md @@ -0,0 +1,14 @@ +--- +description: Ree6 has multiple feature for people that love music! +--- + +# Music System + +## Music Player + +We have a Music Player that allows you to loop songs and shuffle through them!\ +As sources we support YouTube, Spotify, Vimeo, Bandcamp, Twitch, SoundCloud and Blerp! + +## Music Panel + +Our Music Panel allows you to control the Music Player with simple buttons! diff --git a/webinterface/self-hosting.md b/webinterface/self-hosting.md new file mode 100644 index 0000000..61f54e4 --- /dev/null +++ b/webinterface/self-hosting.md @@ -0,0 +1,135 @@ +--- +description: A Guide about how to self host Ree6's Webinterface! +--- + +# Self hosting + +## Requirements + +* Java 17 +* NodeJS 18 + +## Recommendation + +* MariaDB/MySQL + +### Frontend + +For the Frontend you will need to host the Svelte application either locally or on a hoster.\ +We recommend to use Netlify for this, because it allows a quick and easy setup without installing anything! + +### Backend + +For the Backend we recommend to hide it behind a reverse proxy.\ +Our recommendation is Cloudflare Tunnels! + +## Setup + +#### Disclaimer + +We will be using [Cloudflare Tunnels](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/) and Netlify for this setup example. + +### Preperation + +Before we can start we will need to either download the Frontend part of the Webinterface or just fork the Repo!\ +We will be forking the Repo in our example. + +### Frontend + +First we will need to visit the [Netlify page](https://app.netlify.com/).\ +After creating a new account or login into your already existing account, we will be creating a new site!\ +Instead of creating a new one and uploading the files we will be setting it up using Github!\ + + +For that we will need to go into the dashboard of Netlify and Press on `Import from Git`. + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/1478f946-2547-4d1c-86fe-4e16ee5b9a52) + +We will then be asked to connect to a Git Provider, we will be using Github for this.\ +When selecting Github and, if required, authorized, we will see all our repos.\ +And we will need to select our fork of the Webinterface repo! + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/07031345-347b-41b9-8e42-2fd302a626ef) + +Once selected you will see this page. + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/6e085c8a-0a65-443f-97ec-f48f4c7ffbd8) + +We will need to set `Frontend/` as base directory to allow netlify to know where our Frontend is located. + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/53a25f4d-332f-4e0e-882e-c1c3e35ea1de) + +After entering the right base directory Netlify should automaticly fill the build command.\ +Now that we finished up the setting up we can deploy it easily! + +Once we deployed our application we have the ability to use a custom subdomain!\ +Please visit [this page](https://www.netlify.com/blog/how-to-bring-a-subdomain-to-netlify-dns/) for more information about this. + +### Backend + +After downloading the latest release file we just run it on our server/host machine!\ +Once the config has been created we stop the Backend again and configurate the config.\ +We will first need to enter our Discord credentials: + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/5ced49fc-aef9-406c-b034-664ff5f073fe) + +Once we set our Discord credentials we should continue to set our SQL entries and setup the Webinterface specific configuration.\ +We will need to set the `discordRedirect` to the url of our Frontend + `/login`.\ +for me this would be `https://backend-setup.netlify.app/login`.\ +The same value should be set for `loginRedirect`.\ +At last we need to set the `allowedDomains`, we recommend to use `*.DOMAIN` if using a custom subdomain.\ + + +For our example we are are going to use `https://backend-setup.netlify.app/`, because we have not setuped a custom subdomain.\ +Your config should look like this: + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/c412a807-1175-44e0-af66-373dea0ea2e6) + +Once the config is done, we can just start the backend!\ +After starting we will need to setup our reverse proxy, as said we are using Cloudflare Tunnels in this case.\ +If you want to use Cloudflare Tunnels and have not yet installed it we recommend reading the official guide [here](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/tunnel-guide/remote/#1-create-a-tunnel)\ + + +Once the Tunnel has been created, we make a new subdomain pointing to our application.\ +We can check if it worked by just sending a get request to the domain.\ +You should get a responds like in the image from the server: + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/4280a2e4-2b90-4d07-bb0e-18afdc16c1c4) + +Now that we have a working subdomain we will need to set it in the Frontend. + +### Connecting the Frontend with the Backend + +To connect the Frontend with the Backend we will need to go into the code of the Frontend.\ +There is a file in `src/lib/scripts/` called `constants.ts`.\ + + +In there we change this part: + +![image](https://github.com/Ree6-Applications/Webinterface/assets/53257574/b342c498-cdd1-4ff3-92c6-70d8f0dcafd0) + +To the domain of our backend!\ +For me this would be `https://api.heav.lol`.\ +Once Netlify has deployed the change you should be all good to use the new Frontend! + +## Troubleshooting + +### Invalid OAuth2 redirect\_uri + +This means you have not entered the login redirect in the OAuth2 settings on Discord. + +1. Go to the [Discord Developer Portal](https://discord.com/developers/applications) and sign in to your account. +2. Once you're signed in, click on the "New Application" button in the top right corner of the screen. +3. Select your Application +4. In the left-hand menu, click on the "OAuth2" tab. +5. Under the "OAuth2 Redirects" section, click the "Add Redirect" button. +6. Copy & paste the Redirect Login URL into the text field. +7. Click "Save changes" button. + +### How do I get my Client code and secret? + +1. Go to the [Discord Developer Portal](https://discord.com/developers/applications) and sign in to your account. +2. Once you're signed in, click on the "New Application" button in the top right corner of the screen. +3. Enter a name for your application and click the "Create" button. +4. In the left-hand menu, click on the "OAuth2" tab. +5. Copy the "Client ID" and "Client secret" and put them into the config file of the Backend.