Overview
An overview of the vth stack and how it works
Project structure
After you initialized your project, the structure should look something like this:
layout.tsx
page.tsx
index.tsx
production.ts
package.json
Stack
Recommended extensions (for VSCode)
- Tailwind CSS IntelliSense - TailwindCSS autocomplete
- ESLint - JavaScript/TypeScript linter
Build tool
This template is centered around Vite as it's very flexible and hackable, providing good DX while simultaneously handling client and server.
Why Vite?
- Way more performant with rolldown (replacement for esbuild and rollup) than bundlers like webpack
- Very customizable when it comes to complex apps
- Versatile for stuff like PWA, different frameworks, in our case a seperate SMTP server and customizable build outputs
- Rich of plugins making it easy to extend the app
Frontend
The frontend is built with React, but it shouldn't be difficult to switch to another one you prefer.
Routing
Routing is made with vite-plugin-rsc-pages and @vite/plugin-rsc which is configured to mimic Next.js-like experience.
Styling
CSS is mostly done with TailwindCSS.
UI Components
Backend
The backend is build with Hono.
Why Hono?
- Easy to understand and integrate with Vite
- Very customizable and extendable
- Type-safe and has RPC client out of the box