Ways to launch Telegram mini apps

There are many different ways to launch Telegram Mini Apps, but I have identified several of the most convenient and simple methods for myself.

Ngrok is a powerful secure tunneling utility that allows you to transform a local URL such as http://localhostto a public HTTPS address. This tool is especially useful for developers who need to test web applications or integrations with external services, such as Telegram bots, directly from their local machine.

To use Ngrok, you first need to run your application on a local server, such as at http://localhost:3000. After that, you can run Ngrok with the command:

ngrok http 3000

Ngrok will create a temporary public HTTPS address that will proxy requests to your local server. This address can be used, for example, to test Telegram Mini Apps or other services that require an HTTPS link.

Ngrok not only makes it easy to access locally running applications from the internet, but also provides additional features such as traffic viewing and analysis, authentication management, and setting up persistent domains for longer-term use.

This tool is widely used in development and testing when there is no need or possibility to deploy the application on a remote server, but interaction with external systems or users via the Internet is required.

Ports in Visual Studio Code

The second way to run Telegram Mini Apps that I find convenient is to use the built-in port management tool in Visual Studio Code (VSCode). This method allows you to easily and quickly expose your local app to external services, including Telegram.

Opening a port in VSCode:
Start by running your app in your local development environment. Then open the terminal in VSCode and go to the Ports tab. In this tab, you can see all the ports that are used in your project.
Setting up a port:
Find the port your application is running on (for example, port 3000). To make it accessible externally, change its state from “Private” to “Public”. This will create a public URL to access your application over the Internet.
Using the received URL:
Once the port status has changed, you can copy the generated URL and use it to open your app in Telegram as a Mini App. This is a quick and easy way to integrate locally developed apps with Telegram, without the need to install additional tools.

Using a redirect page

Another convenient way to launch Telegram Mini Apps is to use an HTTPS page with a redirect to your local HTTP application. This method allows you to bypass restrictions on using insecure (HTTP) addresses, while maintaining ease of setup.

Getting an IP address:
First, you need to find out the IP address of your machine on the local network. You can do this by opening the command line and entering the command:
```
ipconfig
```
The received IP address will be used to create a redirect.

Creating a redirect page:
The next step is to create a simple HTML page that will automatically redirect users to your local server. An example of such a page:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="refresh" content="0; url=http://192.168.1.212:3000" />
        <title>Redirecting...</title>
    </head>
    <body>
        <p>
            Если вы не были перенаправлены автоматически,
            <a href="http://192.168.1.212:3000">нажмите здесь</a>.
        </p>
    </body>
</html>

Here 192.168.1.212:3000 – This is an example of a local address that needs to be replaced with your actual IP and port.

Launching an application with IP access:
In order for your application to be able to open by IP address, you need to launch it with the parameter --host. For example, if you are using React, run the following command:
```
npm run dev -- --host
```
This ensures that your application will be accessible via an IP address on the local network, which is necessary for the redirect to work correctly.
Hosting a page on HTTPS:
Now you need to host this HTML page on a resource that supports HTTPS. One of the easiest and most popular ways is to use GitHub Pages. You upload your page to GitHub, and then specify a link to this page in the Telegram bot. When a user clicks on this link, an automatic redirect to your local application will occur.

This method is convenient because you can quickly create and place a redirect on a trusted platform, while still allowing access to your application through a secure channel. This is especially useful in cases where direct access via HTTP is not possible due to security restrictions.

Telegram Developer Mode

Another way to run Telegram Mini Apps is to use Telegram's developer mode. This method, while not perfectly stable, can be extremely convenient if you have the opportunity to use it.

It is worth noting that this method only works correctly on iOS devices, and its behavior may be unpredictable. However, if you manage to set it up, you will be able to launch Mini Apps and open HTTP links directly in the bot, without the need for additional security settings (HTTPS).

How to enable developer mode:
In order to activate developer mode, you will need to follow the instructions provided in official Telegram documentation. After activating this mode, the bot working in it will be able to open HTTP links, which greatly simplifies the process of testing and developing your Mini Apps.

Despite the limitations and instability of this method, it remains an attractive option for iPhone developers who want to quickly and easily test their projects.

Using local servers via localhost.run

Another convenient method for launching Telegram Mini Apps is using the service localhost.run. This service allows you to quickly and easily make your local server available on the Internet without the need to install additional software.

Launching an application on a local server:
First, run your application on a local server, for example at http://localhost:3000.
Usage localhost.run for tunneling:
Open terminal and run the following command:
```
ssh -R 80:localhost:3000 localhost.run
```
This command will create a tunnel through localhost.runproviding you with a temporary public URL that will redirect traffic to your local server.
Using the received URL:
After running the command, the terminal will display a public URL that can be used to access your app over the internet. This URL can also be used to open your app in Telegram Mini App.

This method is similar to using Ngrok, but has the advantage of being simple and not requiring any pre-configuration. It is especially useful for quick and temporary access to your application.

Using cloud platforms

If you need to quickly deploy and test your application in a real cloud environment, you can use cloud platforms such as Heroku, Vercel or Netlify. These services allow you to deploy your application in a few steps and provide automatic scaling and infrastructure management.

Heroku:
To deploy your application to Heroku, follow these steps:
- Install Heroku CLI and sign in to your account.
- Create a new application with the command heroku create.
- Deploy your application with the command git push heroku main.
Vercel:
Vercel is especially good for deploying front-end applications. Once you sign in to Vercel, you can connect your project repository and it will automatically deploy your application.
Netlify:
Similar to Vercel, Netlify makes it easy to deploy static and dynamic sites by providing an easy-to-use interface and automatic CI/CD management.

These platforms are suitable for quick and easy deployment of applications with minimal configuration, making them a great choice for testing and demonstrating Telegram Mini Apps.

Conclusion

Each of the described methods for launching Telegram Mini Apps has its own advantages and features, and choosing the right method depends on your specific needs and conditions. Using Ngrok, ports in Visual Studio Code, a redirect page, or Telegram's developer mode allows developers to adapt to different scenarios and test their applications in the most convenient way.

Ngrok provides quick access to a local server via HTTPS, which is ideal for testing and integrating with external services. Ports in VSCode are an easy way to expose your app without having to install any additional software. The redirect page is an elegant solution to bypass HTTP link restrictions, and Telegram's developer mode allows you to use HTTP links directly in bots, albeit with some limitations.

Depending on your needs and the tools you use, you can choose one of these methods or combine them to achieve the best result. Ultimately, the key to successfully launching Telegram Mini Apps is flexibility and the ability to adapt to different conditions, which will allow you to test and develop your projects effectively.