How TApps Are Loaded into the Browser, Decentralized

Tea Project Blog
4 min readJul 26, 2022

The following is an instructive post for readers interested in how a typical TApp loads into a user’s browser. The process starts with a bootloader.js file that searches for the TEA Project’s layer-1 smart contract on the Ethereum network. This smart contract will return all available hosting node IP addresses where the TAppStore can be loaded from. The user can now load the TAppstore into their browser, from which they can load any TApp.

The end goal of such a design is that the TApps become “unstoppable” as long as the user has a copy of the bootloader.js file. It doesn’t require DNS or any SSL certificates or in fact any website at all. Designing the TApps like this makes sure that no one entity (ISP, cloud hosting provider, domain registrar) can take any of these decentralized apps offline or become a single point of failure.

How a TApp Loads, Starting from the Bootloader.js File

As mentioned in the introduction, anyone wanting to run a TApp can launch it through the TAppStore. The user can load the TAppStore through the bootloader.js file. We’ll have a few trusted locations from where to serve this file, with wallet.teaproject.org being the preferred secure location. The website will automatically download the bootloader.js file to the user’s browser when they load it from our site.

It’s important to note that the bootloader.js is just a static file. All the users who download it from the main teaproject.org website can save it to their local hard drives or thumb drives, or store a copy to their email server or even IPFS. From there, these users themselves form a decentralized network where they can informally share the file amongst themselves without needing the teaproject.org website to be online.

Bootloader.js Connects to the Ethereum Network

Our user has now downloaded the bootloader.js file to their browser which then will connect to the Ethereum network through the Metamask wallet installed in the user’s browser. Once connected to the Ethereum network, it’ll make a remote procedure call (RPC) to any Ethereum nodes to query for the list of currently active nodes on TEA’s layer-2 hosting the TAppStore application.

This interaction is through a smart contract on the Ethereum blockchain that reveals to the user a list of IP addresses hosting the TAppStore on the TEA Project’s layer-2. This list of IP addresses is dynamically updated in the TEA Project’s layer-1 smart contract: anytime someone queries (RPCs) the TEA Project’s smart contract, a current active list of IP addresses will be returned to the caller.

The end user can either manually select or automatically go to an available nearby (fastest ping) TEA node as the host. They’ll then go to that IP address to continue using the TAppStore app. Because all of the hosting nodes are the same, whichever node IP address the user selects, the same TAppStore app will be loaded into the end user’s browser.

Interacting with the TAppStore to Load TApps

From here the work of the bootloader.js file is done as well as any interactions with TEA Project’s smart contract running on Ethereum. The user is now connected to the TAppStore through one of the TEA hosting nodes which are connected to the network of global state maintainer nodes. This is how the TEA hosting nodes get the latest TEA network state (including the updated list of TApps) as well as send queries and commands to the state machine.

With the TAppStore loaded in the user’s browser, they can select which TApp they want to launch. This is a direct connection to the TEA layer-2 hosting nodes: no centralized services like DNS, SSL, or cloud host’s IP address are needed to complete the connection. In this way, the TApps become unstoppable as well as relieving developers of any of these burdens to host a TApp.

Here’s the full chain of events to load a TApp the decentralized TEA Project way:

  • Static bootloader.js file ->
  • Hardcoded TEA Project smart contract on Ethereum ->
  • Query active hosting node addresses for TAppStore ->
  • Launch TAppStore from any of these hosting nodes ->
  • TAppStore connects to state machine and lists all avilable TApps ->
  • Select any TApp from TAppStore ->
  • Run this TApp.

If you have any questions, please feel free to discuss them in our Telegram group.

--

--