Fully decentralised stack: backend in Solidity, frontend hosted in a Canister

In the rapidly evolving landscape of decentralized technologies and blockchain, a new paradigm is emerging that promises to reshape the way we build and interact with applications. This paradigm is known as the "Fully Decentralized Stack," a groundbreaking approach that combines the power of smart contracts, blockchain, and decentralized web technologies to create a robust, transparent, and censorship-resistant ecosystem.

At its core, the Fully Decentralized Stack represents a fundamental shift away from the traditional client-server model that has dominated the software development landscape for decades. In this new paradigm, the backend is powered by smart contracts written in Solidity, a programming language specifically designed for building applications on the Ethereum blockchain. Meanwhile, the frontend is hosted in a Canister, a concept introduced by the Internet Computer (IC).

This article explores the exciting fusion of these two innovative technologies – Solidity-based smart contracts and Internet Computer's Canisters – to create a holistic and fully decentralized solution for building and deploying web applications. We will delve into the key components of this stack, examine its advantages and challenges.


Why build using a fully decentralised stack?

One of the standout benefits of this stack is its ability to take advantage of the fully decentralised blockchain paradigm and its security, cost efficiency, reliability, and censorship resistance. This is because smart contracts on blockchains like Ethereum are unchangeable, and Canisters on the Internet Computer are designed to be tamper-proof. This stack also offers an extraordinary level of transparency. Every interaction with smart contracts and Canisters is permanently recorded on the blockchain.

What does this mean? It means that users can independently verify transactions and data without relying on a single central authority. This transparency is a cornerstone of trust in your application.

Smart contracts are renowned for their security features, and Internet Computer's Canisters match up with this reputation. When you combine these two technologies, your application benefits from a robust security foundation that safeguards it against various threats.

This stack is kind to your budget. By eliminating the need for traditional server hosting, it trims down infrastructure and operational costs. Plus, users can interact with the application without being burdened by high transaction fees, as is often the case in traditional financial systems. This makes for a wallet-friendly experience for both developers and users.

Getting Started

In this tutorial, we will embark on an exciting journey to create the backend of our decentralized application using Hardhat, a popular development tool for Ethereum smart contracts. Hardhat simplifies the process of writing, testing, and deploying smart contracts, making it an ideal choice for blockchain developers. By the end of this guide, you'll have a solid foundation to build robust, secure, and efficient smart contracts that will power your decentralized application.

Let’s follow this steps to create our backend.

1. Install hardhat Getting started with Hardhat | Ethereum development environment for professionals by Nomic Foundation
2. Run npx hardhat init
3. Run npm install dotenv @openzeppelin/contracts. After, you should have a folder structure like this.

In this example, we are going to deploy a Token to the Bitfinity Testnet. You can however use any example you want. In your contracts folder, create a file example AlphaToken.sol. Again, you can name this token what ever you want. Past the below code in your file.

In your deploy scripts, which can be found in scripts/deploy.js, update the script with the code below:

Now update your hardhard.config.js

Make sure to create a dotenv file .env to keep your private secret key. Be careful not to push your .env file to github or share with anyone as this can have access to your wallet. If you don’t know how to get your private key, you can read here: Support on how to do that. You would also need to make sure you have some BFT in your wallet for this deployment. You can read here on how to mint test tokens on Bitfinity here: How to deploy a Solidity contract to ICP using the Bitfinity EVM under Minting Faucet Tokens.

Update your scripts in your package.json
then run in your yarn deploy:evmc. or npm run deploy:evmc

Now we have our token deployed on the Bitfinity Testnet.

Deploy Frontend on IC

Here is an example project hosted on the IC GitHub - bitfinity-network/bitfinity-examples-token-deployer on https://oue7a-aqaaa-aaaao-aloza-cai.icp0.io/.

In order to continue with this, you must first have dfx installed locally. You can read on how to install dfx here: How do I install dfx?. It’s a very quick to read article on how to get this done.

In your root directory of your frontend code, create a dfx.json file.

The source in the case is the dist folder. Thus, it contains my html css and js build. entrypoint is the entry file most likely index.html. Let’s use the NNS Dapp to create our canister. We can access that here NNS Dapp . You will need to create a canister and fund that canister with some cycles. Dfinity already has a detailed article on this here https://medium.com/dfinity/how-to-deploy-your-first-canister-using-the-nns-dapp-c8b75e01a05b. The UI has been updated but the procedure is the same.

Create a file on in the source of your project called canister_ids.json and update with the code below.

Example

From the article on how to use nns to create a canister, we learn that we associate a principal id to the canister id as a controller so only the device with that principal id can deploy or update the canister.

Now run dfx deploy --network ic --no-wallet. After the deployment is complete, you would be able to access your website on example https://{your_canister_id}.icp0.io. Example is https://oue7a-aqaaa-aaaao-aloza-cai.icp0.io/. Now you have your project running directly on the Internet Computer’s blockchain.

In the journey through the Fully Decentralized Stack, we've uncovered a world of innovation. This shift from centralized to decentralized web development brings incredible advantages, like censorship resistance, transparency, and cost-efficiency. While challenges remain, they are opportunities for developers to shape a more open and secure digital future. With the right mix of skills and creativity, we can redefine the internet, giving people true control over their data and fostering a trustless, decentralized world. So, let's embrace this revolution and build the future we envision, one line of code at a time.

Connect with Bitfinity Network

Bitfinity Wallet | Bitfinity Network | Twitter | Telegram | Discord | Github

*Important Disclaimer: While every effort is made on this website to provide accurate information, any opinions expressed or information disseminated do not necessarily reflect the views of Bitfinity itself. The information provided here is for general informational purposes only and should not be considered as financial advice.