Telegram Web App
Interface
Technical details
The app is based on the ReactJS JavaScript framework and TDLib (Telegram Database library) compiled to WebAssembly. Try it here.
Running locally
- Obtaining Telegram api keys.
Please visit this page for details.
- Setup .env file.
Manually copy Telegram api keys from previous step into REACT_TELEGRAM_API_ID and REACT_TELEGRAM_API_HASH at .env file.
-
Install node.js & npm. Probably, you should use nvm.
-
Install dependencies.
npm ci
All TDLib files will be installed into node_modules/tdweb/dist/ folder.
- Manually copy TDLib files into the public folder.
cp node_modules/tdweb/dist/* public/
- Run the app in development mode.
npm run start
Open http://localhost:3000 to view it in the browser.
Deploying to GitHub Pages
- Obtaining Telegram api keys.
Please visit this page for details.
- Setup .env file.
Manually copy Telegram api keys from previous step into REACT_TELEGRAM_API_ID and REACT_TELEGRAM_API_HASH at .env file.
- Update homepage property at the app's
package.json
file.
Define its value to be the string https://{username}.github.io/{repo-name}
, where {username}
is your GitHub username, and {repo-name}
is the name of the GitHub repository. Since my GitHub username is evgeny-nadymov
and the name of my GitHub repository is telegram-react
, I added the following property:
//...
"homepage": "https://evgeny-nadymov.github.io/telegram-react"
- Generate a production build of your app and deploy it to GitHub Pages.
npm run deploy
Running in a Docker container
- Obtaining Telegram api keys.
Please visit this page for details.
- Provide your Telegram api keys as build arguments.
docker build . --build-arg TELEGRAM_API_ID=0000000 --build-arg TELEGRAM_API_HASH=00000000000000000
The Docker build will perform all the necessary steps to get a working build of Telegram-React.