Skip to content

One-click dev env for developing canisters on ICP with JS/TS and a React frontend

Notifications You must be signed in to change notification settings

fxgst/azle-react

Repository files navigation

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

Open locally in Dev Containers

In your browser:

In Gitpod

Open in Gitpod

or GitHub Codespaces

Open in 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

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

About

One-click dev env for developing canisters on ICP with JS/TS and a React frontend

Resources

Stars

Watchers

Forks