π Opinionated Vite Starter Template with SSR in Cloudflare Workers
MIT License
βοΈ Edge-side rendering in Cloudflare Workers via Vitedge, with edge cache and HTTP/2 server push
π File based routing
π Layout system
π² PWA
π¨ Windi CSS - on-demand Tailwind CSS with speed
π I18n ready with different routes for each language.
π Markdown Support
π₯ Use the new <script setup>
style
π¦Ύ TypeScript, of course
βοΈ Deploy on Cloudflare Workers, minimal setup
vite-plugin-icons
- icons as Vue componentsvite-plugin-pages
- file system based routingvite-plugin-vue-layouts
- layouts for pagesvite-plugin-components
- components auto importvite-plugin-pwa
- PWAvite-plugin-windicss
- WindiCSS supportvite-plugin-md
- Markdown as components / components in Markdown
markdown-it-prism
- Prism for syntax highlightingprism-theme-vars
- customizable Prism.js theme using CSS variablesvite-plugin-vue-i18n
- Vite plugin for Vue I18n@vueuse/head
- manipulate document head reactively<script setup>
SFC
As this template is strongly opinionated, the following provides a curated list for community maintained variations with different preferences and feature sets. Check them out as well. PR to add yours are also welcome!
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
npx degit frandiox/vitessedge-template my-vitesse-app
cd my-vitesse-app
npm i
When you use this template, try follow the checklist to update your info properly
name
field in package.json
LICENSE
index.html
public
.github
folder which contains the funding infoAnd, enjoy :)
Just run and visit http://localhost:3333
npm run dev # SSR development
npm run dev:spa # SPA without SSR
To build the App, run
npm run build
And you will see the generated files in dist
, and some of these files will be moved to serverless
for deployment.
account_id
in wrangler.toml. Then:npm run preview # Simulate Worker environment locally
npm run deploy
I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.
So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. (see community maintained variation forks)