https://github.com/jacobgardos/nx-nuxt3-nestjs-starter
https://github.com/jacobgardos/nx-nuxt3-nestjs-starter
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jacobgardos/nx-nuxt3-nestjs-starter
- Owner: JacobGardos
- Created: 2023-10-30T06:37:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-30T10:29:02.000Z (over 1 year ago)
- Last Synced: 2025-01-22T18:36:02.258Z (5 months ago)
- Language: TypeScript
- Size: 207 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🚀 **Nx Monorepo Template** 🚀
A comprehensive starter for those looking to set up a Nx monorepo with a Nuxt 3 frontend and a NestJS backend.
---
## 🌟 **Features** 🌟
- 📦 Nx Workspace
- 🎨 Nuxt 3 Frontend
- 🐱💻 NestJS API
- 🐳 Dockerized Deployment
- 🚫 ESLint - For linting
- 💅 Prettier - For beautiful code
- 🐶 Husky - Pre-commit hooks magic
- 📄 Lint Staged Files
- 🌌 Vuetify 3 - UI component library
- ☁️ Nx Cloud Cache
---
## 📂 **Directory Structure** 📂
- `apps/api` - 🐱💻 NestJS API
- `apps/web` - 🎨 Nuxt 3 Frontend
- `libs/env` - 🌍 Root environment variables shared between apps.
---
## 🛠 **Setup** 🛠
1. Install nvm (or nvm-windows for Windows users) and set your node version to `18.18.2`.
2. 📄 Create a `.env` file in the root of the project and mirror the content from `.env.example`.
3. 🌎 Install nx globally: `npm install -g nx@latest`.
4. 🍎 macOS users: Update file permissions for Husky's hook files: `chmod ug+x .husky/*` Only needs to be done once.
5. 📥 Run `npm install` from the project root.
6. ☁️ Setup nx cloud cache (optional but recommended): `npx nx connect` in the project root.
---
## 💼 **VSCode Setup** 💼
1. Install the recommended extensions for VSCode.
2. 🌐 Enable [Takeover Mode For Volar Extension](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode).
---
## 🛠 **Development** 🛠
1. Run `nx serve api` - Starts the API server.
2. Run `nx dev web` - Ignites the web server.
---
## 📌 **Pre-Commit Hooks** 📌
Committing code? Husky's got your back! The pre-commit hook in `.husky/pre-commit` will be run by Husky. This triggers lint-staged to ensure linting and formatting on all staged files with Prettier and ESLint. If there's a hiccup, the commit will pause, allowing you to make amends before proceeding.
---
## 🚢 **Deployment (Docker)** 🚢
1. Ensure the Docker daemon is active.
2. Deploy using: `nx run deploy`
---
## 📊 **Project Graph** 📊
Curious about the project's interdependencies? Use `nx graph` and head to the graph website. Click on "Show all projects" to unveil the dependency magic.
---
## 📚 **Importing Libs** 📚
A demo library (is-even) has been included to illustrate how to import a shared library into your Nuxt / NestJS apps.
Inside of `apps/web/pages/index.vue` and `apps/api/src/main.ts` you will see the following import:
```ts
import { isEven } from '@org/is-even';
```
If your editor is not recognizing this import in your nuxt 3 project, you must ensure the nuxt server is running via `nx dev web` and that a `.nuxt` folder was generated in the `apps/web` folder.
If your editor is still not recognizing the import, try restarting your editor via `cmd + shift + p` and typing `Volar: Restart Vue Server`.
For any additional libs you generate, you must run the dev server at least once for the `.nuxt` folder to be generated and for your editor to recognize the import paths for that lib inside of your nuxt app.
The Nest app does not require a dev server to be running for the import paths to be recognized.
Both apps will pickup the changes to the lib and hot reload accordingly.
---
Happy Coding! 🎉