Vite + React + ICP (Rust)

This project template gives you everything you need to build a Web3 application on the Internet Computer.

Check out Vite + React + Motoko for a beginner-friendly starter project with a Motoko backend.

Create a New Project

Make sure that Node.js >= 16.x, dfx >= 0.12.x, and Rust are installed on your system.

After installing Rust, run these commands to configure your system for IC canister development:

rustup target add wasm32-unknown-unknown # Required for building IC canisters
cargo install cargo-watch # Optional; used for live reloading in `npm start`

Next, run the following commands in a new, empty project directory:

npx degit rvanasa/vite-react-ic-rust # Download this starter project
dfx start --clean --background # Run dfx in the background
npm run setup # Install packages, deploy canisters, and generate type bindings

npm start # Start the development server

When ready, run dfx deploy to build and deploy your application.

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: a fast, safe programming language for writing Internet Computer canisters

Documentation

• Vite developer docs
• React quick start guide
• Internet Computer docs
• Rust developer docs
• dfx.json reference schema

Tips and Tricks

• Customize your project's code style by editing the .prettierrc file and then running npm run format.
• Reduce the latency of update calls by passing the --emulator flag to dfx start.
• Split your frontend and backend console output by running npm run frontend and npm run backend in separate terminals.

Run in your Browser

For a considerably faster setup time, check out the Vite + React + Motoko starter project.