Telegram Web App example

• react
• vite
• SWC - bundler and more
• @twa.js/sdk-react
• ngrok – for developing environment
• @swan-io/chicane - router with Typescript
• tailwind - styling framework (opinionated, but I want to use it)

Usage

Dev

npm install npm run dev

Prod

npm build

Setup dev environment

1. Install ngrok https://ngrok.com/docs/getting-started#step-2-install-the-ngrok-agent
2. ngrok config add-authtoken TOKEN with your token from ngrok dashboard
3. run ngrok http 5173, where 5173 is the port of your launched site in dev mode
4. Setup menu button in BotFather
   1. send /setmenubutton
   2. pass link, that was generated by ngrok
   3. set some name for you menu button
5. Wait for changes in your bot (around 5-30 seconds)
6. Launch web app in your bot
7. Agree with ngrok info page (press the button)
8. Turn on console in your tg client
   1. First way: via tg app settings
      1. Click 5-10 times in Settings button in tg app
      2. Turn on Web App Debug mode
   2. Second way: use eruda (https://github.com/liriliri/eruda)
      1. add to head in index.html <script src="https://cdn.jsdelivr.net/npm/eruda@2.10.0/eruda.min.js"></script>
      2. turn it on by (window as any).eruda.init(); (somehow, mb in index.html)