This is a web interface to the etkot telegram bot, that allows viewing stats etc.
The frontend is made purely with vanilla js. But because typescript is fun it has a minimal build step made with esbuild.
cd frontend
yarn install
yarn dev
If you just want to get it up and running I recommend the yarn dev
command. But if you want to debug the telegram login system you need to use the yarn sudo-dev
command.
This runs the last node command as root, so that we can bind to 127.0.0.1:80. Telegram Login iframe only works on locahost if it's on http://127.0.0.1:80 and ports under 1024
can only be binded with root. You also need to make sure you have node configured for the root user. (Help here)
About file structure; The public
folder holds all .html files that aren't templates. .ts Files inside the src/routes/
folder work as esbuild entry points and will be outputted to public/
.
To include .css files you need to import them in corresponding .ts files and .html files. .html files imported inside .ts files will be compiled to string (Usefull for defining templates for components).
The backend uses a pretty complex setup of GraphQL, Apollo, TypeScript code gen and mongoose models. (It's all just to get 100% typed code)
OBS! If you make changes to schema.graphql or other graphql definitions you need to run yarn generate
to get the new types code.
You also need to have a instance of etkot bot mongoDB running and set the envs correcly for that.
Recommended VSCode extensions include:
To get the extension going you need to make sure you have the graphql.config.json in vscode project root, or point to it in settings.
cd backend
yarn install
yarn dev
This will open a playground to test the graphql queries in http://localhost:5000/graphql
(By default).