Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kristoferlund/ic-vite-react-next
ICP / Vite / React / Tailwind starter template using all the latest stuff.
https://github.com/kristoferlund/ic-vite-react-next
eslint internet-computer react swc tailwindcss vite
Last synced: 3 months ago
JSON representation
ICP / Vite / React / Tailwind starter template using all the latest stuff.
- Host: GitHub
- URL: https://github.com/kristoferlund/ic-vite-react-next
- Owner: kristoferlund
- License: mit
- Created: 2024-11-29T10:27:36.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-29T23:11:53.000Z (3 months ago)
- Last Synced: 2024-11-29T23:25:18.303Z (3 months ago)
- Topics: eslint, internet-computer, react, swc, tailwindcss, vite
- Language: JavaScript
- Homepage: https://upacy-bqaaa-aaaal-qr7qa-cai.icp0.io
- Size: 253 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ICP + React + TypeScript + Vite
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:[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]](LICENSE)
## Features
### Backend
The Rust based backend exposes one endpoint only, the `greet` function that returns a greeting message.
### Frontend
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:
- [SWC](https://swc.rs/): The Rust based compiler and bundler that provides up to 70x faster build times than Babel.
- [Tailwind 4](https://tailwindcss.com/docs/v4-beta): The new version of Tailwind CSS is a ground-up rewrite of the framework, providing faster builds, great new CSS classes and better performance.
- [Vite 6](https://vite.dev/): 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.
- [Eslint 9](https://eslint.org/): The latest release of Eslint introduces the flat configuration API along with new rules and bug fixes.
- [Tanstack Query 5](https://tanstack.com/query/latest): The template uses Tanstack Query for data fetching, caching and loading state management.
- [shadcn/ui](https://ui.shadcn.com/): Sorry, no. Shadcn is not available for Tailwind 4 yet. Soon hopefully.## Setup, dev environment
There are two main ways to set up the dev environment:
### 1. Using a VS Code Dev Container
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:
- [Docker](https://www.docker.com/products/docker-desktop)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Dev Containers Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)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:[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/kristoferlund/ic-vite-react-next)
### 2. Setup manually
Pre-requisites:
- [Local Internet Computer dev environment](https://internetcomputer.org/docs/current/developer-docs/backend/rust/dev-env)
- [pnpm](https://pnpm.io/installation)Once you have the prerequisites installed, you can clone this repository and run
the project.## Running the project
### 1. Start the Internet Computer
```bash
dfx start --background
```### 2. Install dependencies
```
pnpm install
```### 3. Deploy the canisters
```
dfx deploy
```## Develop
During development, you can run the frontend with hot reloading using Vite.
```bash
pnpm run dev
```[contributors-shield]: https://img.shields.io/github/contributors/kristoferlund/ic-vite-react-next.svg?style=for-the-badge
[contributors-url]: https://github.com/kristoferlund/ic-vite-react-next/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/kristoferlund/ic-vite-react-next.svg?style=for-the-badge
[forks-url]: https://github.com/kristoferlund/ic-vite-react-next/network/members
[stars-shield]: https://img.shields.io/github/stars/kristoferlund/ic-vite-react-next?style=for-the-badge
[stars-url]: https://github.com/kristoferlund/ic-vite-react-next/stargazers
[issues-shield]: https://img.shields.io/github/issues/kristoferlund/ic-vite-react-next.svg?style=for-the-badge
[issues-url]: https://github.com/kristoferlund/ic-vite-react-next/issues
[license-shield]: https://img.shields.io/github/license/kristoferlund/ic-vite-react-next.svg?style=for-the-badge