CLI utility to initialize a Telegram Mini Apps application.

[heyqbnk]

Summary

It is necessary to develop an npm package that enables developers to initialize a mini-application using well-known boilerplates. This utility should be accessible via npx:

npx my-package

The CLI utility should initiate a mini-app installation process by prompting the developer with the following questions:

1. The directory to be used as the new application's root directory.
2. Preferred language: TypeScript or JavaScript.
3. Choice of boilerplate (dependent on the previous selection):
   • JavaScript (or TypeScript, if that was selected in the previous step)
   • Next.js
   • Solid.js
   • React.js

As a result, the CLI utility should create a project directory using one of the specified boilerplates from GitHub. Here is the list of potential boilerplates:

• solidjs-template
• react-template
• nextjs-template
• typescript-template
• vanillajs-template

The rationale for referring to publicly available boilerplates is that creating a project on GitHub from these templates is also an effective method. However, this utility addresses the scenario where a developer prefers not to create a project on GitHub but rather on a different platform.

This initiative should also include the creation of comprehensive documentation within the provided boilerplates to enhance their understandability for developers.

As long as this utility involves cloning the boilerplates, they should meet the following criteria:

• The ability to deploy the application using GitHub Pages.
• Inclusion of community-driven packages from the @tma.js ecosystem.
• Comprehensive documentation and explanations on how the scripts and project work.

Context

As the development of mini applications on the Telegram Mini Apps platform grows in popularity, it's crucial to equip incoming developers with packages, documentation, and utilities to minimize the time required to create their first simple application.

Creating a CLI utility is an excellent strategy for enabling developers to quickly bootstrap a mini app. An interactive application installation process will lower the barrier to entry into technology, particularly benefiting novice developers.

References

An effective alternative, @vkontakte/create-vk-mini-app, is currently available on the VK Mini Apps platform. This could serve as an ideal reference for implementing such a utility.

Estimate suggested reward

• SBT
• The financial aspect of this grant can be discussed once the scope of work is agreed upon

[heyqbnk]

I am currently available to undertake this grant. I am considering implementing this utility in @tma.js as well - @tma.js/create-mini-app. Our GitHub community already has templates prepared for the utility's use, though they require improvements to meet the necessary criteria.

If the scope of work is satisfactory for the grant, I propose a compensation of 2000 USD in TON. The grant can be completed by the end of this month.

[ProgramCrafter]

Is this grant related to TON in any way?

[heyqbnk]

Directly - no. Indirectly - yes. We currently recognize the Telegram Mini Apps platform as an instrument to increase the popularity of TON.

At the moment, we have grants related specifically to TMA: #206, #363, #364, #430

[heyqbnk]

I am not sure, but we could probably reduce the scope of work removing the templates criterias part. This grant could focus on the technical part of such a utility. Templates could be improved outside of the grant.

This will lead to the earlier grant completion and reduce of the reward

[heyqbnk]

I have discussed the idea of implementing such a utility with other developer and we have come to some good thoughts. I didn't notice, but this utility should include integration with TON Connect.

Here is how the utility workflow could work:

1. Developer runs the CLI command.
2. Utility asks the developer if he wants to use the simple way of creating an app and choose the predefined template, consisting of technologies: TypeScript, React, tma.js and TON Connect.
3. If not, developer goes to the interactive CLI, which allows configuring the template and set the required technologies. Here is how it could look like:

Language:
- [x] TypeScript
- [ ] JavaScript
Include TON Connect:
- (x) Yes
- ( ) No
SDK:
- (x) tma.js (community-driven)
- ( ) Telegram SDK (official)
Base technology:
- [x] React
- [ ] Solid
- [ ] Next.js
- [ ] Vanilla JS

Available templates count: 5. Proceed to the template selection? [y / n]

Developer is allowed to dynamically select or deselect elements, presented in the list, and instantly receive the count of templates available with the specified requirements. In case, there are some templates available, developer proceeds to the project installation.

