A modern SolidJS template with routing, powered by Vite.
- ⚡️ SolidJS - Reactive UI library
- 🚀 Vite - Next generation frontend tooling
- 🛣️ @solidjs/router - File-based routing with data loading
- 🎨 UnoCSS - Instant on-demand atomic CSS engine
- 🔧 Solid DevTools - Browser extension for debugging
- 📄 vite-plugin-pages - File system based routing
This template uses pnpm for dependency management, but any package manager will work.
# Install dependencies
pnpm install
# or
npm install
# or
yarn install# Start development server
pnpm dev
# or
npm run devOpen http://localhost:5173 to view it in the browser.
The page will reload automatically when you make edits.
# Build for production
pnpm build
# or
npm run buildBuilds the app for production to the dist folder. The build is minified and optimized for the best performance.
# Preview production build
pnpm serve
# or
npm run servePreview the production build locally before deployment.
├── src/
│ ├── components/ # Reusable components
│ │ └── Nav.tsx # Navigation component
│ ├── pages/ # Route pages (file-based routing)
│ ├── app.tsx # Root component with layout
│ ├── index.tsx # Application entry point
│ └── index.css # Global styles
├── public/ # Static assets
└── package.json
This template showcases the routing capabilities of SolidJS and demonstrates how the router works with Suspense to parallelize data fetching using the .data.ts pattern.
- File-based Routing: Pages are automatically generated from files in the
pages/directory - Component Architecture: Modular component structure with separated concerns
- Reactive Data Flow: Leverages SolidJS's fine-grained reactivity
- Suspense Integration: Efficient data loading with automatic loading states
Deploy the dist folder to any static hosting provider:
MIT