Skip to content

fxgst/evm-rpc-rust

 
 

Repository files navigation

Vite + React + Rust + EVM RPC

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, a backend written in Rust, and the EVM RPC canister to directly connect to Ethereum or other EVM-based blockchains.

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

Or do the manual setup:

Make sure that Node.js >= 21 and dfx >= 0.18 are installed on your system.

Run the following commands in a new, empty project directory:

git clone https://github.com/fxgst/evm-rpc-rust.git # Download this starter project
cd evm-rpc-rust # Navigate to the project directory
dfx start --clean --background # Run dfx in the background
npm install # Install project dependencies
npm run setup # Install packages, deploy canisters, and generate type bindings

npm start # Start the development server

🚀 Develop

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
  • Prettier: code formatting for a wide range of supported languages
  • Rust CDK: the Canister Development Kit for Rust
  • EVM RPC canister: call Ethereum RPC methods from the Internet Computer

📚 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 The wasm of 7hfb6-caaaa-aaaar-qadga-cai in pulled cache ... run rm -rf ~/.cache/dfinity/pulled/7hfb6-caaaa-aaaar-qadga-cai
  • Customize your project's code style by editing the .prettierrc file and then running npm run format.
  • Split your frontend and backend console output by running npm run frontend and npm run backend in separate terminals.

About

Starter Project for ICP x ETH with Vite & React

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Rust 53.8%
  • TypeScript 20.6%
  • SCSS 15.5%
  • Python 8.2%
  • HTML 1.9%