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:
The specifics of building a React Native web application using react-native-web and where we deviated from the documentation. You can find all the code and details of the process in the first part;
The reasons why companies choose to run web applications on messenger apps.
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.
Specify the name of our project:
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:
Now go to the project and click the 'Add Web Application' button:
Next, enter the name of the project:
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.
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=
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>
Open a terminal, go to the root of the project and type the command:
firebase login
Then we go to the browser window and authorise through the Firebase console.
firebase init
Select the highlighted item and press Space, then Enter.
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"
}
]
}
}
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
Now click on the link below. Our application is already hosted!
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:
Give our bot a name. This will create an API key for interacting with our bot via HTTP.
Next, write the command /mybots and choose the currently created bot. Go to bot settings.
Choose the point Configure Mini App.
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.
Now we just pass the URL where our web application is hosted.
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!
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:
- React Native Web documentation;
- Telegram mini-app documentation;
- Link to Firebase
- All code in Github
- @ReactNativeWebClickerBot itself.
Top comments (0)