Build Open Source Web Messenger

Estimated reading time: 2 minutes

Welcome to Part 4 of this tutorial! In this section, we will guide you through downloading the source code for the Web Messenger app and running it on your browser. Let’s get started!

Prerequisites

Before we begin, please make sure you have completed the following:

Downloading the Source Code

The latest code for the Web Messenger app is always available and regularly updated on the messenger-javascript repository.

There are multiple ways of “downloading” code from GitHub.

If you have Git installed, this is the recommended approach as it allows you to quickly sync and stay up to date with the latest version. It’s also the preferred method if you plan to contribute to the project.

To download, open a terminal and issue following commands:

$ mkdir Messenger
$ cd Messenger
$ git lfs install
$ git clone https://github.com/mesibo/messenger-javascript.git

Download the code as a zip file

Alternatively, you can download the complete source code of the Web Messenger app as a zip file. This method is simpler but requires downloading the full source code whenever updates are made to the repository.

Click on the Download button to start downloading.

Download

Once the download completes, unzip the file into a folder.

Stay Up-to-date

Whatever approach you take to download the code, it is important to stay up-to-date with the latest changes, new features, fixes, etc. Ensure to Star(*) the project on GitHub to get notified whenever the source code is updated.

Star

Running the App

Now, let’s proceed with running the Web Messenger app. In the next section, we will cover customization options.

To run the app, follow these steps:

Host it on your web server:

Deploy the Web Messenger app on your preferred web server. You can choose to host it locally on your machine or on a remote server.

Load index.html:

Once the app is hosted, open your web browser and navigate to the URL where you deployed the Web Messenger. The entry point is the index.html file.

That’s it! You should now see the login screen of the Web Messenger app.

Please remember that for this demo, you need to generate the OTP yourself by logging into your [mesibo account]](/console) and following the instructions in the “Demo Apps” menu. In the later part of this tutorial, we will cover how to automatically send OTPs to your users.

Conclusion

Congratulations! In this part, we have successfully run the Web Messenger app on your browser.

In the next part, we will learn about customizing applications.

On to Part 5 >>

open, source, whatsapp, mesibo, overview