skip to Main Content

I a building an application that is to function as a webapp and also as a telegram Miniapp. Telegram miniapp has certain special functionalities or features like the initData ,ie the window.Telegram.WebApp.initData and all available within it. To access these the webapp should be hosted a telegram miniapp, which requires the webapp to be live.

This is not convenient for development and testing purposes.

Is there a way in which i can maybe give my localhost link as the telegram miniapp and run that.

Or what’s the best way for testing and development of Telegram miniapps.

2

Answers


  1. Chosen as BEST ANSWER

    This can be done using Ngrok

    Reference Video : https://www.youtube.com/live/HewVC6tUC1w?feature=shared&t=466

    Steps :

    1. Goto ngrok.com and signup.

    2. Install and configure ngrok using the steps provided at ngrok dashboard after signup.

    3. Install ngrok npm package in your project.

    4. Add this to your package.json under scripts

      "ngrok":"ngrok http http://localhost:port-number"

    NOTE : Use the port number your application is running on localhost of your system. If your application runs on localhost:3000 use port 3000

    1. Start your application on local server npm run dev or npm run start or whatever.
    2. Open new terminal in project and Start ngrok npm run ngrok
    3. In the ngrok terminal you will see an URL like - https://ee44-103-153-36-62.ngrok-free.app
    4. Your localhost is now being forwarded to this url and you can use this url to provide as a Mini App URL in telegram.

  2. Ngrok is fine for testing purposes. However, it has a downside.

    You need to click on the ngrok url to properly run the miniapp.

    To avoid this, you can use localtunnel instead of Ngrok.

    The installation and operation methods are similar.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search