Deploying a Static Website to the Internet Computer

How I deployed a static Next.js build onto the internet computer, decentralised and at web speed.

15 September, 2021

Contributors

Rouven

@rouven

What is the Internet Computer?

The internet computer (IC) is a blockchain running software applications at web speed. This means, applications hosted on the internet computer run on a distributed architecture across the world by utilisation of canister smart contracts, safe and censorship resistant. By deploying software to the IC, developers don’t have to think about infrastructure tasks such as load balancing, storage volumes or network configuration requirements anymore but rather can focus on writing code using smart contracts.

There is a fast increasing ecosystem being built on the IC right now, including social networks such as Distrikt or decentralised chat applications like Open Chat. For a more detailed overview see the DFINITY Foundation website.

Ways to Deploy Static Websites on the Internet Computer

You can host static websites on the internet computer via two options. I chose the second and will explain the “manual” version here in greater detail.

Using Fleek, a hosting service for the next generation of the web. Fleek supports hosting on the IC as well as most of the common frameworks. You can start by simply connecting a Github repository.

Interacting directly with the IC via the DFINITY Canister SDK. You will create your own canister and convert ICP into cycles to run your application. Currently only works on macOS or Linux with node.js installed. You should also have a small amount of ICP to initially top up your canister.

A Step by Step Guide to Deployment

As an additional reference please refer to the DFINITY Network Deployment Guide and their Medium article. I left out some confirmative steps in this process. For more detail refer to the articles mentioned above.

Getting the Project Ready

I deployed my own personal website to the IC which I build with Next.js. Because I ran into issues with the canister deployment using the normal next build command, I created a static HTML export of my Next.js app. Maybe a normal build command works for you, if so please let me know in the comments! For my way, I changed the scripts section in the package.json file to the following:

Then I ran the build process with npm run build. This will generate an ‘out’ directory which contains the static version of the website. There are some things to consider such as the next Image component not working by default. Read more on on it here. In my case, I just changed all Image components to <img> tags. After this step, we are ready to use the DFINITY Canister SDK.

Setting up the SDK

First download and install the DFINITY Canister SDK from your terminal application. It will run you through a few installation steps and then you are ready to go.

Create and Configure a dfx.json File for the Project

In the root directory of the project, create a dfx.json file containing basic information on the canister name, type and build output directory. Because I created a static HTML export in Next.js, the build output will be the ‘out’ directory.

Setting up the Developer Identity

Before you can create a Canister to run your application on, you need to get info about the developer identity that dfx set up for you by default. To extract your principal and ledger account-id run the following commands. You can then use this information to but ICP tokens on an exchange and send them to your ledger account to later convert ICP into cycles for your canister.

You can check your current account balance with dfx ledger --network ic balance

Create a Canister and Convert ICP into Cycles

You can create a new canister by converting ICP from your ledger account into cycles. Specify your principal identifier from the command above and the amount of ICP in the command shown below.

You should get a message back specifying your canister identifier. Now install the cycles wallet code to the canister you just created using the canister id.

You can now use the canister and the cycles from your burned ICP to deploy your web application. You can confirm the amount of available cycles in your canister wallet by running:

Deploy the Static Next.js Application

We have already run the build command and our build version exists in the ‘out’ directory to which the dfx.json file links. The canister is setup and loaded with a (minimal) amount of cycles (you only need them for setup purposes). We can now deploy our static website to the internet computer with the following command:

You should now see the process play out in your terminal. You can check the result at your canister specific URL:

Congrats you have deployed your application to the internet computer! One more step taken toward the Web 3.0.

Where to Go From Here

So far for the initial starting point. The internet computer is becoming a viable hosting alternative for your future projects. Even if you decide to build out backend-enabled applications using smart contracts, cycle costs are low and, thus a valuable alternative to centralised hosting services.

I just deployed my own personal website here: https://hj3we-4yaaa-aaaah-qaofq-cai.raw.ic0.app/ . Check it out if you like!

I hope this article was helpful and provided an initial starting point to get your static project up and running on the IC.

There’s much more to learn and I’m eager to get deeper into development on the internet computer. Keep a look out for future content along my learning journey.

portfolio

nextjs

blockchain

icp

static