Opinionated Alpine.js starter template, with file based routing, PWA, components auto-loading, and more!
Mock up Rapide (fast) Alpine.js web apps.
Update: check out astro.build instead!
it works but you need to make some changes:
- roll back to this commit: https://github.com/rehhouari/rapide/commit/05b0e513949747b0fc645e3ea65c9d4f4d12630b
it have potential, or had. it came make spinning up a web app with alpine v2 really quick but there are some problems. i tried documeting everything but the vite plugin isn't documented.
I don't think anyone would bother but if you're bored feel free, I'll try to accept pull requests too, and it's MIT so you can fork all parts i made (router, i18n, vite plugin) and make a better template. good luck and sorry.
-
🗂 File based routing & layout system. on top of Pinecone Router + smart hot-reloading!
-
🛺 Add functionality with auto-loaded modules
-
📑 Organized file structure with documentation for each part.
-
📲 Zero-config PWA
-
🎨 Windi CSS - next generation utility-first CSS framework
-
🌍 I18n ready with pre-configured VSCode extension support
-
🗒 Markdown Support, optional and can be removed without bloat left.
-
🔥 Central application store with Spruce
-
🦾 Full TypeScript support, even in Alpine Components.
-
☁️ Deploy on Netlify & Vercel, zero-config
- Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bundle additional features!
- Windi CSS Typography - similar to Tailwind CSS Typography but for Windi CSS
- Iconify - use icons from any icon sets 🔍Icônes
vite-plugin-purge-icons
- only bundle icons you use.
- Pinecone Router
pinecone-router-middleware-views
- load views from filesvite-plugin-pinecone-pages
- file-based routing for Pinecone Router with (Optional, default: on) Markdown support, layouts, and smart reloading-no more full-reloads for view changes!markdown-it-prism
- Prism for syntax highlightingprism-theme-vars
- customizable Prism.js theme using CSS variables
vite-plugin-pwa
- PWAvite-plugin-windicss
- WindiCSS support- Alpine I18n - Internationalization, organized in local YAML files with VSCode Extension support!
- Alpine Magic Helpers, x-else, alpine-clipboard, alpine-toggle - collection of useful magic helpers for Alpine.js, with TypeScript Support in components!.
- Spruce - Central store for Alpine.js components, supporting custom storage drivers, meaning you can easily sync data.
- NProgress - Beautiful progress bar, with customizable looks
- ESLint with @antfu/eslint-config, single quotes, no semi.
- VS Code Extensions
- Alpine.js IntelliSense
- Vite - Fire up Vite server automatically
- Iconify IntelliSense - Icon inline display and autocomplete
- i18n Ally - All in one i18n support
- Windi CSS Intellisense - IDE support for Windi CSS
- ESLint
- TypeScript
- pnpm - fast, disk space efficient package manager
- Netlify, Vercel - zero-config deployment
- Icones - view and explore all icons you can use in your app.
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
npx degit rehhouari/rapide my-rapide-app
cd my-rapide-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
When you use this template, try to follow this checklist to update your info properly
- Rename
name
field inpackage.json
- Change the author name in
LICENSE
- Change the title in
index.html
- Change the icons in
public/images/icons
- Remove the
.github
folder which contains the funding info - Clean up the READMEs and remove routes & handlers
And, enjoy :)
Just run and visit http://localhost:3000
pnpm dev
To build the App, run
pnpm build
And you will see the generated file in dist
that ready to be served (test it with pnpm serve
).
Go to Netlify and select your clone, OK
along the way, and your App will be live in a minute.
Same for Vercel.
This template is heavily inspired by and based on @antfu's Vitesse for Vue. I wanted to bring a similar development experience to Alpine.js and show how it can be used to make web apps as well and not just as a JQuery alternative. So I been building plugins for Alpine.js & Vite to bridge the gap that made it difficult to accomplish that.
Before I found Vitesse, I've based this on @ryangjchandler's experiment on code organization. When I saw it I felt it has potential, and I wanted to make it more accessible. hopefully I did now.