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

blackcow1987/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:

In your browser:

In Gitpod

Open in Gitpod

or GitHub Codespaces

Open in GitHub Codespaces

Locally:

Make sure you have you have Docker and VS Code installed and running, then click the button below

Open locally in Dev Containers

🚀 Develop

When the editor opened, run the following commands to deploy the canisters and start a development server:

npm install # Install project dependencies
dfx deploy # Deploy canisters locally

npm start # Start the development server

The frontend will update automatically as you save changes. For the backend, run dfx deploy backend to redeploy. To redeploy all canisters (front- and backend), run dfx deploy.

When ready, run dfx deploy --network ic to deploy your application to the ICP mainnet.

🛠️ Technology Stack

  • 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 CDK: the Canister Development Kit for JS/TS

📚 Documentation

💡 Tips and Tricks

  • If the links printed by dfx do not work in Codespaces, run ./canister_urls.py and click the links shown there.
  • If you get an error "Error: An error happened during communication with the replica: ... Connection refused", run dfx start --clean --background to start dfx

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 33.7%
  • JavaScript 28.8%
  • Python 24.8%
  • SCSS 7.6%
  • HTML 5.1%