|
| 1 | +# Vanilla JS example |
| 2 | + |
| 3 | +> ⚠️ Please, avoid using vanilla JavaScript if possible on Telegram Mini Apps |
| 4 | +> platform. It is better to use ES modules at least. [Learn more](#about-iife). |
| 5 | +
|
| 6 | +This example shows how developer could use Vanilla JavaScript to start developing at |
| 7 | +Telegram Mini Apps platform. |
| 8 | + |
| 9 | +This template demonstrates how developers can implement an application on the Telegram |
| 10 | +Mini Apps platform using the following technologies and libraries |
| 11 | + |
| 12 | +- [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview) |
| 13 | +- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk) |
| 14 | + |
| 15 | +> This boilerplate was created using [pnpm](https://pnpm.io/). Therefore, it is required to use |
| 16 | +> it for this project as well. |
| 17 | +
|
| 18 | +## Install Dependencies |
| 19 | + |
| 20 | +If you have just cloned this template, you should install the project dependencies using the |
| 21 | +command: |
| 22 | + |
| 23 | +```Bash |
| 24 | +pnpm install |
| 25 | +``` |
| 26 | + |
| 27 | +## Scripts |
| 28 | + |
| 29 | +This project contains the following scripts: |
| 30 | + |
| 31 | +- `serve`. Runs the HTTP server to serve `./dist/index.html`. |
| 32 | +- `tunnel`. Runs tunnel to locally launched HTTP server. |
| 33 | + |
| 34 | +`tunnel` command will return a URL which has to be used by [@BotFather](https://t.me/botfather). Bind |
| 35 | +it to your Mini App and open the application. |
| 36 | + |
| 37 | +To run a script, use the `pnpm run` command: |
| 38 | + |
| 39 | +```Bash |
| 40 | +pnpm run {script} |
| 41 | +# Example: pnpm run serve |
| 42 | +``` |
| 43 | + |
| 44 | +## Create Bot and Mini App |
| 45 | + |
| 46 | +Before you start, make sure you have already created a Telegram Bot. Here is |
| 47 | +a [comprehensive guide](https://docs.telegram-mini-apps.com/platform/creating-new-app) on how to |
| 48 | +do it. |
| 49 | + |
| 50 | +## Run |
| 51 | + |
| 52 | +Although Mini Apps are designed to be opened |
| 53 | +within [Telegram applications](https://docs.telegram-mini-apps.com/platform/about#supported-applications), |
| 54 | +you can still develop and test them outside of Telegram during the development process. |
| 55 | + |
| 56 | +To serve `./dist/index.html`, use the `serve` script: |
| 57 | + |
| 58 | +```bash |
| 59 | +pnpm run serve |
| 60 | +``` |
| 61 | + |
| 62 | +After this, you will see a similar message in your terminal: |
| 63 | + |
| 64 | +```bash |
| 65 | +Serving! |
| 66 | + - Local: http://localhost:3000 |
| 67 | + - Network: http://192.168.0.117:3000 |
| 68 | +``` |
| 69 | + |
| 70 | +Here, you can see the `Local` link, available locally, and `Network` links accessible to all |
| 71 | +devices in the same network with the current device. |
| 72 | + |
| 73 | +To view the application, you need to open the `Local` |
| 74 | +link (`http://localhost:3000` in this example) in your browser. |
| 75 | + |
| 76 | +It is important to note that some libraries in this template, such as `@telegram-apps/sdk`, are not |
| 77 | +intended for use outside of Telegram. |
| 78 | + |
| 79 | +Nevertheless, they appear to function properly. This is because the `dist/js/mockEnv.ts` file, which is |
| 80 | +imported in the application's entry point (`dist/index.html`), employs the `mockTelegramEnv` function |
| 81 | +to simulate the Telegram environment. This trick convinces the application that it is running in a |
| 82 | +Telegram-based environment. Therefore, be cautious not to use this function in production mode |
| 83 | +unless you fully understand its implications. |
| 84 | + |
| 85 | +### Run Inside Telegram |
| 86 | + |
| 87 | +Although it is possible to run the application outside of Telegram, it is recommended to develop it |
| 88 | +within Telegram for the most accurate representation of its real-world functionality. |
| 89 | + |
| 90 | +To run the application inside Telegram, [@BotFather](https://t.me/botfather) requires an HTTPS link. |
| 91 | + |
| 92 | +This template already provides a solution. |
| 93 | + |
| 94 | +Run next script: |
| 95 | + |
| 96 | +```bash |
| 97 | +pnpm run tunnel |
| 98 | +``` |
| 99 | + |
| 100 | +After this, you will see a similar message in your terminal: |
| 101 | + |
| 102 | +```bash |
| 103 | +your url is: https://odd-yaks-smash.loca.lt |
| 104 | +``` |
| 105 | + |
| 106 | +Once the application is displayed correctly, submit one of the `Network` links as the Mini App link |
| 107 | +to [@BotFather](https://t.me/botfather). Then, navigate |
| 108 | +to [https://web.telegram.org/k/](https://web.telegram.org/k/), find your bot, and launch the |
| 109 | +Telegram Mini App. This approach provides the full development experience. |
| 110 | + |
| 111 | +## About IIFE |
| 112 | + |
| 113 | +### Dependencies |
| 114 | + |
| 115 | +Some of the packages use other `@tma.js` packages as dependencies. In this case there are 2 |
| 116 | +ways of importing them: |
| 117 | + |
| 118 | +1. **By inserting another `script` tag which loads the dependency**. |
| 119 | + This way makes usage of package with a lot of dependencies almost unreal. |
| 120 | +2. **By inlining these packages**. |
| 121 | + This way leads to code duplication between several packages using the same package as dependency. |
| 122 | + |
| 123 | +As you can see, there is no optimal solution between both of them. As the additional problem |
| 124 | +developer gets here, is bundler is unable to |
| 125 | +use [tree shaking](https://stackoverflow.com/questions/45884414/what-is-tree-shaking-and-why-would-i-need-it), |
| 126 | +making browser to load the code not used in the application. Imagine using the only 1 function from |
| 127 | +some library like `lodash`, but fully load it. |
| 128 | + |
| 129 | +### Unknown target |
| 130 | + |
| 131 | +The other problem developer can face is IIFE packages are built for the specific browser of specific |
| 132 | +version. So, the package author does not know which target he should choose as long as he doesn't |
| 133 | +know it when creating such package. That's why the the package target should be lowered to support |
| 134 | +most part of browsers, but this also make final bunlde bigger. |
| 135 | + |
| 136 | +### Conclusion |
| 137 | + |
| 138 | +Unfortunately, developer is unable to avoid these problems when using IIFE format. This is the |
| 139 | +reason why it is recommended to use modern technologies along with ESM format. |
| 140 | + |
| 141 | +### When there is no other choice |
| 142 | + |
| 143 | +First of all, it is required to load the package. Developer could use [JSDelivr](https://www.jsdelivr.com/) |
| 144 | +to do it: |
| 145 | + |
| 146 | +```html |
| 147 | + |
| 148 | +<head> |
| 149 | + <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/sdk/dist/index.iife.js"></script> |
| 150 | +</head> |
| 151 | +``` |
| 152 | + |
| 153 | +Loaded packages of `@telegram-apps` in IIFE format are accessible by path `window.telegramApps.*`: |
| 154 | + |
| 155 | +```html |
| 156 | + |
| 157 | +<head> |
| 158 | + <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/sdk/dist/index.iife.js"></script> |
| 159 | +</head> |
| 160 | +<body> |
| 161 | + <script> |
| 162 | + var sdk = window.telegramApps.sdk; |
| 163 | + console.log(sdk.retrieveLaunchData()); |
| 164 | + </script> |
| 165 | +</body> |
| 166 | +``` |
| 167 | + |
| 168 | +> ⚠️ In this example we did not specify the exact version of required package. In this case, |
| 169 | +> JSDelivr CDN will return the latest version of the package which in some cases may lead to |
| 170 | +> unexpected behavior. To prevent such case, specify the exact version. |
| 171 | +
|
| 172 | + |
| 173 | + |
| 174 | +## Deploy |
| 175 | + |
| 176 | +This boilerplate uses GitHub Pages as the way to host the application externally. GitHub Pages |
| 177 | +provides a CDN which will let your users receive the application rapidly. Alternatively, you could |
| 178 | +use such services as [Heroku](https://www.heroku.com/) or [Vercel](https://vercel.com). |
| 179 | + |
| 180 | +### Manual Deployment |
| 181 | + |
| 182 | +This boilerplate uses the [gh-pages](https://www.npmjs.com/package/gh-pages) tool, which allows |
| 183 | +deploying your application right from your PC. |
| 184 | + |
| 185 | +#### Configuring |
| 186 | + |
| 187 | +Before running the deployment process, ensure that you have done the following: |
| 188 | + |
| 189 | +1. Replaced the `homepage` value in `package.json`. The GitHub Pages deploy tool uses this value to |
| 190 | + determine the related GitHub project. |
| 191 | + |
| 192 | +For instance, if your GitHub username is `telegram-mini-apps` and the repository name |
| 193 | +is `is-awesome`, the value in the `homepage` field should be the following: |
| 194 | + |
| 195 | +```json |
| 196 | +{ |
| 197 | + "homepage": "https://telegram-mini-apps.github.io/is-awesome" |
| 198 | +} |
| 199 | +``` |
| 200 | + |
| 201 | +You can find more information on configuring the deployment in the `gh-pages` |
| 202 | +[docs](https://github.com/tschaub/gh-pages?tab=readme-ov-file#github-pages-project-sites). |
| 203 | + |
| 204 | +#### Before Deploying |
| 205 | + |
| 206 | +Then, run the deployment process, using the `deploy` script: |
| 207 | + |
| 208 | +```Bash |
| 209 | +pnpm run deploy |
| 210 | +``` |
| 211 | + |
| 212 | +After the deployment completed successfully, visit the page with data according to your |
| 213 | +username and repository name. Here is the page link example using the data mentioned above: |
| 214 | +https://telegram-mini-apps.github.io/is-awesome |
| 215 | + |
| 216 | +### GitHub Workflow |
| 217 | + |
| 218 | +To simplify the deployment process, this template includes a |
| 219 | +pre-configured [GitHub workflow](.github/workflows/github-pages-deploy.yml) that automatically |
| 220 | +deploys the project when changes are pushed to the `master` branch. |
| 221 | + |
| 222 | +To enable this workflow, create a new environment (or edit the existing one) in the GitHub |
| 223 | +repository settings and name it `github-pages`. Then, add the `master` branch to the list of |
| 224 | +deployment branches. |
| 225 | + |
| 226 | +You can find the environment settings using this |
| 227 | +URL: `https://github.com/{username}/{repository}/settings/environments`. |
| 228 | + |
| 229 | + |
| 230 | + |
| 231 | +In case, you don't want to do it automatically, or you don't use GitHub as the project codebase, |
| 232 | +remove the `.github` directory. |
| 233 | + |
| 234 | +### GitHub Web Interface |
| 235 | + |
| 236 | +Alternatively, developers can configure automatic deployment using the GitHub web interface. To do |
| 237 | +this, follow the link: `https://github.com/{username}/{repository}/settings/pages`. |
| 238 | + |
| 239 | +## TON Connect |
| 240 | + |
| 241 | +This boilerplate utilizes the [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview) |
| 242 | +project to demonstrate how developers can integrate functionality related to TON cryptocurrency. |
| 243 | + |
| 244 | +The TON Connect manifest used in this boilerplate is stored in the `dist` folder, where all |
| 245 | +publicly accessible static files are located. Remember |
| 246 | +to [configure](https://docs.ton.org/develop/dapps/ton-connect/manifest) this file according to your |
| 247 | +project's information. |
| 248 | + |
| 249 | +## Useful Links |
| 250 | + |
| 251 | +- [Platform documentation](https://docs.telegram-mini-apps.com/) |
| 252 | +- [Telegram developers community chat](https://t.me/devs) |
0 commit comments