DEV Community

Max Bantsevich for dev.family

Posted on

How to build a Web App: Deploying Telegram mini-app

Hi there, it's the dev.family team again! We're continuing our experiment with building an app in React Native that works as as a Telegram Web App. In our previous episodes, we discussed:

Now, let's focus on installing the web app itself within the Telegram bot.

Web AppDeployment

In the last part we finished the preparatory work. Now let's deploy our site.

We will use Firebase to deploy the clicker. There are two options:

  • The first (and easiest) is a simple command line deploy;
  • The second (a bit more complicated) is a commit/merge/PR deploy via github actions.

For the purposes of this article, let's look at the fastest option.

Let's create a project in the Firebase Console. Follow the link and click on the 'Create Project' button.

Image description

Specify the name of our project:

Image description

Next, click ‘Continue’ several times, select Default Firebase Account (if you have a different one, you can select it), and click Create Project.

The new project is successfully established:

Image description

Now go to the project and click the 'Add Web Application' button:

Image description

Next, enter the name of the project:

Image description

You can leave the 'Set up Firebase hosting too' checkbox unchecked. Click on the 'Register application' button and you will see two options with instructions on how to install the Firebase tools in our project.

We won't use the option via npm, but via the script tag, as we don't need it for the mobile application. You can choose any convenient option.

Image description

This completes our work with Firebase Console, let's return to the application.

Note: It is not recommended to put all these keys directly in the html file. It is better to create an .env file and put them there.

.env

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=
Enter fullscreen mode Exit fullscreen mode

Notice that all of the keys we use start with the word ‘Vite’. We do this because we are using Vite as an assembler. And when accessing environment variables via import.meta.env, it may not recognise them without this.

Next, let's edit our index.html a bit, taking into account what we've written above.

index.html

<html>
<body>
...
<script type="module">
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";
 import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-analytics.js";
  const firebaseConfig = {
   apiKey:import.meta.env.VITE_FIREBASE_API_KEY,
   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
   projectId:  import.meta.env.VITE_FIREBASE_PROJECT_ID,
   storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
   appId: import.meta.env.VITE_FIREBASE_APP_ID,
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
 };


 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app);
</script>
<script src="./index.web.js" type="module"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Open a terminal, go to the root of the project and type the command:

firebase login
Enter fullscreen mode Exit fullscreen mode

Then we go to the browser window and authorise through the Firebase console.

firebase init
Enter fullscreen mode Exit fullscreen mode

Select the highlighted item and press Space, then Enter.

Image description

The next step is to resolve a number of configuration issues. Add the following:

  • Please select an option – here we select Use an existing project. And from the list below – a recently created project;

  • What do you want to use as your public directory? – select dist (this is where our unit will be located);

  • Configure as a single-page app (rewrite all urls to /index.html)? – y;

  • Set up automatic builds and deploys with GitHub? (y/N) – N (we don't need it at this stage);

  • File dist/index.html already exists. Overwrite? (y/N) – N.

Go to firebase.json and modify it a bit.

firebase.json

"hosting": {
   "public": "dist",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**",
     //past here
     "**/android/**",
     "**/ios/**"
   ],
   "rewrites": [
     {
       "source": "**",
       "destination": "/index.html"
     }
   ]
 }
}
Enter fullscreen mode Exit fullscreen mode

Add the Android and iOS directories to ignore during deployment. Since we have a web application, we don't need to send all the files to a hosting service. Also, they're quite heavy and you won't be able to download them without some sort of subscription.

So, we're nearing the finish line. There's just one more command to write.

firebase deploy

Image description

Now click on the link below. Our application is already hosted!

Image description

All you have to do is deploy the app on Telegram.

Installing a web app in a Telegram bot

Let's take a look at what's currently available:

  • A working app on iOS;
  • A working app on Android;
  • A working web app, already hosted.

With one last tap, you can add an app to the list in a messenger app. Open a bot called BotFather in Telegram and start a dialogue.

Choose the option /newbot:

Image description

Give our bot a name. This will create an API key for interacting with our bot via HTTP.

Image description

Next, write the command /mybots and choose the currently created bot. Go to bot settings.

Image description

Choose the point Configure Mini App.

Image description

You may see a message saying that the Mini App is disabled for our Telegram bot. That's fine. Just click on the Enable Mini App button.

Image description

Now we just pass the URL where our web application is hosted.

Image description

Now let's configure the menu button. To do this, go back to the bot settings and select Configure Menu Button. Again, you may be told that the button is currently disabled and offered the option to enable it. Accept and give it a name.

The time has come: let's see how our guy works. Let's go to the bot – @ReactNativeWebClickerBot (you can rate it too, we'd appreciate it 😌). We open it up and make sure it works!

Image description

All theme settings are synchronised, as is the username. If you enter the bot from the mobile app and click on a coin, you can feel how well the haptic response works.

Conclusion

In this experiment, we break down in detail how you can:

  • Build a web app based on a mobile app written in React Native using react-native-web;
  • Deploy it via Firebase;
  • Use it in a Telegram mini-app;
  • Interoperate with the Telegram client in our shared codebase.

The technologies described can be used not only for Telegram, but also for other platforms. So you can create cross-platform solutions that work on the same code.

Why it's good:

  • Your app will work across channels and be featured in multiple stores, allowing you to reach more users;
  • The speed of product development will increase significantly – the average time to release will be reduced by 20%, meaning a faster time to market;
  • Most of the code base can be reused, making updates and bug fixes easier.

The main thing is to remember the specifics of each platform and take them into account when developing.

We've deliberately left some parts of the code unwritten so that you can fill them in yourself. If you like, add Telegram user validation, check if the user is present in the mobile app and set up a Firebase deployment via GitHub Actions. In short, experiment to get the best results.

As usual, we leave links to the useful resources:

Top comments (0)