Rapide ^(fast) ⚡ 🏔️ 🌲

Opinionated Alpine.js starter template, with file based routing, PWA, components auto-loading, and more!

Mock up Rapide ^(fast) Alpine.js web apps.

Live Demo

NOTICE:

look, i can't work on it now, sadly. 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.

Features

• ⚡️ Alpine.js, Vite 2, pnpm, ESBuild - born with fastness

• 📦 Components auto importing

• 🗂 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

• 😃 Use icons from any icon sets, with no compromise

• 🌍 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

Pre-packed

UI Frameworks

• 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

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• vite-plugin-purge-icons - only bundle icons you use.

Plugins

• Pinecone Router
  • pinecone-router-middleware-views - load views from files
  • vite-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 highlighting
    • prism-theme-vars - customizable Prism.js theme using CSS variables
• vite-plugin-pwa - PWA
• vite-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

Coding Style

• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• 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.

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

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

Checklist

When you use this template, try to follow this checklist to update your info properly

• Rename name field in package.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 :)

Usage

Development

Just run and visit http://localhost:3000

pnpm dev

Build

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).

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Same for Vercel.

Why

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.