Last Updated: 2023-01-01

This is a quick tutorial to deploy a "Hello World" dapp to the Internet Computer (IC) in 10 minutes or less. Deployment of the dapp only requires basic knowledge of using a terminal.

To build and deploy the Hello dapp, you need to install the following tools.

dfx

sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"

Node.js

all stable versions of Node.js starting with 12. You can install 12, 14, or 16. Please note that Node 17 does not support Webpack's api proxy tool, so npm start may not work correctly.

A dfx project is a set of artifacts, including source code and configuration files, that can be compiled to a canister. By running

dfx new hello

dfx creates a new project directory called hello. The terminal output should look similar to this:

The hello project is composed of two canisters:

hello_backend canister, which contains the template backend logic

hello_frontend canister, which contains the dapp assets (images, html files, etc)

For this, we recommend using two terminals:

• Terminal A shows the output of the execution environment. This is analogous to starting a local server in a Web2 project, e.g. node.js's Express, python's Django, or Ruby's Rails.
• Terminal B is used to interact with the canister running in the execution environment. This is analogous to sending HTTP API messages to servers running locally, e.g. Postman or Panic.

A:

dfx start

B:

npm install

dfx deploy

Result

Installing code for canister hello_backend, with canister_id rrkah-fqaaa-aaaaa-aaaaq-cai

Installing code for canister hello_frontend, with canister_id ryjl3-tyaaa-aaaaa-aaaba-cai

via the command line

B:

dfx canister call hello_backend greet everyone

• The dfx canister call command requires you to specify a canister name and function to call.
• hello_backend specifies the name of the canister you call.
• greet specifies the function name.
• everyone is the argument that you pass to the greet function.

Test the dapp locally via the browser

npm start

Open a browser and navigate to http://localhost:8080/.

Stop the local canister execution environment

To stop the local deployment:

1. In terminal A, press Control-C to interrupt the local network process.
2. In terminal B, press Control-C to interrupt the development server process.
3. Stop the local canister execution environment running on your local computer

dfx stop