Skip to main content

Chapter 2 Deploy Applications: A Comparative Study

Published onDec 31, 2021
Chapter 2 Deploy Applications: A Comparative Study
·

Chapter Author: Luyao Zhang

I. Deploy Applications on the Internet Computer

The IC provides an intuitive experience for developers. Figure 2.1.1 demonstrates the web application deployment pipeline. In general, both the frontend and backend source code are deployed and executed in a computational unit called software canisters. First, for storage, the canisters are similar to containers (e.g., Docker) that store compiled code with dependencies for an application. In addition, canisters are also actors that record state variables of all preceding events and user interactions. Moreover, for computing, canisters are similar to smart contracts on the Ethereum blockchain, of which the state updating is tamperproof. Finally, the canister is inclusive: on the one hand, developers can program the backend in any language that can be compiled to WebAssembly modules; on the other hand, developers can follow conventional steps in web development and program frontend utilizing a framework, such as Reactjs and Vuejs. Moreover, Candid, an interface description language, is able to facilitate interoperations between canisters programmed in different languages.

Figure 2.1.1: IC Web Application Deployment Pipeline

Now, we demonstrate the development process in experiential learning. Recall that in Chapter 1, we deploy a React application to IC through Fleek. Alternatively, we can utilize the Dfinity SDK to reveal the background process of development. First, in the terminal window, we run the following command to create a React application and open the folder on VS code:

npx create-react-app ic-oer-reactapp-canisters
cd ic-oer-reactapp-canisters
yarn start --background
code.

Then, we manually create a dfx.json file, as shown in Figure 2.1.2, for configuration.

Figure 2.1.2

Next, we further customize the web interface by revising the App.js file, as shown in Figure 2.1.3

Figure 2.1.3

Finally, we can start a local server and complete the deployment process by running the following command in the project folder:

cd ic-oer-reactapp-canisters
dfx start --background
npm install
dfx deploy
npm start

running on the local server and can be viewed in a web browser at http://localhost:3000/.

Figure 2.1.4

Alternatively, dfx deploy can be replaced with three separate steps:

cd ic-oer-reactapp-canisters
dfx start --background
npm install
dfx canister create --all
dfx build --check
dfx canister install --all
npm start

In Figure 2.1.5, two canisters are created. The frontend can also be viewed by visiting the following: http://10.208.108.69:3000/?canisterId=ryjl3-tyaaa-aaaaa-aaaba-cai. The project folder ic-oer-reactapp-canisters is saved in the GitHub repository.

Figure 2.1.5

II. Deploying Experience: A Comparative Study

In this section, we compare the web application development process on the IC to other alternatives. Figure 2.2.2 presents a comparison in the spirit of decentralization. Conceptually, the IC is decentralized in terms of both backend and frontend hosting because they are running in software canisters, which are nodes on a blockchain. For DApps on Ethereum, in general, the backend is programmed in smart contracts running on the nodes of the Ethereum blockchain; however, the frontends are often hosted on centralized platforms. Ethereum also provides a decentralized domain called ENS. InterPlanetary File System (IPFS), a protocol and peer-to-peer network for storing and sharing data in a distributed file system, provides frontend hosting in a decentralized way. Decentralization promises higher levels of privacy, ownership, and security because a single server cannot be breached and user data cannot be tampered with or censored.

However, most web applications are still hosted on centralized platforms, such as Amazon web service, Microsoft Azure, and Google Cloud. The advantages of decentralization are often at the cost of efficiency and scalability, such as high transaction cost and low transaction speed. The IC promises a decentralized open internet without sacrificing much efficiency with several path-breaking technologies, such as orthogonal persistence in Motoko language, Chain Key Cryptography for canister hosting, and Network Nervous System for blockchain governance. The validity of this promise remains to be researched and tested.

Figure 2.2.1: Decentralization of Web Applications

III. Deploy Liquity Frontend: A Case Study

In this section, we demonstrate step-by-step how to deploy an application called Liquity Frontend. Liquity is a decentralized lending application on the Ethereum blockchain. Users interact with the protocol’s backend through a web interface, i.e., the frontend. Everyone can operate a Liquity frontend. For the service, frontend operators are rewarded with a share of governance tokens that the user generates. Moreover, the frontend operator can set a kickback rate between 0% and 100%, which determines the proportion of the share they give back to their users. Figure 2.3.1 demonstrates the workflow that deploys the frontend to both centralized and decentralized platforms, including Netlify, IPFS, and IC. Users use the frontend to interact with the Liquity backend, which are smart contracts on the Ethereum blockchain.

Figure 2.3.1 Deploy the Liquity Frontend

1. Download and Configure the Frontend

Figure 2.3.2 Liquity Frontend Web Interface

First, install docker and run the following command to download the Liquity frontend launch kit prebuilt image in a Docker container:

docker pull liquity/dev-frontend

the frontend locally using HTTP on port 8000 by running the following:

docker run --name liquity -d --rm -p 8000:80 liquity/dev-frontend

ttp://localhost:8000/. Figure 2.3.1 shows the web interface after logging in with Metamask. The service can be stopped as follows:

docker kill liquity

Then, the frontend can be publicly configured by setting the public address for this frontend:

docker run --name liquity -d --rm -p 8000:100 -e FRONTEND_TAG=<wallet public address on Ethereum> liquity/dev-frontend

For example, in Figure 2.3.3, we set the wallet address to “0x4741494439603E852CBd12daB6d5a24DBdD6beBA.”

Figure 2.3.3

2. Push the frontend to a GitHub repository

First, extract the Liquity Frontend files from a docker container to a folder of your choice:

docker cp liquity:/usr/share/nginx/html./<folder name>

For example, Figure 2.3.4 extracts the files to a folder named “liquity_frontend” under the current directory.

Figure 2.3.4

Ensure that Git is installed, and then follow the instructions to create a GitHub repository. Figure 1.3.5 shows that we have successfully created a repository at https://github.com/duke-sunshine/Liquity_Frontend.git

Figure 2.3.5

3. Host the frontend in multiple ways.

Now, the frontend can be deployed to a decentralized platform following similar steps presented in Chapter 1.3 by creating a site via Fleek. When deploying, either IPFS or IC can be selected, as indicated in Figure 2.3.6.

Figure 2.3.6 Choosing the Decentralized Hosting Platform

Figure 2.3.7 shows that the deployment of IC was successful and lxlsk-3iaaa-aaaad-qalma-cai was the Canister ID.

Figure 2.3.7 Liquity Frontend: IC hosting

Similarly, Figure 2.3.8 demonstrates a successful deployment of the IPFS after further customizing the site name to “liquityfrontend.”

Figure 2.3.8 Liquity Frontend: IPFS hosting

Finally, the frontend can be deployed to a centralized server by creating a new site on Netlify. Figure 2.3.9 shows a successful deployment from GitHub.

Figure 2.3.9 Liquity Frontend: Netlify Hosting

Finally, before the users can interact with Liquity via the frontend that was deployed, the kickback rate must be set. One of the following three web interfaces can be visited: IPFS, IC and Netflify. Then, connect Metamask via its Chrome extension using the wallet that was set for the frontend. For example, Figure 2.3.10 shows that we choose a kickback rate of 98%.

Figure 2.3.10 Liquity Frontend: Set kickback rate

After confirming and signing using MetaMask, the frontend is ready to use. Users can visit your frontend at IPFS, IC and Netflify. After connecting their wallet through the MetaMask Chrome extension, users will see a web interface, as shown in Figure 2.3.11.

Comments
0
comment
No comments here
Why not start the discussion?