How to Deploy Your First Canister Smart Contract Using the NNS Dapp

A step-by-step guide to spinning up a canister using the NNS front-end dapp’s interface.

By Kyle Peacock, Software Engineer | DFINITY

Let’s say you have some ICP utility tokens and you want to spin up your first canister smart contract on the Internet Computer. This guide will get you started with everything you need and walk you through all of the necessary steps using the NNS front-end dapp.

Prerequisites

• A https://nns.ic0.app wallet, logged in.
• ~$5 USD worth of ICP transferred to your wallet address.
• A computer with dfx sdk installed from https://sdk.dfinity.org.

Create your canister

To begin, log in to your https://nns.ic0.app account and verify your balance.

NNS dashboard with funded accounts

Next, navigate to the “Canisters” tab in the top right. You should see the screen below:

Canister view

Click the blue “Create or Link Canister” button at the bottom of your page to open up the dialog.

Canister creation dialog

Click the “Create New Canister” button. Then select the ICP account that you want to use to fund your new canister.

Select ICP Source Account

You’ll then be prompted to enter an amount. For now, we will enter 5 into the T Cycles (trillion cycles) input. 5 trillion cycles calculates to ~65¢ per 1T, so around $3.25 USD.

Creating a canister comes with a 1T fee, so that will leave you with 4T cycles left to run your canister.

Entering in amount to fund your canister

Click “Review Cycles Purchase,” and then review on the following screen.

Review canister creation

Click “Confirm” again, and then you should be good to go!

Successfully created canister

Connecting your computer

For this example, I’ll be using a super minimal website as the app we are deploying.

The app isn’t important, but you should be in a directory with a valid dfx project for the next instructions. You can follow along directly by cloning this example project:

git clone https://github.com/krpeacock/ic-static-minimal.git
cd ic-static-minimal

Next, you’ll need to get the principal from your computer by running:

dfx identity get-principal

Fetching principal using terminal (ignore the directory name)

Copy that principal id and head back to your tab with your newly created canister. Click the blue “Change Controllers” button to open up the controller management UI.

Entering principal id as a controller

Enter your principal in the empty second input, and then click “Perform Controller Change.” This step authorizes your dfx on your computer to deploy to your newly created canister.

Controller change confirmation

After you accept the confirmation, copy your canister ID. We’re going to use it now to deploy your first canister.

Deploy your canister

Open up the example project, and open the file canister_ids.json. Replace <canister-id> with your canister ID inside the quotes, and save the file.

Replace <canister-id> in canister_ids.json

Then, you’ll need to run

dfx deploy --network ic --no-wallet

to deploy an asset canister, hosting the index.html file under /assets. This will deploy an incredibly simple static website to the Internet Computer.

Breaking down the command, dfx is deploying the project using the config from dfx.json. We flag that the network should be IC, which is the production replica where you just created your canister. Then, we say --no-wallet, indicating to dfx that you are deploying your canister directly to an existing canister using your principal.

Deploying the site

Finally, once the deployment is successful, open up a tab in your browser to <canister-id>.ic0.app, once again replacing <canister-id> with your canister ID.

Live site

If all goes well — congrats! Your new site should be live on the Internet Computer.

Try making changes to index.html and re-deploy with dfx deploy --network ic --no-wallet to see your updates go out, running directly on the Internet Computer’s blockchain!
____

Start building at smartcontracts.org and join our developer community at forum.dfinity.org.