This template provides a batteries included setup for an ICP/React application with the latest versions of Vite, TypeScript, Tailwind CSS, SWC, Eslint and React Query.
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 React 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.
- 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: Sorry, no. Shadcn is not available for Tailwind 4 yet. Soon hopefully.
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 --backgroundpnpm 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.
This website follows Conventional Commits
<type>(optional scope): <description>
Example: feat(pre-event): add speakers section
Available types are:
- feat → Changes about addition or removal of a feature. Ex:
feat: add table on landing page,feat: remove table from landing page - fix → Bug fixing, followed by the bug. Ex:
fix: illustration overflows in mobile view - docs → Update documentation (README.md)
- style → Updating style, and not changing any logic in the code (reorder imports, fix whitespace, remove comments)
- chore → Installing new dependencies, or bumping deps
- refactor → Changes in code, same output, but different approach
- ci → Update github workflows, husky
- test → Update testing suite, cypress files
- revert → when reverting commits
- perf → Fixing something regarding performance (deriving state, using memo, callback)
- vercel → Blank commit to trigger vercel deployment. Ex:
vercel: trigger deployment
Labels per page Ex: feat(pre-event): add date label
*If there is no scope needed, you don't need to write it
Description must fully explain what is being done.
Add BREAKING CHANGE in the description if there is a significant change.
If there are multiple changes, then commit one by one
- After colon, there are a single space Ex:
feat: add something - When using
fixtype, state the issue Ex:fix: file size limiter not working - Use imperative, and present tense: "change" not "changed" or "changes"
- Don't use capitals in front of the sentence
- Don't add full stop (.) at the end of the sentence