CLI prompts the project root directory, clones the template from GitHub, removes the .git directory and initializes the template (probably, installs project dependencies and something else).

As long as scope of work changed, I will be back later with a detailed plan and recalculated acceptable reward.

[heyqbnk]

I've returned with a comprehensive plan for what needs to be accomplished.

Given the absence of templates that concurrently utilize tma.js and TON Connect, our first step is to enhance the existing templates by adding documentation and incorporating TON Connect packages.

1. solidjs-template
2. react-template
3. nextjs-template
4. typescript-template
5. vanillajs-template

The Solid.js template appears to be the most developed among them, making it a potential basis for the other templates. A practical approach would be to conceptualize a simple application and implement it across all the aforementioned technologies.

Considering most of the templates are written in TypeScript, it's important to also offer JavaScript versions, which are currently lacking.

Next, we need to develop the CLI tool. This involves completing the following tasks:

6. Create an npm package with the logic outlined in my previous message.
7. Produce comprehensive documentation on how this utility operates.

Tasks

Milestone 1

This milestone focuses on delivering the MVP version of the final product. It's crucial to offer at least a basic version before new TMA events occur.

• Design a basic application concept that integrates TON Connect.
• Create a React application template utilizing TypeScript, tma.js, and TON Connect.
• Build a non-interactive CLI tool that simply requests the project root directory and employs the template from the previous step.

Completion of this milestone enables developers to quickly start building their first mini-application.

Reward: 800 USD in TON

Milestone 2

This milestone encompasses the majority of the work needed for the final product.

• Develop alternatives for the React template using JavaScript and the Telegram SDK (2 templates).
• Create Next.js templates derived from the React templates (4 templates: tma.js / Telegram SDK + JavaScript / TypeScript).
• Develop templates for TypeScript (2 templates: tma.js / Telegram SDK).
• Develop templates for JavaScript (2 templates: tma.js / Telegram SDK).
• Create templates for Solid.js (4 templates: tma.js / Telegram SDK + JavaScript / TypeScript).
• Create templates for Vanilla JavaScript (2 templates: tma.js / Telegram SDK).
• Enhance the previously developed CLI tool by adding an interactive flow and incorporating the templates mentioned above.

Reward: 1700 USD in TON

Reward

I propose a compensation of 2500 USD in TON for completing this job. It seems like we have a lot to do here.

[heyqbnk]

Hey! The CLI is now ready to be used.

• Source code
• Documentation

At the moment, it runs the interactive process prompting simple questions and cloning the reactjs-template. In the next milestone it will be greatly improved.

The React.js template is also almost completed. It now can already be used by other developers, but I am going to improve it a bit and probably add the React Telegram UI developed in the different grant. Well, this is the only 1 thing I would like to add in this milestone.

About TON Connect. I've used it and decided to show its usage as simple as I can. In the application, we can just connect our TON wallet and display related information. This will probably be enough to get developers interested in TON. I will think about showcasing the TON connect from more practical side further.

[heyqbnk]

Hey! I consider the first milestone as completed for now.

In the upcoming month I am going to focus on the second stage and decided to decompose the milestone more precisely. Along with this, I will probably improve the application idea in templates.

Develop alternatives for the React template using JavaScript and the Telegram SDK.

• Template utilizing React, JavaScript, tma.js, and TON Connect.
  UPD (01.04.24): reactjs-template
• Template utilizing React, TypeScript, Telegram SDK, and TON Connect.
  UPD (23.06.24): reactjs-tsdk-template
• Template utilizing React, JavaScript, Telegram SDK, and TON Connect.
  UPD (25.06.24): reactjs-js-tsdk-template

Create Next.js templates derived from the React templates.

• Template utilizing Next.js, TypeScript, tma.js, and TON Connect.
  UPD (13.05.24): nextjs-template
• Template utilizing Next.js, TypeScript, Telegram SDK, and TON Connect.
  UPD (23.06.24): nextjs-tsdk-template
