This template gives you everything you need to build a full-stack Web3 application on the Internet Computer. It includes a frontend built with Vite and React, and a backend written in JS/TS (Azle).
Make sure you have you have the latest version of Docker (e.g. >25) and VS Code installed and running, then click the button below
In Gitpod
or GitHub Codespaces
When the editor opened, run the following commands to deploy the smart contract and start a development server:
npm install # Install project dependencies
dfx start --clean # Start the local ICP node
dfx deploy # Deploy smart contract locally
The canister will be reachable under http://bkyz2-fmaaa-aaaaa-qaaaq-cai.localhost:4943
.
Call the canister using e.g., curl http://bkyz2-fmaaa-aaaaa-qaaaq-cai.localhost:4943/contacts
for HTTP endpoints and dfx canister call backend <method>
for Candid endpoints.
The frontend will update automatically as you save changes.
To redeploy the smart contract, run dfx deploy
.
When ready, run dfx deploy --ic
to deploy your application to the ICP mainnet.
- Azle CDK: the Canister Development Kit for JS/TS
- Vite: high-performance tooling for front-end web development
- React: a component-based UI library
- TypeScript: JavaScript extended with syntax for types
- Sass: an extended syntax for CSS stylesheets
- Azle book
- Internet Computer docs
- Internet Computer wiki
- Internet Computer forum
- Vite developer docs
- React quick start guide
dfx.json
reference schema- Developer Experience Feedback Board
-
When developing remotely, navigating to the canister's frontend in the browser will not work. Use
curl
on the command line instead, or develop locally. -
Note that you might need to disable CORS in your browser to make backend calls from
localhost
. For example, for Chrome, runopen -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
to disable CORS. -
If you get an error "Error: An error happened during communication with the replica: ... Connection refused", run
dfx start --clean
to start dfx.
This repo is a summary of our first bite of ICP, we extend the functionalities of the template such as a Canister that could keep track of its balance etc.
@AirMug, @MindCustom, @haojiahuojxust, @linliangmin
https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/
ICP's advantages that could make full-apps on chain, even the storage!
Not familiar with JS Language(and the devops setup is kind of a torture), A tight timeline to really #finish# Something,
Gained a deeper understanding of ICP and learned/practiced a new tech stack.