How to setup the dashboard?

[Shmalle]

I wanted to setup the bots dashboard but I got no clue how to continue. I also want to connect a custom domain to is (like https://dashboard.mydomain.xyz)

[Androz2091]

Hello 👋

Here is a step-by-step tutorial to learn how to launch the dashboard. You will need a domain and a VPS (Virtual Private Server) to host the bot (debian 10 would be the best).

Note: For this tutorial, I will use dashboard.mydomain.xyz for the domain name, use your own domain instead

Estimated time

• ~1 hour if you take the time to read everything
• more than 5 hours if you don't take the time to read everything and accidentally break things

All in all, this tutorial is complex. Don't try to go too fast and follow the steps carefully, taking the time to read everything. Good luck! 💪

Step 1 : edit the config file 🔧

So, first of all, edit the dashboard part of your config file so it looks like this:

dashboard: {
		enabled: true,
		baseURL: "http://dashboard.mydomain.xyz",
		port: 8080,
		failureURL: "http://dashboard.mydomain.xyz",

        // read below to learn how to edit these values
		logs: "",
		secret: "",
		expressSessionPassword: "",
},

• secret should be your client secret. It can be found at https://discord.dev in your application settings.
• expressSessionPassword should be a totally random password. (for example IL0v3Atlanta)
• logs should be the ID of a channel of your server, where the logs will be sent.

Once your config file is updated, restart your bot.

Step 2 : configure the server (VPS) 💻

Note: this tutorial was created with a VPS using Debian 10. Some things can change depending on the OS you're using.

This tutorial is only about setting up the dashboard and we consider that you already have your bot running on your VPS.
To check if everything is working, go to http://YOUR_VPS_IP:8080 (replace YOUR_VPS_IP by the IP of your VPS but keep :8080). You should be redirected to Discord and get a "Invalid redirect URI" error.

Install Apache2 🕸️

Tip: What we will create in this section is called a "Reverse Proxy" so we can redirect all the requests from https://dashboard.mydomain.xyz to http://localhost:8080. Feel free to search Google to find out more about it and/or if you encounter any problems.

Run the following commands on your VPS (they must be run using a root account):

• apt-get update
• apt-get install apache2
• a2enmod ssl
• a2enmod proxy
• a2enmod rewrite
• a2enmod headers
• ln -s /etc/apache2/mods-available/proxy_http.load \
• /etc/apache2/mods-enabled/proxy_http.load
• apache2ctl configtest
• apache2ctl graceful
• /etc/init.d/apache2 restart

If you didn't get any errors, that's great! Congratulations, your server is almost ready 🎉

You now have to create an Apache configuration for your dashboard. On your server (using FTP or SSH commands), create a file in the following directory: /etc/apache2/sites-availables called atlanta.conf. Then, edit it and put this into:

<VirtualHost *:80>

    ServerName dashboard.mydomain.xyz

    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/

</VirtualHost>

Be aware, don't forget to replace dashboard.mydomain.xyz by your domain! ⚠️
Then, run this command:

a2ensite atlanta && /etc/init.d/apache2 reload

And you are done. Your Apache server is configured!

Step 3 : edit the domain name DNS 🌐

• Go to your domain provider. (for example cloudflare.com or namecheap.com)
• Open DNS records settings page.
• Add a A entry, with your VPS IP for the content.
• Set the TTL to the lowest available value.
• You are done!

Example screenshot:

Tip: 149.91.89.127 is the IP address of the server I use to host Atlanta. As you can see, you can open 149.91.89.127:8080, and you will be redirected to the bot's dashboard. https://dashboard.atlanta-bot.fr is just an alias of 149.91.89.127:8080

This can take time. Usually, DNS records are updated in 20-30 minutes but it can take 24 hours, depending on your DNS server and on your domain provider.

Step 4 : configure your discord app

This is the last step of the tutorial, and it is really easy. Go to your discord developer dashboard (https://discord.dev) and edit your application settings.

• Go to OAuth2 tab.
• Add a redirect URL with the following content: http://dashboard.mydomain.xyz/api/callback)

It should looks like this:

Congratulations, you did it 🎉

Congratulations, you now have your dashboard hosted on your server! If you need more help, we are available on Discord to help you https://www.atlanta-bot.fr/discord. And if you want more tutorials you can add a star to this repository ⭐

Use an SSL certificate to support HTTPS 🔒

Will be written soon
Add a star ⭐
React with 👍 to support

[joeyk710]

Is there a way to host the dashboard from localhost instead?

[lambor590]

Yes please

[Androz2091]

You can read this tutorial 😉

[Shmalle]

Thanks a lot for this, really helped me out and gave me directions!

I got a question tho: What do we need Apache for? I found out that on Windows, you wouldn't need APACHE, technically_, since its working just with what the bot itself gives. I can finally do http://dashboard.mydomain.xyz:8080 to get authorization screen and then the dashboard. No HTTPS and I am working on getting the :8080 away, its a little bit tricky with just "estimating" what means what. Remember: I am using Windows (HyperV-2019) since I am too *** for setting up Debian and that.
Cheers.

[Just-A-Noname]

Uhm, is this right? If I try to connect to my Server-IP with port 8080 I'll get redirected to discord but with the error: Invalid OAuth2 redirect_uri

[Shmalle]

Did you set up everything within Discord as well?

[Just-A-Noname]

It worked!

[FriiZoLoGYy]

Following this I have not been able to get the dashboard up any ideas?

[Shmalle]

Do you get any error-messages?