Analog Svelte

This is a typescript template for building Discord bots with a dashboard. It uses SvelteKit, TailwindCSS, Discord.JS, Sapphire, Authy, and Prisma.

Discord Bot

Uses the Sapphire Framework

Dashboard features

SvelteKit
Typescript
Authjs - For easy authentication
TailwindCSS

Getting Started

Initial Setup

git clone https://github.com/analog-org/analog-svelte.git
cd analog-svelte
npm i

ENV Variables

Copy .env.example and paste it in the main directory
Rename it to just .env
Fill in the values for the environment variables

Create an APP on Discord Developer Portal
Create a bot user and copy the token
Put the token you copied in the DISCORD_BOT_TOKEN variable in the .env file
To get the DISCORD_CLIENT_ID and NEXT_PUBLIC_DISCORD_CLIENT_ID values, go to the OAuth2 tab in your application and copy the Client ID value
To get the DISCORD_CLIENT_SECRET value, go to the OAuth2 tab in your application and copy the Client Secret value (or reset the secret and copy the new one)
For NEXTAUTH_SECRET you can generate a random 32 character string by doing openssl rand -base64 32 or at generate.plus
NEXTAUTH_URL is the URL of your website (e.g. http://localhost:3000, https://analog.org, https://panel.bossdaily.me)

Your .env file should endup looking like this

DISCORD_CLIENT_ID="61266727282091783"
DISCORD_BOT_TOKEN="OTI2Nnrjh9ia03ndNTIw.GjSdq1.bh2983-34yhtg9wasn9iy34ifgkaopneianwh"
NEXT_PUBLIC_DISCORD_CLIENT_ID="61266727282091783"
DISCORD_CLIENT_SECRET="uqerhgeas2HxewZQfdggK9gl-KLcnbgja"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="34gaw9jmig04jma0hi-mwaehawh-KLcnbgja"

:::tip ENV Variables are global You can use any ENV variables you add here anywhere in the project :::

Starting The Bot

To start the bot & the dashboard you have to be in the root directory of the project and run the following command

npm start

Developer mode

You can do

npm run dev

To get into developer mode, meaning the bot or the dashboard restart & recompile on code changes

Top categories