frandiox / vitessedge-template Goto Github PK

View Code? Open in Web Editor NEW

149.0 5.0 17.0 1.03 MB

🏕 Opinionated Vite Starter Template with SSR in Cloudflare Workers

Home Page: https://vitessedge.zable.workers.dev/

License: MIT License

HTML 4.39% Vue 31.61% TypeScript 54.37% CSS 9.50% Shell 0.13%

ssr vite vue cloudflare-workers vite-starter vite-template

vitessedge-template's Introduction

Vitessedge

Deploy your fullstack SSR apps to Cloudflare Workers using Vitedge.

Live Demo

Vue + Vite + SSR template based on @antfu's Vitesse

Features

⚡️ Vue 3, Vite 2, ESBuild - born with fastness
⚔️ Edge-side rendering in Cloudflare Workers via Vitedge, with edge cache and HTTP/2 server push
🗂 File based routing
📦 Components auto importing
📑 Layout system
📲 PWA
🎨 Windi CSS - on-demand Tailwind CSS with speed
😃 Use icons from any icon sets, with no compromise
🌍 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

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-icons - icons as Vue components

Plugins

Vue Router
- vite-plugin-pages - file system based routing
- vite-plugin-vue-layouts - layouts for pages
vite-plugin-components - components auto import
vite-plugin-pwa - PWA
vite-plugin-windicss - WindiCSS support
vite-plugin-md - Markdown as components / components in Markdown
- markdown-it-prism - Prism for syntax highlighting
- prism-theme-vars - customizable Prism.js theme using CSS variables
Vue I18n - Internationalization
- vite-plugin-vue-i18n - Vite plugin for Vue I18n
VueUse - collection of useful composition APIs
@vueuse/head - manipulate document head reactively

Coding Style

Use Composition API with <script setup> SFC
ESLint with @antfu/eslint-config-vue, single quotes, no semi.

Dev tools

TypeScript
Vitedge - Edge-side rendering
Wrangler - deploy to Cloudflare Workers
VS Code Extensions

Variations

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!

vitesse-lite by @kn0wn
vitesse-addons by johncampionjr - additional options for integrations, including Prettier and Storybook

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 frandiox/vitessedge-template my-vitesse-app
cd my-vitesse-app
npm i

Checklist

When you use this template, try follow the 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 favicon in public
Remove the .github folder which contains the funding info
Clean up the READMEs and remove routes

And, enjoy :)

Usage

Development

Just run and visit http://localhost:3333

npm run dev # SSR development
npm run dev:spa # SPA without SSR

Build

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.

Deploy on Cloudflare Workers

Create your Cloudflare account.
Install Wrangler CLI.
Modify the account_id in wrangler.toml. Then:

npm run preview # Simulate Worker environment locally
npm run deploy

Why

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)

vitessedge-template's People

Contributors

Stargazers

Watchers

Forkers

assoft syedpeer daveek johanneltabetdev kazupon daliborgogic verificatorrus maguayo clampr jango-blockchained workevolve kybru91 nabute lauragift21 togettechinov git-thinh lightyaer

vitessedge-template's Issues

Dev: Invalid module "node_modules/bin/vite-ssr" on Windows

Okay, I know Windows sucks for development, but we're building some things that must also run on Windows 😞

npm run dev on Windows 10 brokes with the error:

TypeError [ERR_INVALID_MODULE_SPECIFIER]: Invalid module "~/node_modules/.bin/vite-ssr"

