Chain Hosted UI
Chain Hosted UI is a decentralized frontend solution that lets you to deploy dApp frontends directly on the NEAR blockchain. A frontend can be built with typical Web2 tooling (e.g. React + Vite + node.js dependencies), and the resulting compressed bundle can be stored in the state of a smart contract.
This is an early stage project, and the solution hasn’t been battle tested to the point it can be recommended for production use.
Overview
Thanks to the fact that storage on NEAR is cheap, it's feasible to host lightweight applications with optimized bundles on chain. This offers a straightforward path to decentralized hosting as an alternative to static deployment platforms such as Vercel, GitHub Pages, Render, and others.
The Chain Deployed UI tooling provides the boilerplate app code (React, Vue, TypeScript), along with the FileStore smart contract and basic CDN tools so you can build a dApp, pack it, and store it on chain.
This FileStore smart contract deployed by NEAR is designed to store and serve dApp bundles for any user, so you don't need to have an understanding of smart contract development. You only need to understand how to sign a transaction (with help from our tooling) and to have enough NEAR tokens to pay for storage.
You can still deploy your own file storage smart contract if you want to have additional customization or if you want total control over your data.
Pros
- By decentralizing the hosting of your front-end, you minimize the risk of censoring or blocking content by centralized authorities.
- Users might trust a decentralized application more, knowing that it operates on a transparent and immutable blockchain.
- Data displayed on the front-end is more likely to be accurate and tamper-proof since it's typically fetched directly from the blockchain.
Cons
- Implementing a decentralized front-end can be more complex than traditional web development, requiring knowledge of additional technologies like IPFS, Arweave, or blockchain interactions.
- Decentralized networks can face issues such as latency or lower speeds compared to traditional centralized servers, potentially affecting user experience. The ecosystem for developing decentralized frontends is still maturing, which means there might be fewer tools and libraries available than for traditional web development.
- While decentralized storage costs have been decreasing, they can still be higher than traditional hosting, especially if the dApp generates a lot of data transactions.
How it works
A standard workflow of the chain deployed solution would be:
- Building, packing, and compressing the web app frontend
- Uploading the web app bundle files using the
FileStoresmart contract - Serving the web app using a CDN gateway
Once the web app has been uploaded to the blockchain, a web Gateway converts browser requests to blockchain RPC calls, so users can access your decentralized application.
Gateway
A gateway server is required to convert browser resource requests to RPC calls. For convenience, gateways may be deployed to cloud hosts, but this causes some centralization. It can be mitigated by having multiple gateways run by different parties. It is important that a user trust the gateway provider however, since the gateway is ultimately what is in control of the experience being served to the user's browser.
RPC
An RPC provider services requests for chain data. For resilience, gateways should ideally be capable of falling back to a different provider in the event the primary provider is experiencing degraded service.
Considerations
Compared to classic Web2 hosting solutions, the cost structure of a chain-deployed dApp is very different.
When deploying on chain, you pay a one-time fee for the storage space of your compressed bundles. This means that it's critical to pay attention to the size of dependencies you include in your application, as packages that are bloated or do not support proper tree-shaking will directly affect your cost.
NEAR uses storage staking, where NEAR tokens are locked while storage is being used and refundable in the event of deleting that data from smart contract state. The cost of storage is 1 NEAR per 100 Kb.
Storage Optimization
Additional storage optimization can be achieved by building your dApp from a provided template with preconfigured code splitting. This allows you to yield separate bundles for the template boilerplate and the custom dApp code:
- The template boilerplate can be uploaded once, and then served for every dApp built using that template.
- This decreases the deployment cost, since you only need to deploy the custom dApp code and specific dependencies.
Asset Hosting
For hosting large assets (such as images and videos) that your web app may require, you could leverage a decentralized storage service to maintain a fully decentralized deployment. Some of these solutions are:
