Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

skychik/twa-react-example

Open more actions menu

Repository files navigation

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)

Releases

No releases published

Packages

 
 
 

Contributors

Morty Proxy This is a proxified and sanitized view of the page, visit original site.