Overview

• What is a Telegram Mini App?
• Introduction
• Getting Started
• Step 1: Initialize Project Using TSDX
• Step 2: Adding Tailwind
• Step 3: Setup Build Configuration
• Step 4: Publishing to NPM
• Conclusion

What is a Telegram Mini App?

A Telegram Mini App is a small, web-based application that runs within Telegram, providing users with seamless and interactive experiences without leaving the platform. These apps can range from simple utilities to complex, feature-rich services. By leveraging the capabilities of Telegram, Mini Apps can provide a consistent user experience and take advantage of integrated features like payments, notifications, and user authentication.

Some examples of successful Telegram Mini Apps include bots for ordering food, managing tasks, and tracking finances.

Introduction

In this guide, we will explore how to create a Telegram Mini App using modern development tools like Storybook, TypeScript, and Tailwind CSS. We will use TSDX, a zero-config CLI, to streamline the development, testing, and publishing process.

Our goal is to create a Mini App that demonstrates the power of these tools and provides a starting point for your own projects.

Getting Started

Step 1: Initialize Project Using TSDX

npx tsdx create my-mini-app

Choose react-with-storybook when prompted.

Step 2: Adding Tailwind

Install Tailwind CSS and its dependencies:

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Initialize Tailwind CSS:

npx tailwindcss init

Configure Tailwind to purge unused styles:

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './stories/*'],
  ...rest of config
}

Create a tailwind.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Integrate Tailwind with Storybook:

yarn add -D @storybook/addon-postcss

Update .storybook/main.js:

module.exports = {
  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  ...rest of config
};

Import Tailwind CSS in .storybook/preview.js:

import '../tailwind.css';

Test your Tailwind styles by running Storybook:

yarn storybook

Step 3: Setup Build Configuration

Add a build script for Tailwind CSS in package.json:

"scripts": {
  ... rest of scripts
  "build-tailwind": "npx tailwindcss -o ./dist/styles.css --minify"
}

Update the build script to include Tailwind CSS:

"scripts": {
  ... rest of scripts
  "build": "tsdx build && yarn build-tailwind",
}

Run the build script to generate the styles.css file:

yarn build

Step 4: Publishing to NPM

Push your code to a GitHub repository:

git init
git remote add origin <repo origin url>
git add .
git commit -m “initial setup”
git push origin master

Log in to your NPM account:

npm login

Update the package name in package.json:

"name": "@tmagic/my-mini-app",
"author": "Tmagic",
"version": "0.0.1",

Build and publish your package:

yarn build
npm publish --access public

Congratulations! Your Mini App is now published and available on NPM.

Conclusion

Creating and publishing your own Telegram Mini App can seem daunting, but with tools like TSDX, Storybook, and Tailwind CSS, the process is straightforward. This guide has provided a step-by-step approach to building a robust and scalable Mini App that can enhance your users' experience on Telegram. We at Tmagic are excited to see what you create!