Skip to main content

Svelte Dapp template

This repository is meant to give Svelte developers an easy on-ramp to get started with developing decentralized applications (Dapps in short) for the Internet Computer blockchain. Dapps, also known as smart contracts are specialized software that run on a blockchain.

This template contains a Svelte app under src/frontend that can be hosted on-chain on the Internet Computer.

You can see a deployed version of this template here: https://zgvi5-hiaaa-aaaam-aaasq-cai.ic0.app/

What is the Internet Computer?​

The Internet Computer is a novel blockchain that has the unique capability to serve web content while not requiring the end users to use a browser extension, such as Metamask.

Coupled with super fast execution the Internet Computer provides the worlds first truly user friendly Web 3.0 experience.

What are canisters?​

Dapps on the Internet Computer live in canisters, which are special smart contracts that run WebAssembly, and can respond to regular HTTP requests, among other capabilities.

This repository uses Svelte for the frontend, and can upload it to an asset type canister that can host your frontend on the Internet Computer.

Security Considerations and Security Best Practices​

If you base your application on this example, we recommend you familiarize yourself with and adhere to the Security Best Practices for developing on the Internet Computer. This example may not implement all the best practices.

For example, the following aspects are particularly relevant for creating frontends:

Install dependencies​

Make sure you have node.js installed.

How to get this template​

To clone this template without downloading the entire repository, run the following command:

npx degit dfinity/examples/svelte-starter svelte-starter

DFX​

Install dfx by running

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

Start the local replica​

Open a new terminal window in the project directory, and run the following command to start the local replica. The replica will not start unless dfx.json exists in the current directory.

dfx start --background

When you're done with development, or you're switching to a different dfx project, running

dfx stop

from the project directory will stop the local replica.

Build & run the dapp​

Make sure you switch back to the project root directory.

First, install the frontend dependencies by running

cd src/frontend
npm install
cd ..

To build and deploy the project run

dfx deploy

When the process completes you'll have a frontend canister running locally. To find the frontend canister's ID, run

dfx canister id frontend

It will output something similar to rno2w-sqaaa-aaaaa-aaacq-cai. Copy this ID and open it in the browser using http://localhost:8000?canisterId=<canister ID>, eg. http://localhost:8000?canisterId=rno2w-sqaaa-aaaaa-aaacq-cai.

Local development​

You can serve the frontend in development mode like you normally develop a svelte app using the command

npm run dev

from the project root directory, it is not necessary to deploy it to the frontend canister during development.

Deploying to the IC​

To host the Svelte app on the IC, you'll need to have some cycles available. Cycles pay for the execution of your app, and they are also needed to create canisters.

You can get $20 worth of cycles for free from the Cycles Faucet, if you have a GitHub account. To claim them, follow this guide.

You should have a canister running the cycles wallet on the IC at this point. The cycles wallet makes it easy to pay for canister creation.

You can check the balance by running

dfx wallet --network ic balance

After making sure you have cycles available you can run

dfx deploy --network ic

The command will build the project, create a new canister on the IC and deploy the Svelte app into it. The command will also create a new file canister_ids.json which will help the dfx tool deploy to the same canister in future updates. You can commit this file in your repository.

You can now open your Svelte app running on the IC. You can find the canister ID in the deploy command output, or use the ID in canister_ids.json.

The link to your app is <canister_id>.ic0.app. For example if your canister ID is zgvi5-hiaaa-aaaam-aaasq-cai, your app will be at https://zgvi5-hiaaa-aaaam-aaasq-cai.ic0.app/.