Getting Started With The Internet Computer Web-Hosting
July 19, 2021 · 7 min read
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.
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 🤞.
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.
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.
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.
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.
- 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
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
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.
Mo’ JS Chunks, Mo’ Problems
It gives me the feeling it excepts the application to be provided with one or two resources top, a
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.
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.
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.
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.
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>
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!