Code Monkey home page Code Monkey logo

abiteoficp's Introduction

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

๐Ÿ› ๏ธ 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.

Description:

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.

Track: Fully on-chain dapps

Team participants:

@AirMug, @MindCustom, @haojiahuojxust, @linliangmin

Mainnet canister link:

https://a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/

Feedback:

What you learned...

ICP's advantages that could make full-apps on chain, even the storage!

Challenges...

Not familiar with JS Language(and the devops setup is kind of a torture), A tight timeline to really #finish# Something,

What you are proud of...

Gained a deeper understanding of ICP and learned/practiced a new tech stack.

abiteoficp's People

Contributors

fxgst avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.