node_modules/.bin/vite-ssr file exists but is not a JS module (and shouldn't be I guess).

Any ideas? May be an issue of https://github.com/antfu/vitesse itself?

How fetch KV data and use is components server side

I am not able to find out how can I fetch KV data on server side only with await and use in all components. Please help

Issue in installing and using vite-radar-plugins

How to install and use vite-plugin-radar (https://github.com/stafyniaksacha/vite-plugin-radar)

After including the plugin in vite.config.ts ,

ViteRadar({
      enableDev: true,
      analytics: {
        id: 'G-XXX',
      },
      gtm: {
        id: 'GTM-XXXX',
      },
    }),

I'm getting this error,

failed to load config from /home/nidhi/Documents/Web/RPWebAppV1.0.2/vite.config.ts
(node:4292) UnhandledPromiseRejectionWarning: TypeError: ViteRadar is not a function

Error [ERR_LOADER_CHAIN_INCOMPLETE]: "vitedge/dev/ts-loader.js 'resolve'" did not call the next hook in its chain and did not explicitly signal a short circuit. If this is intentional, include `shortCircuit: true` in the hook's return.

Directly clone this template to use, execute yarn dev, and then encounter the following error message:

yarn dev
yarn run v1.22.19
$ vitedge --port 3333 --open --ssr
(node:40924) ExperimentalWarning: Custom ESM Loaders is an experimental feature. This feature could change at any time
(Use node --trace-warnings ... to show where the warning was created)
(node:40924) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
Error: "vitedge/dev/ts-loader.js 'resolve'" did not call the next hook in its chain and did not explicitly signal a short circuit. If this is intentional, include shortCircuit: true in the hook's return.
at new NodeError (node:internal/errors:387:5)
at ESMLoader.resolve (node:internal/modules/esm/loader:849:13)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:7)
at async Promise.all (index 0)
at ESMLoader.import (node:internal/modules/esm/loader:530:24)
at loadESM (node:internal/process/esm_loader:91:5)
at handleMainPromise (node:internal/modules/run_main:65:12)
Done in 1.69s.

How can I solve it? Thanks

import.meta" is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

I'm currently experiencing this when running yarn dev, the ouput below contains errors.

1. No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "initDirectivesForSSR
2 import.meta" is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") and will be empty

log below

(node:7789) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Pre-bundling dependencies:
  vitedge
  nprogress
  @vueuse/head
  vue-i18n
  vue
  (...and 6 more)
(this will be run only when your dependencies or config have changed)
 > node_modules/vite-ssr/node_modules/@vue/server-renderer/dist/server-renderer.esm-bundler.js:1:119: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "initDirectivesForSSR"
    1 │ import { ssrContextKey, warn as warn$1, Fragment, Static, Comment, Text, mergeProps, ssrUtils, createApp, createVNode, initDirectivesForSSR } from 'vue';
      ╵                                                                                                                        ~~~~~~~~~~~~~~~~~~~~

/Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:1493
  let error = new Error(`${text}${summary}`);
              ^
Error: Build failed with 1 error:
node_modules/vite-ssr/node_modules/@vue/server-renderer/dist/server-renderer.esm-bundler.js:1:119: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "initDirectivesForSSR"
    at failureErrorWithLog (/Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:1149:7)
    at /Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:1258:14
    at /Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/Users/techieoriname/GitHub/vitessedge-template/node_modules/vite/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:390:28)
    at Socket.emit (node:domain:475:12) {
  errors: [
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: 'No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "initDirectivesForSSR"'
    }
  ],
  warnings: [
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: '"import.meta" is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") and will be empty'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: '"import.meta" is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") and will be empty'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: '"import.meta" is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") and will be empty'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: '"import.meta" is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") and will be empty'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: '"import.meta" is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") and will be empty'
    }
  ]
}

dev server error

(node:4735) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

