Getting Started With The Internet Computer Web-Hosting

July 19, 2021 · 7 min read

#webdev #serverless #hosting #programming

Photo by Bradley Dunn on Unsplash

We are building a proof of concept to port our web app, DeckDeckGo, to the Internet Computer of the DFINITY foundation.

Our project’s first milestone is not yet completely reached but, I managed to successfully deploy our editor.

Here are the few things I learned along the way. Hopefully it will help you get started too.


Introduction

For our project I chose the path to set up everything by my own, using the DFINITY SDK and tools. The following information, notably these regarding cost and deployment, are linked to such approach.

If you are looking to ease the process of web-hosting, Fleek seems to be the solution you are looking for.


No Free Tier

In comparison to established cloud providers, the DFINITY foundation does not offer any free tier plan to explore the Internet Computer yet.

That being said, they might plan to launch such a concept soon according their website (see “Free Cycles”).

In addition, a CHF 200 million program to support the developer ecosystem, award teams to build dapps, tooling, and infrastructure on the Internet Computer.

You can submit a grant application here. Good luck 🤞.


Prepaid Hosting

Something which makes always a little scary before launching a new application is its related costs in case it would become widely used. Specially if the cloud provider does not offer you a straight forward option to turn down everything but, only provide warning notifications.

The Internet Computer works differently. You don't register your credit cards to buy computing power. You charge in advance a wallet with credits, what they called "cycles", to run your application.

When there is no more credit available, I am guessing the application stops. I find this approach interesting and kind of reassuring.


How To Buy Cycles

You have to own Internet Computer Protocol tokens (ICP tokens), a native utility token with a value determined on the open market, to buy cycles.

In other words: you cannot buy directly cycles with your credit cards and dollars.You have first to buy ICP on a cryptocurrency exchange platform and transfer these to your wallet to ultimately convert them to cycles.

Still confused?

  1. Create an account on a cryptocurrency exchange platform, I used Coinbase, and buy some ICP tokens with your credit cards. If you just want to give it a try, ~$5 USD should be fine.

  2. You will need an identity and a wallet on the Internet Computer to transfer and receive the tokens you just bought. The easiest way is using the NNS app that allows anyone to interact with the Internet Computer’s Network Nervous System with a user-friendly UI.

  3. In NNS app, you get a default main wallet. You can create more accounts but, I just went with the default one. On the main screen, copy the related ID, the identifier to transfer ICP from the exchange platform.

  1. On the exchange platform, find the option “Send and receive” in your dashboard and use the above ID as receiver. In Coinbase, you shall enter it in the input field accepting phone number and email. Yes that’s right, it goes there 😉.

That’s it, the tokens should be transferred within a couple of seconds and you will be able to convert ICP to cycles.


How To Deploy To The Internet Computer

I read the documentation back and forth but, did not find any better guide than this 👉 article 👈.

It displays step by step the most comprehensive way to deploy to the Internet Computer a web application. Kudos to its author, Kyle Peacock 🙏.


Webpack And React First

All examples you find in the documentation and forum are mostly focused on Webpack and React.

I use these in many projects, and can understand that a team has to give priority to particular topics but, I would rather like a framework/bundlers-less first approach.

Anyway and fortunately, contributor MioQuispe has created a CLI, create-ic-app, which provides different flavor of starter kits.

If you are using Rollup, as we do through Stencil, you can also check our repo (see stencil.config.ts and ic.config.ts).


Mo’ JS Chunks, Mo’ Problems

According to my tests, an Internet Computer's canister is currently not well suited for modern JavaScript app bundles split in multiple chunks.

It gives me the feeling it excepts the application to be provided with one or two resources top, a main.js and vendor.js, and thus for following reasons:


Cost Of Upload

Uploading assets to a canister takes time and costs too. Each resource is process and deploy in exchange for a few cycles.

I did not find or get how these are calculated but, it seems that the amount of operations, of files transfer, has a bigger impact on the related costs than the size.

For example, uploading 10 JS files of 1kb seems to cost more than uploading 1 file of 10 kb.

In addition, as each assets is analyzed and processed, it takes a few seconds to upload one resource.

A hash is created for every uploaded assets and, if no changes are detected, files will not be analyzed and imported again.

Nevertheless, I let you picture what it meant when I first tried to upload our application which contains >290 JavaScript chunks and >1'000 SVG images!


Boot Time

Once the application deployed, if you use the default URL <your-app-id>.ic0.app , a service worker will check that all delivered assets are certified before load.

This means that the more assets you have, the more JavaScript files you have, the slower it starts.

Fortunately, there is another sub-domain, <your-app-id>.raw.ic0.app where no such check is performs. The load time is de facto improve.


A Solution

If the boot time can be improved by using the raw sub-domain, the upload speed and cost may remain an issue. To mitigate this, I modified our application to not bundle our Web Components and Ionic design system.

Instead, it fetches the dependencies at run time through other CDNs (Unpkg and JSDelivr). I also leverage a Service Worker so that these resources are going to be properly cached on the client side.


Preload ESM Modules

The simulated local development network environment of the DFINITY SDK does not like ESM Modules as long that each and single one of these are not preloaded. Otherwise, you web application will just not load.

In production, once I deployed my application, I ran a quick Lighthouse test which also suggested me to preload several modules.

That’s why, if you ship your application with ESM Modules, I suggest you to preload modules. In addition, add the links at the bottom of the DOM, it improves the performance.

<html> <body> <!-- Anything / your content --> <link rel="modulepreload" href="/script1.js"> <link rel="modulepreload" href="/script2.js"> </body> </html>

Summary

I still got a bit of work on the agenda but, our first milestone is coming well together. Yesterday I even started to have a look at the authentication (part of our second milestone). I hope above tips and tricks might help some other developers to get started with this exciting new technology.

To infinity and beyond!

David

Blog

Read the article

Angular: The Single Rule To Get Better At RxJS

September 10th 2021 · 10 min read

#angular #rxjs #javascript #beginners

Read the article

Internet Computer: Web App Decentralized Database Architecture

August 17th 2021 · 9 min read

#webdev #serverless #database #blockchain

Read the article

Singleton & Factory Patterns With TypeScript

July 26th 2021 · 4 min read

#javascript #beginner #webdev #programming

More articles

My company address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

This website is open source. Its code is available on GitHub