• Template utilizing Next.js, JavaScript, tma.js, and TON Connect.
  UPD (28.06.24): nextjs-js-template
• Template utilizing Next.js, JavaScript, Telegram SDK, and TON Connect.
  UPD (28.06.24): nextjs-js-tsdk-template

Develop templates for TypeScript.

• Template utilizing TypeScript, tma.js, and TON Connect.
  UPD (03.08.24): typescript-template
• Template utilizing TypeScript, Telegram SDK, and TON Connect.
  UPD (03.08.24): typescript-tsdk-template

Develop templates for JavaScript.

• Template utilizing JavaScript, tma.js, and TON Connect.
  UPD (03.08.24): js-template
• Template utilizing JavaScript, Telegram SDK, and TON Connect.
  UPD (03.08.24): js-tsdk-template

Create templates for Solid.js.

• Template utilizing Solid.js, TypeScript, tma.js, and TON Connect.
  UPD (09.04.24): solidjs-template
• Template utilizing Solid.js, TypeScript, Telegram SDK, and TON Connect.
  UPD (24.06.24): solidjs-tsdk-template
• Template utilizing Solid.js, JavaScript, tma.js, and TON Connect.
  UPD (11.04.24): solidjs-js-template
• Template utilizing Solid.js, JavaScript, Telegram SDK, and TON Connect.
  UPD (25.06.24): solidjs-js-tsdk-template

Create templates for Vanilla JavaScript.

• Template utilizing Vanilla JavaScript, tma.js, and TON Connect.
  UPD (05.08.24): vanillajs-template
• Template utilizing Vanilla JavaScript, Telegram SDK, and TON Connect.
  UPD (05.08.24): vanillajs-tsdk-template

Enhance the previously developed CLI tool by adding an interactive flow and incorporating the templates mentioned above.

• Refer to previously developed templates in the package.
• Provide functionality which allows interactive selection of preferred technologies, output the list of available templates, installation of selected template
  UPD (08.04.24): Working starting from version 0.1.0. It now allows selecting preferred technologies. CLI tool.

[samyarkd]

i'd like to contribute in this project. are the task updated so that i can work on them?

also do you have a better way to contact?

[heyqbnk]

@samyarkd Hey! I assume, that we could probably share TypeScript and JavaScript versions of the templates. So, I could write their TypeScript version, you could rewrite them using JavaScript + JSDoc.

Have to think about how we could share it

[heyqbnk]

@delovoyhomie

Hey! We have finally completed working on this grant. You can find all 18 templates in the @Telegram-Mini-Apps org. Here is the shortcut.

As long as @samyarkd didn't respond in Telegram, I decided to merge my efforts with Dmitry on the final completion of the task.

We are sharing the reward in the following proportions:

• @heyqbnk - 90% (2250 USD) - UQAogu1aTrj2GWzA3BsHGxadmOTheuRubH5GY54XSRFr44M0
• @dnischeta - 10% (250 USD) - UQDTYmM4KBeU9o7HqCGNI4L7T0e4jjHIxVKcyBMRvrmzokCM

[delovoyhomie]

@heyqbnk @dnischeta thank you for the contribution!

To accurately recognize your valuable contributions in our repository, we kindly request you to submit a Pull Request to the Hall of Fame file, providing the wallet address and a link to the bounty with the number.

Please follow these steps:

1. Fork the repository (if you haven't already).

2. Edit the Hall of Fame file, commit, and push your changes.

3. Create a Pull Request from your fork to the main repository, providing the wallet address and a link to the bounty with the number (for example, Pull Request Article: Generation of block random seed #136).
   For reference on what your entry should look like, please see the examples of past merged pull requests.

4. And please follow the questbook proposal stage in accordance with the bounty guideline

[heyqbnk]

• Pull Request: CLI utility to initialize a Telegram Mini Apps application #849
• Questbook Proposal