node:internal/process/esm_loader:46
      internalBinding('errors').triggerUncaughtException(
                                ^
Error [ERR_LOADER_CHAIN_INCOMPLETE]: "vitedge/dev/ts-loader.js 'resolve'" did not call the next hook in its chain and did not explicitly signal a short circuit. If this is intentional, include `shortCircuit: true` in the hook's return.
    at new NodeError (node:internal/errors:405:5)
    at Hooks.resolve (node:internal/modules/esm/hooks:250:13)
    at async MessagePort.handleMessage (node:internal/modules/esm/worker:168:18) {
  code: 'ERR_LOADER_CHAIN_INCOMPLETE'
}

How to define routerOptions

Great work you have done on this project ✅

However on the main.ts file, routerOptions object seem not to be available to define something like scrollbehavior

export default vitedge(
  App,
  {
    routes,

  // ROUTER OPTIONS

    // Use Router's base for i18n routes
    base: ({ url }) => {
      const locale = extractLocaleFromPath(url.pathname)
      return locale === DEFAULT_LOCALE ? '/' : `/${locale}/`
    },
  },
  async (ctx) => {
    // install all modules under `modules/`
    Object.values(import.meta.globEager('./modules/*.ts')).map((i) =>
      i.install?.(ctx)
    )

    const { app, initialRoute } = ctx

    // Load language asyncrhonously to avoid bundling all languages
    await installI18n(app, extractLocaleFromPath(initialRoute.href))
  }
)

Client side only code

How can I have code that executes client side only in a vue component? Specifically, I want to use three.js in a vue component and want it to not be packaged in the worker script but only import and run client side.

Wrangler@2 Toml Format

Is there an updated guide for deploying with Wrangler 2.0?

Seems the entire wrangler.toml file format is different now.

✘ [ERROR] Missing entry-point: The entry-point should be specified via the command line (e.g. 'wrangler publish path/to/script') or the 'main' config field.

Cannot start SSR dev

Hello, I cloned the repository and tried to run the SSR dev environment with yarn dev and console is throwing type errors and I basically can't start it whatsoever. I tried to fix these issues, but every time I try to open preview in browser it ends due to this TypeError:

TypeError: Request is not a constructor
   at IncomingMessage.<anonymous> (file:///Users/brebera/Downloads/vitessedge-template-master%203/node_modules/vitedge/dev/middleware.js:21:9)
   at IncomingMessage.emit (events.js:315:20)
   at IncomingMessage.EventEmitter.emit (domain.js:485:12)
   at endReadableNT (_stream_readable.js:1225:12)
   at processTicksAndRejections (internal/process/task_queues.js:84:21)
✨  Done in 9.51s.

These are the errors that I've been getting right after the clone:

SyntaxError: The requested module 'vite-plugin-pwa' does not provide an export named 'VitePWA'
   at ModuleJob._instantiate (internal/modules/esm/module_job.js:92:21)
   at ModuleJob.run (internal/modules/esm/module_job.js:107:20)
   at Loader.import (internal/modules/esm/loader.js:179:24)
   at importModuleDynamicallyWrapper (internal/vm/module.js:432:15)
   at loadConfigFromFile (/Users/brebera/Downloads/vitessedge-template-master 3/node_modules/vite/dist/node/chunks/dep-66eb515d.js:46226:31)
   at Object.resolveConfig (/Users/brebera/Downloads/vitessedge-template-master 3/node_modules/vite/dist/node/chunks/dep-66eb515d.js:45889:28)
   at resolveHttpServer (/Users/brebera/Downloads/vitessedge-template-master 3/node_modules/vite-ssr/dev/server.js:31:20)
   at Object.createSsrServer [as default] (/Users/brebera/Downloads/vitessedge-template-master 3/node_modules/vite-ssr/dev/server.js:66:24)

after removing VitePWA:

SyntaxError: The requested module 'vite' does not provide an export named 'defineConfig'
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:92:21)
    at ModuleJob.run (internal/modules/esm/module_job.js:107:20)
    at Loader.import (internal/modules/esm/loader.js:179:24)
    at importModuleDynamicallyWrapper (internal/vm/module.js:432:15)

Cannot read properties of undefined (reading 'DEV')

When starting from the template, and updating the dependecies, I hit this issue:

Uncaught TypeError: Cannot read properties of undefined (reading 'DEV')
    at entry_client_default2 (entry-client.js:11)
    at main.ts:14

This works absolutely fine in production, it is only in dev mode it happens. Is there something I am doing wrong here, or should I stick to the initial package versions etc...?

Packages

  "dependencies": {
    "@vueuse/core": "^6.5.3",
    "@vueuse/head": "^0.6.0",
    "nprogress": "^0.2.0",
    "prism-theme-vars": "^0.2.2",
    "vitedge": "0.17.0",
    "vue": "next",
    "vue-i18n": "^9.1.7",
    "vue-router": "^4.0.10"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.9.0",
    "@cloudflare/workers-types": "^2.2.2",
    "@iconify/json": "^1.1.414",
    "@intlify/vite-plugin-vue-i18n": "^2.4.0",
    "@types/nprogress": "^0.2.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@vitejs/plugin-vue": "1.9.3",
    "@vue/compiler-sfc": "3.2.20",
    "@vue/server-renderer": "3.2.20",
    "cross-env": "^7.0.3",
    "esbuild": "^0.13.6",
    "eslint": "^8.0.1",
    "markdown-it-prism": "^2.2.1",
    "miniflare": "^1.4.1",
    "node-fetch": "^2.6.5",
    "rimraf": "^3.0.2",
    "ts-node": "^10.3.0",
    "typescript": "^4.4.4",
    "vite": "^2.6.7",
    "vite-plugin-components": "^0.13.3",
    "vite-plugin-icons": "^0.6.5",
    "vite-plugin-md": "^0.11.1",
    "vite-plugin-pages": "^0.18.1",
    "vite-plugin-pwa": "^0.11.3",
    "vite-plugin-vue-layouts": "^0.5.0",
    "vite-plugin-windicss": "^1.4.11"
  }