If you want to start a new project and fully control your infrastructure, you can use our Boilerplate.
- git clone [email protected]:twa-dev/Boilerplate.git {projectName}
- cd {projectName}
- yarn install
- yarn startThis project solves all the famous problems you gonna face if you develop TWA.
yarn start starts dev server on 9000 port. It optionally includes ngrok proxy. Ngrok allows you instantly deploy the app
to the internet. It can be useful if you want to see how your application works inside Telegram.
yarn build creates an optimized production-ready bundle inside dist directory.
yarn analyze shows you what your js-bundle consists of. Use this utility if you have performance issues.
yarn test:eslintandyarn test:stylelintruns linters;yarn tscruns type check;yarn prettierruns prettier (it will check your formatting but won't change anything)
If you work in a team it's important to keep a consistent code style. Include these commands in your CI process to prevent code base inconsistency.
Boilerplate uses Webpack, CSS Modules, TypeScript, React, @twa-dev/sdk, @twa-dev/mark42, eslint, stylelint, prettier and ngrok.
All these tools help you to deliver your features fast and confidently.
There are two different ways to import SVG: as a component and as an asset. If you want to use SVG as a component, you have to add "component." before an extension. Example:
import diamond from "./diamond.svg";
import Diamond from "./diamond.component.svg";
<img src={diamond} />
<Diamond />All *.module.css files are treated as isolated CSS Modules. It means that you don't have to worry about class name collisions.
Moreover, this CSS is typed, so it's impossible to use unexisting class names in .tsx. Boilerplate uses named exports for CSS to improve TS checks.
Ngrok is a powerful tool for creating tunnel between your computer and the internet. It's
already built in yarn start command. To enable Ngrok you need to create ngrok.json in the root of your project.
Important: you have to buy Ngrok subscription if you want to register fixed subdomain names.
Example of ngrok.json:
{
"authtoken": "abcd",
"subdomain": "{subdomain}",
"region": "{region}"
}Now if you run yarn start, your local version of TWA will be available on https://{subdomain}.{region}.ngrok.io/. That's it. All you need to do is to set this URL as Menu Button URL.