ICP Development Environment with Azle and React

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).

Get started with one click:

Locally:

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 your browser:

In Gitpod

or GitHub Codespaces

🚀 Develop

When the editor opened, run the following commands to start a local ICP node and deploy the canister smart contract:

dfx start --clean # Start a local ICP node
# In a new terminal window:
dfx deploy # Deploy smart contract locally

The smart contract will be reachable under http://bkyz2-fmaaa-aaaaa-qaaaq-cai.localhost:4943. Call the smart contract using curl on the command line:

# contacts endpoint
curl http://bkyz2-fmaaa-aaaaa-qaaaq-cai.localhost:4943/contacts
# price-oracle endpoint
curl -X POST http://bkyz2-fmaaa-aaaaa-qaaaq-cai.localhost:4943/price-oracle -H 'content-type: application/json' -d '{"pair": "ICP-USD"}'

You can also use tools like Postman or HTTPie to interact with the smart contract. To redeploy the smart contract, run dfx deploy again.

When ready, run dfx deploy --ic to deploy your application to the ICP mainnet. The command will print a different canister URL for mainnet, ending in .raw.icp0.io. You can make calls to the smart contract on mainnet just like to the local one!

🛠️ Technology Stack

• 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

📚 Documentation

• 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

💡 Tips and Tricks

• 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, run open -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.