A template for developing a single-page application for Telegram using React, TypeScript, and Webpack. This project includes ESLint, Prettier configuration, CSS Modules support, and HMR.
-
Clone the repository:
git clone <repository-url> cd tg-miniapp-template
-
Install dependencies:
npm install
- Launches the application in development mode with HMR enabled. (Mocked API) see Environment Variables
npm start- Creates an optimized production build in the dist folder. (Real API)
npm run build- Deletes the dist folder.
npm run clean- Starts a local server to test the production build in the dist folder.
npm run serve:prod- React: Library for building user interfaces.
- TypeScript: Static typing to improve code quality.
- Webpack: Module bundler for creating optimized bundles.
- ESLint: Linter for maintaining code quality.
- Prettier: Code formatting tool.
- CSS Modules: Support for modular CSS.
├── public/ # Static files (index.html)
├── src/ # Source code
│ ├── components/ # React components
│ ├── assets/ # Images, and fonts
│ ├── styles/ # Styles
│ ├── types/ # Types d.ts
│ ├── utils/ # Utils
│ ├── App.tsx # Main Component
│ └── index.tsx # Entry point
├── dist/ # Build output
├── .eslintrc.json # ESLint configuration
├── .prettierrc # Prettier configuration
├── .babelrc # Babel configuration
├── .tsconfig.json # TypeScript configuration
├── .jest.config.ts # Jest configuration
├── webpack/ # Webpack configuration
│ ├── webpack.common.js
│ ├── webpack.dev.js
│ └── webpack.prod.js
- Before running
npm run build, ensure thedistfolder is clean:
npm run clean && npm run build- Test the production build locally with:
npm run serve:prod- Make sure the project is using local configurations for ESLint and Prettier.
- Set up a
.envfile for environment variables.
REACT_APP_API_URL: API linkREACT_APP_BOT_TOKEN: Bot tokenMOCK: Determines whether to use mocked Telegram API or real API.true: Use mock data (default for development).false: Use real Telegram API (default for production).