/starter-fullstack

🔥Hono RPC, Nuxt, SST Ion, Kinde Auth, Tanstack Query, Shadcn, Primevue, UnoCSS

Primary LanguageTypeScriptMIT LicenseMIT

starter-fullstack

This is a starter template to kick-start your Nuxt full-stack project

Note: the app comes with a localcert SSL at packages/common/dev for local development, generated with mkcert, you can install mkcert and generate your own certificate and replace it or install the localcert.crt to your trusted CA to remove the untrusted SSL warning

What's inside?

⏩ This template is powered by Turborepo.

😊 Out-of-the-box, this repo is configured for an SSG frontend Nuxt app, and a backend Hono app that will be the main API, to optimize on cost and simplicity.

  • The starter kit is still configured for 100% SSR support,
    Simply change the apps/frontend's build script to nuxt build to enable SSR building

🌩️ Utilizing SST Ion for Infrastructure-as-Code, with powerful Live development.

  • SST is 100% opt-in, by using sst CLI commands yourself, like sst dev,
    simply remove sst dependency and sst.config.ts if you want to use another solution.
  • currently only backend app is configured, which will deploy a Lambda with Function URL enabled

🔐 Comes with starter-kit for Kinde typescript-sdk, see: /apps/backend/api/auth

  • Add your env variables, activate the auth routes, profit$
  • Please note that by default backend comes with a cookies-based session manager, which have great DX, security and does not require an external database (which also means great performance), but as the backend is decoupled with the Nuxt's SSR server, it will not work well with SSR (the session/auth state is not shared).
    So if you use SSR, you could use the official Nuxt Kinde module or implement your own way to manage the session at apps/backend/src/middlewares/session.ts.
    • If you have a good session manager implementation, a PR is greatly appreciated!

Apps and Packages

(Click the hyperlink of each app to see its README detail)

  • frontend: a Nuxt app, configured same as starter-nuxt.
    • By default, /api/* routes is proxied to the backendUrl.
    • The rpcApi plugin will call the /api/* proxy if they're on the same domain (e.g: 127.0.0.1)

      • this mimics a production environment where the static frontend and the backend lives on the same domain at /api, which is the most efficient configuration for Cloudfront + Lambda Function Url

      • If the frontend and backend are on different domains then the backend will be called directly without proxy.
      • This could be configured in frontend's app.config.ts
  • backend: a Hono🔥 app.
  • @local/locales: a shared locales/i18n library powered by unplugin-sheet-i18n.
  • @local/common: a shared library that can contain constants, functions, types.
  • @local/common-vue: a shared library that can contain components, constants, functions, types for vue-based apps.
  • tsconfig: tsconfig.jsons used throughout the monorepo.

Each package/app is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

Build

To build all apps and packages, run the following command:
pnpm run build

Develop

To develop all apps and packages, run the following command:
pnpm run dev

It is recommended to do your local .env setup to .env.local of each app and use git update-index --skip-worktree to ignore the changes from being committed to the repo.

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

npx turbo link

Useful Links

Learn more about the power of Turborepo: