English 中文

A vue ssr🚀 project boilerplate with full typescript, vite, eslint, stylelint, husky, lint-staged, commitlint support. NO combined state management library, UI library or style library, especially built for those who always want to select eject and keep things under control. Read Wiki for more details.

NOTE: It's been some time since I last updated this repository, so the versions of the build tools and frameworks might be a bit outdated. However, I believe that the fundamental principles of Server Side Rendering (SSR) are still well represented within this repository.

git clone https://github.com/EverSeenTOTOTO/browser-app-boilerplate.git my-project -b vue-vite-ssr --depth 1
cd my-project
yarn

Note: You may install commitizen globally for git cz:npm i -g commitizen, or you can usenpx cz.

Checkout branch react-vite-ssr for a react similar version. A real project use this boilerplate can be found here.

• dev: make dev

• build: make build

1. Why makefile, not npm scripts?

   I found yarn clean && yarn build && yarn start so annoying.

2. Can I use this project for production?

   Production use of this project is possible, but will require advanced refactoring and optimization due to many implementation details.

3. My git hooks not working?

   Try make prepare to reinstall husky hooks.

4. What's the difference from official vite ssr demo?

   The biggest difference is we take render function defined in index.server.ts as a middleware, and still use ViteDevServer for development. The official demo however use their server.js as dev server, and regard ViteDevServer as a middleware (set server.middlewareMode).

+ /
  + config/
    - vite.dev.ts           # client dev config
    - vite.prod.ts          # clientApp build config
    - vite.server.ts        # server build config
    - vite.serverEntry.ts   # serverApp build config
  + src/
    + server/
      - index.ts        # server entry
    - main.ts
    - index.server.ts   # serverApp entry
    - index.client.ts   # clientApp entry