Developing Web Apps Locally

Roj
2 min readApr 26, 2022

--

Telegram and its ecosystem are growing rapidly at an unstoppable speed. This has attracted the attention of zillions of people around the globe, including developers.

The Telegram APIs are of course not off this rapid growth. They are constantly developed further to enhance the experience of the users.

Nowadays, Telegram bots using the Bot API can completely replace any website. They support seamless authorization, integrated payments, delivering tailored push notifications to users, and much more.

Web Apps

Web Apps are a bunch of capabilities of Telegram bots introduced in a revolutionary update on the 16th of April.

With Web Apps, bots get a whole new dimension. Bot developers can create infinitely flexible interfaces with JavaScript, the most widely used programming language in the world.

The Way They Work

Whenever a user launches a Web App instance in any way (inline, through a button, or from the attachments menu), their Telegram client will be responsible for opening the web page which the bot provided in its response.

The Obstacle Against Developers

The web page that the bot can request to be opened is identified by a URL. A URL that should be linked to a registered ICANN domain name with HTTPS as its protocol. This makes it quite hard to get started with developing Web Apps.

That’s because everyone just won’t want to start worrying about setting up a web server, making it accessible, connecting it do a domain, waiting for things to propagate, initiating a proper connection with it and etc.

I’ll be talking about an easy way to make developing Web Apps locally possible without taking care of any of these.

Step 1: localhost to a Local Domain Name

  • Open the hosts file. On Windows, it is located at C:\Windows\System32\drivers\etc\hosts, Linux’s is /etc/hosts and macOS’ is at /private/etc/hosts.
  • Append a line similar to this:
127.0.0.1 mydomain.com

You could replace mydomain.com with any other valid ICANN domain name.

That’s how we have a domain name locally. We’re almost done.

Step 2: Acquiring the TLS Certificate

  • Install mkcerton your system.
  • Run the following commands:
mkcert -install
mkcert mydomain.com localhost 127.0.0.1

That will generate the TLS certificate and key for your local domain name and hostnames, so that you can use it with your local server for Web Apps. Remember that the mydomain.com might be another domain, depending on how you modified your hosts file.

Conclusion

If you have completed the steps above, you can now start a local web server on port 443 using the generated TLS certificate, and then host your Web App’s front end easily. This can be an NGINX server block proxy passing to your app on a different port, along with your TLS certificate.

After starting the local web server, you can let your development bot open the Web App at your local domain using the HTTPS URL (e.g. https://yourdomain.com).

Note that you will only be able to test your Web App from the machine you are hosting it from. If you want other devices in your LAN to be able to use it, you will have to setup a local DNS server. I might talk about this in another post.

--

--