/quasar-ssr-nestjs-boilerplate

Quasar Framework + Vue SSR + NestJS API Server = ULTIMATE FULLSTACK

Primary LanguageJavaScript

Quasar + SSR + Nest.js Boilerplate

WHATDEPS2USING

All files based on Quasar basic template and Nestjs basic template.

WHATSTRUCTURE4PROJECT

  • Project
    • public: Serve quasar static files.
    • src: Vue components and client libraries.
    • src-ssr: Quasar SSR + NestJS + server libraries.
      • controller: Nestjs controllers.
      • middleware: Nestjs and Quasar Middlewares(Read it first for quasar middleware).
      • service: Nestjs service and providers.
      • app.module.js: Nestjs App Module.
      • standalone.ts: Standalone main.ts of Nestjs for dev server.
      • production-export.ts: Nest API Server with Quasar SSR. Read info.
    • test: E2E test and unit tests
    • FRONT.md: README.md for Quasar
    • BACK.md: README.md for Nestjs

FEATURE4YOU

  • Quasar SSR for Vue SSR with pros of SSR feature. (SEO, splitting bandwidth, etc.)
  • Nest.JS for API Server and enjoy MVC Pattern. the URL prefix is /api.
    • NOTE: by edited src-ssr/middlewares/render.ts, Quasar will ignore all start with /api routes for API server reservation.
  • ALL IN ONE FULLSTACK SERVER FOR PRODUCTION!
  • Build with SWC instead of Babel(but you can still use babel by editing quasar.config.js file).
  • Also each Quasar SPA(CSR) and Nest.js development and building are suppored if you want separate frontend and backend.
    • Of course, you can still use SSR also split client and server for scale.

HOW2RUN

yarn recommended! (yarn berry not supported yet!)

Development

  • fullstack: $ yarn dev
  • SSR only: $ yarn dev:front
    • for SPA: $ yarn dev:spa
  • API only: $ yarn dev:api

Build

  • fullstack: $ yarn build
  • SPA only: $ yarn build:spa
  • API only: $ yarn build:api

Run

  • fullstack: $ yarn start
  • SPA only: $ yarn start:spa
  • API only: $ yarn start:api

CAVEATS

  • Nestjs + Quasar with vite is not supported due to esbuild issue.
  • Quasar with vite doesn't support Quasar Auto Routing due to dynamic import issue on rollup.
  • On development, Quasar Web Server and NestJS Web Server will run separately. 3001 for quasar, 3002 for nestjs by default port. but you can access API on quasar directly by webpack's proxy feature.
    • Quasar is using own development web server instance and it doesn't provide way of customize. customizing server is only for production.

License

MIT.