This template provides a batteries included setup for an ICP/React application with the latest versions of Vite, TypeScript, Tailwind CSS, Shadcn/UI, SWC, Eslint and Tanstack Query/Router.
Tip
Fork this repository as a starting point for your next ICP project.
Live demo: https://upacy-bqaaa-aaaal-qr7qa-cai.icp0.io
Tip
This template is also available in a version using ic-reactor instead of Tanstack Query. Check out that version from the ic-reactor branch.
The Rust based backend exposes one endpoint only, the greet
function that returns a greeting message.
The React/Vite/TS based frontend allows the user to input a name and click a button to fetch the greeting message from the backend.
Dependencies:
- React 19: The long awaited upgrade brings form actions, optimistic UI updates while mutating, etc etc.
- Vite 6: The most significant major release since Vite 2, featuring a new Environment API for enhanced flexibility, extended framework support, and streamlined performance for modern web development.
- Tailwind 4: The new version of Tailwind CSS is a ground-up rewrite of the framework, providing faster builds, great new CSS classes and better performance.
- Tanstack Query 5: The template uses Tanstack Query for data fetching, caching and loading state management.
- Tanstack Router: Modern and scalable routing for React and Solid applications
- SWC: The Rust based compiler and bundler that provides up to 70x faster build times than Babel.
- Eslint 9: The latest release of Eslint introduces the flat configuration API along with new rules and bug fixes.
- shadcn/ui: Yes, shadcn support for Tailwind 4 is finally here!
There are two main ways to set up the dev environment:
The dev containers extension lets you use a Docker container as a full-featured development environment. This repository includes a dev container configuration that you can use to open the project with all the necessary tools and dependencies pre-installed.
Pre-requisites:
Once Docker, Visual Studio Code and the Dev Containers Extension are installed, you can open the project in a container by clicking the button below:
Pre-requisites:
Once you have the prerequisites installed, you can clone this repository and run the project.
dfx start --background
pnpm install
dfx deploy
During development, you can run the frontend with hot reloading using Vite.
pnpm run dev
Kristofer |
This project is licensed under the MIT License. See the LICENSE file for more details.
Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions or improvements.