0xMarsRover / vanilla-js-boilerplate

This is a basic and straightforward Telegram Mini App(TMA) implemented using plain JavaScript, HTML, and CSS. This project aims to provide a minimalistic example of how to create a simple TWA and launch it within Telegram without relying on complex build tools or bleeding-edge libraries.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Telegram Mini Apps Basic Example

This is a basic and straightforward Telegram Mini App(TMA) implemented using plain JavaScript, HTML, and CSS. This project aims to provide a minimalistic example of how to create a simple TWA and launch it within Telegram without relying on complex build tools or bleeding-edge libraries.

• App is available via direct link: https://t.me/simple_telegram_mini_app_bot/app
• Or you can launch app with a bot menu button: https://t.me/simple_telegram_mini_app_bot
• Deployment URL: https://twa-dev.github.io/simple-telegram-web-app/

Features

• Minimalistic user interface.
• No external libraries or frameworks used.
• Easy to understand and modify.

Getting Started

Prerequisites

To run this example, you'll need a modern web browser with JavaScript enabled.

Installation

1. Clone this repository to your local machine:

   git clone https://github.com/Telegram-Mini-Apps-Dev/vanilla-js-boilerplate
   

2. Navigate to the project directory:

   cd vanilla-js-boilerplate

Open index.html in your preferred code editor or IDE.

Usage

1. Open index.html in your preferred code editor or IDE.
2. Make your changes
3. Create your own GitHub repository, commit and push your updates.
4. Go to your repository GitHub page and open Settings. Check the Pages tab and Build and deployment section. If GitHub Actions option was selected, assets should be deployed to Pages and there will be an URL like https://<username>.github.io/simple-telegram-mini-app/. You can copy this URL and use it with BotFather bot to create your very own TWA.

Customization

Feel free to customize this web app to suit your needs. You can modify the HTML, CSS, and JavaScript files as required.

Contributing

If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive messages.
4. Push your branch to your fork.
5. Create a pull request to the main repository's main branch.

License

This project is licensed under the MIT License - see the LICENSE file for details.