Starter Monorepo

Monorepo is amazing!

starter-monorepo

• starter-monorepo
  • Overview
  • What's inside?
    • Apps and Packages
    • Utilities
    • Build
    • Develop
    • Notes
      • import ordering
      • Dev with SSL
    • Remote Caching
  • Useful Links

Overview

This is a base monorepo starter template to kick-start your beautifully organized project, whether its a fullstack project, monorepo of multiple libraries and applications, or even just one API server and its related infrastructure deployment and utilities.

It is recommended to use an AI Agent (Roo Code recommended) to help you setup the monorepo according to your needs, see Utilities

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

🌩️ SST Ion, an Infrastructure-as-Code solution, 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, compatible with v4 structure.
  • By default, the frontend /api/* routes is proxied to the backendUrl.
  • The rpcApi plugin will call the /api/* proxy if they're on the same domain but different ports (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:

• 👌 TypeScript
• 🧐 ESLint + stylistic formatting rules (antfu)
• 📚 A few more goodies like:
  • lint-staged pre-commit hook
  • 🤖 Initialization prompt for AI Agents to modify the monorepo according to your needs.
    • To start, open the chat with your AI Agent, and include the INIT_PROMPT.md file in your prompt.

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

To define local development environment variables of each app, either use git update-index --skip-worktree .env.local and use it directly, or create a copy of or rename .env.local to .env.local.ignored.

• AI Agent will help you creating the .env.local.ignored files if you use the AI initialization prompt.

Notes

import ordering

Imports should not be separated by empty lines, and should be sorted automatically by eslint.

Dev with SSL

The project comes with a localcert SSL at locals/common/dev to enable HTTPS for local development, generated with mkcert, you can install mkcert, generate your own certificate and replace it, or install the localcert.crt to your trusted CA to remove the untrusted SSL warning.

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:

• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage