{"id":18317485,"url":"https://github.com/telegram-mini-apps/reactjs-template","last_synced_at":"2025-08-30T15:05:23.227Z","repository":{"id":205540162,"uuid":"714473018","full_name":"Telegram-Mini-Apps/reactjs-template","owner":"Telegram-Mini-Apps","description":"Telegram Mini Apps application template using React, tma.js, TypeScript and Vite.","archived":false,"fork":false,"pushed_at":"2025-08-24T14:45:15.000Z","size":800,"stargazers_count":364,"open_issues_count":1,"forks_count":125,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-30T15:03:49.238Z","etag":null,"topics":["react","typescript","vite"],"latest_commit_sha":null,"homepage":"https://t.me/tmajsbot/react_example","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Telegram-Mini-Apps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-05T00:16:28.000Z","updated_at":"2025-08-30T12:21:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"d3528d99-a6d8-40ab-b2fd-1328da8e9ada","html_url":"https://github.com/Telegram-Mini-Apps/reactjs-template","commit_stats":null,"previous_names":["telegram-mini-apps/reactjs-template"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/Telegram-Mini-Apps/reactjs-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Freactjs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Freactjs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Freactjs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Freactjs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Telegram-Mini-Apps","download_url":"https://codeload.github.com/Telegram-Mini-Apps/reactjs-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telegram-Mini-Apps%2Freactjs-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272864641,"owners_count":25006040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","typescript","vite"],"created_at":"2024-11-05T18:06:18.929Z","updated_at":"2025-08-30T15:05:23.183Z","avatar_url":"https://github.com/Telegram-Mini-Apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Telegram Mini Apps React Template\n\nThis template demonstrates how developers can implement a single-page\napplication on the Telegram Mini Apps platform using the following technologies\nand libraries:\n\n- [React](https://react.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)\n- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk/2-x)\n- [Telegram UI](https://github.com/Telegram-Mini-Apps/TelegramUI)\n- [Vite](https://vitejs.dev/)\n\n\u003e The template was created using [npm](https://www.npmjs.com/). Therefore, it is\n\u003e required to use it for this project as well. Using other package managers, you\n\u003e will receive a corresponding error.\n\n## Install Dependencies\n\nIf you have just cloned this template, you should install the project\ndependencies using the command:\n\n```Bash\nnpm install\n```\n\n## Scripts\n\nThis project contains the following scripts:\n\n- `dev`. Runs the application in development mode.\n- `dev:https`. Runs the application in development mode using locally created valid SSL-certificates.\n- `build`. Builds the application for production.\n- `lint`. Runs [eslint](https://eslint.org/) to ensure the code quality meets\n  the required standards.\n- `deploy`. Deploys the application to GitHub Pages.\n\nTo run a script, use the `npm run` command:\n\n```Bash\nnpm run {script}\n# Example: npm run build\n```\n\n## Create Bot and Mini App\n\nBefore you start, make sure you have already created a Telegram Bot. Here is\na [comprehensive guide](https://docs.telegram-mini-apps.com/platform/creating-new-app)\non how to do it.\n\n## Run\n\nAlthough Mini Apps are designed to be opened\nwithin [Telegram applications](https://docs.telegram-mini-apps.com/platform/about#supported-applications),\nyou can still develop and test them outside of Telegram during the development\nprocess.\n\nTo run the application in the development mode, use the `dev` script:\n\n```bash\nnpm run dev:https\n```\n\n\u003e [!NOTE]\n\u003e As long as we use [vite-plugin-mkcert](https://www.npmjs.com/package/vite-plugin-mkcert),\n\u003e launching the dev mode for the first time, you may see sudo password request.\n\u003e The plugin requires it to properly configure SSL-certificates. To disable the plugin, use the `npm run dev` command.\n\nAfter this, you will see a similar message in your terminal:\n\n```bash\nVITE v5.2.12  ready in 237 ms\n\n➜  Local:   https://localhost:5173/reactjs-template\n➜  Network: https://172.18.16.1:5173/reactjs-template\n➜  Network: https://172.19.32.1:5173/reactjs-template\n➜  Network: https://192.168.0.171:5173/reactjs-template\n➜  press h + enter to show help\n```\n\nHere, you can see the `Local` link, available locally, and `Network` links\naccessible to all devices in the same network with the current device.\n\nTo view the application, you need to open the `Local`\nlink (`https://localhost:5173/reactjs-template` in this example) in your\nbrowser:\n\n![Application](assets/application.png)\n\nIt is important to note that some libraries in this template, such as\n`@telegram-apps/sdk`, are not intended for use outside of Telegram.\n\nNevertheless, they appear to function properly. This is because the\n`src/mockEnv.ts` file, which is imported in the application's entry point (\n`src/index.ts`), employs the `mockTelegramEnv` function to simulate the Telegram\nenvironment. This trick convinces the application that it is running in a\nTelegram-based environment. Therefore, be cautious not to use this function in\nproduction mode unless you fully understand its implications.\n\n\u003e [!WARNING]\n\u003e Because we are using self-signed SSL certificates, the Android and iOS\n\u003e Telegram applications will not be able to display the application. These\n\u003e operating systems enforce stricter security measures, preventing the Mini App\n\u003e from loading. To address this issue, refer to\n\u003e [this guide](https://docs.telegram-mini-apps.com/platform/getting-app-link#remote).\n\n## Deploy\n\nThis boilerplate uses GitHub Pages as the way to host the application\nexternally. GitHub Pages provides a CDN which will let your users receive the\napplication rapidly. Alternatively, you could use such services\nas [Heroku](https://www.heroku.com/) or [Vercel](https://vercel.com).\n\n### Manual Deployment\n\nThis boilerplate uses the [gh-pages](https://www.npmjs.com/package/gh-pages)\ntool, which allows deploying your application right from your PC.\n\n#### Configuring\n\nBefore running the deployment process, ensure that you have done the following:\n\n1. Replaced the `homepage` value in `package.json`. The GitHub Pages deploy tool\n   uses this value to\n   determine the related GitHub project.\n2. Replaced the `base` value in `vite.config.ts` and have set it to the name of\n   your GitHub\n   repository. Vite will use this value when creating paths to static assets.\n\nFor instance, if your GitHub username is `telegram-mini-apps` and the repository\nname is `is-awesome`, the value in the `homepage` field should be the following:\n\n```json\n{\n  \"homepage\": \"https://telegram-mini-apps.github.io/is-awesome\"\n}\n```\n\nAnd `vite.config.ts` should have this content:\n\n```ts\nexport default defineConfig({\n  base: '/is-awesome/',\n  // ...\n});\n```\n\nYou can find more information on configuring the deployment in the `gh-pages`\n[docs](https://github.com/tschaub/gh-pages?tab=readme-ov-file#github-pages-project-sites).\n\n#### Before Deploying\n\nBefore deploying the application, make sure that you've built it and going to\ndeploy the fresh static files:\n\n```bash\nnpm run build\n```\n\nThen, run the deployment process, using the `deploy` script:\n\n```Bash\nnpm run deploy\n```\n\nAfter the deployment completed successfully, visit the page with data according\nto your username and repository name. Here is the page link example using the\ndata mentioned above:\nhttps://telegram-mini-apps.github.io/is-awesome\n\n### GitHub Workflow\n\nTo simplify the deployment process, this template includes a\npre-configured [GitHub workflow](.github/workflows/github-pages-deploy.yml) that\nautomatically deploys the project when changes are pushed to the `master`\nbranch.\n\nTo enable this workflow, create a new environment (or edit the existing one) in\nthe GitHub repository settings and name it `github-pages`. Then, add the\n`master` branch to the list of deployment branches.\n\nYou can find the environment settings using this\nURL: `https://github.com/{username}/{repository}/settings/environments`.\n\n![img.png](.github/deployment-branches.png)\n\nIn case, you don't want to do it automatically, or you don't use GitHub as the\nproject codebase, remove the `.github` directory.\n\n### GitHub Web Interface\n\nAlternatively, developers can configure automatic deployment using the GitHub\nweb interface. To do this, follow the link:\n`https://github.com/{username}/{repository}/settings/pages`.\n\n## TON Connect\n\nThis boilerplate utilizes\nthe [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)\nproject to demonstrate how developers can integrate functionality related to TON\ncryptocurrency.\n\nThe TON Connect manifest used in this boilerplate is stored in the `public`\nfolder, where all publicly accessible static files are located. Remember\nto [configure](https://docs.ton.org/develop/dapps/ton-connect/manifest) this\nfile according to your project's information.\n\n## Useful Links\n\n- [Platform documentation](https://docs.telegram-mini-apps.com/)\n- [@telegram-apps/sdk-react documentation](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk-react)\n- [Telegram developers community chat](https://t.me/devs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelegram-mini-apps%2Freactjs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftelegram-mini-apps%2Freactjs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelegram-mini-apps%2Freactjs-template/lists"}