refactor: move next to apps folder with turbo

.bin/01-serve.sh

@@ -16,8 +16,8 @@ echo "MONGO_INITDB_USERNAME      = ${MONGO_INITDB_USERNAME}"
 echo "MONGO_INITDB_PASSWORD      = ${MONGO_INITDB_PASSWORD}"
 
 # Next.js
-echo "NEXT_FRONTEND_URL          = ${NEXT_FRONTEND_URL}"
-echo "NEXT_MONGO_URL             = ${NEXT_MONGO_URL}"
+echo "NEXT_PUBLIC_FRONTEND_URL          = ${NEXT_PUBLIC_FRONTEND_URL}"
+echo "MONGO_URL             = ${MONGO_URL}"
 
 BUILD_VERSION=$(git rev-parse --short HEAD)
 echo "BUILD_VERSION              = ${BUILD_VERSION}"

.bin/02-seed.sh

@@ -7,8 +7,8 @@ set -a
 . .env.local
 set +a
 
-echo "NEXT_FRONTEND_URL = ${NEXT_FRONTEND_URL}"
-echo "NEXT_MONGO_URL    = ${NEXT_MONGO_URL}"
+echo "NEXT_PUBLIC_FRONTEND_URL = ${NEXT_PUBLIC_FRONTEND_URL}"
+echo "MONGO_URL    = ${MONGO_URL}"
 
 cd bootstrap/src
 

.env.example

@@ -8,5 +8,5 @@ MONGO_INITDB_USERNAME="ruleOfThumbDbUser"
 MONGO_INITDB_PASSWORD="ruleOfThumbDbPassword"
 
 ## FRONTEND: NextJS connected to the mongo container
-NEXT_FRONTEND_URL="http://localhost:3000"
-NEXT_MONGO_URL="mongodb://${MONGO_INITDB_USERNAME}:${MONGO_INITDB_PASSWORD}@mongo:27017/${MONGO_INITDB_DATABASE}"
+NEXT_PUBLIC_FRONTEND_URL="http://localhost:3000"
+MONGO_URL="mongodb://${MONGO_INITDB_USERNAME}:${MONGO_INITDB_PASSWORD}@mongo:27017/${MONGO_INITDB_DATABASE}"

.env.local.example

@@ -17,6 +17,6 @@
 ## Then deploy to production using "npm run build" and then "npm start"
 
 ## FRONTEND: NextJS connected to a local/remote mongo instance
-NEXT_FRONTEND_URL="http://localhost:3000"
-NEXT_MONGO_URL="mongodb://ruleOfThumbDbUser:ruleOfThumbDbPassword@localhost:27017/ruleOfThumbDatabase"
+NEXT_PUBLIC_FRONTEND_URL="http://localhost:3000"
+MONGO_URL="mongodb://ruleOfThumbDbUser:ruleOfThumbDbPassword@localhost:27017/ruleOfThumbDatabase"
 

.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+  "root": true,
+  "extends": ["next/core-web-vitals", "turbo"]
 }

.github/workflows/ci.yml

@@ -14,43 +14,81 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
-      - name: Install Dependencies
-        run: npm ci
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Run Lint
-        run: npm run lint
+        run: pnpm lint
 
   test:
     runs-on: ${{ matrix.os }}
     timeout-minutes: 5
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node_version: [14, 16]
+        node_version: [18, 20]
         include:
           - os: macos-latest
-            node_version: 16
+            node_version: 20
           - os: windows-latest
-            node_version: 16
+            node_version: 20
       fail-fast: false
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set node version to ${{ matrix.node_version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node_version }}
 
-      - name: Install
-        run: npm ci
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Test
-        run: npm test
+        run: pnpm test

.github/workflows/playwright.yml

@@ -8,24 +8,43 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: '20.x'
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
 
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpx playwright install --with-deps
 
       - name: Run Playwright tests
-        run: npx playwright test
+        run: pnpm test:e2e
         env:
-          NEXT_FRONTEND_URL: ${{ github.event.deployment_status.target_url }}
+          NEXT_PUBLIC_FRONTEND_URL: ${{ github.event.deployment_status.target_url }}
 
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

.github/workflows/release.yml

@@ -9,13 +9,13 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - run: npx changelogithub
         env:

.gitignore

@@ -25,21 +25,27 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# local env files
-.env*.local
+# Local ENV files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# vercel
+# Vercel
 .vercel
 
+# Turborepo
+.turbo
+
 # typescript
 *.tsbuildinfo
 
 # custom
 .tmp
 .env
 node_modules
-.yarn
 .env.docker
 /test-results/
 /playwright-report/
 /playwright/.cache/
+vitest.config.mts.timestamp*

.hintrc

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "apple-touch-icons": "off",
+    "compat-api/html": [
+      "default",
+      {
+        "ignore": [
+          "meta[name=theme-color]"
+        ]
+      }
+    ]
+  }
+}

.npmrc

@@ -0,0 +1,2 @@
+# save exact version of the package
+save-exact = true

.nvmrc

@@ -0,0 +1 @@
+lts/*

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

README.md

@@ -4,7 +4,7 @@
 
 Rule of Thumb is a full-stack example project built with TypeScript and Next.js, backend with MongoDB and GridFS.
 
-![preview](./public/img/preview.png)
+![preview](./preview.png)
 
 ## Technologies
 
@@ -15,32 +15,32 @@ Rule of Thumb is a full-stack example project built with TypeScript and Next.js,
 Start the server using Docker or lift the server locally. First step install dependencies:
 
 ```bash
-npm ci
+pnpm ci
 ```
 
 ### Docker
 
 ```bash
 cp .env.example env.docker # Edit the variables
 
-npm run serve # Start a Docker container
-npm run seed  # Populate the MongoDB database and load the images to GridFS
-npm run stop  # Stop the Docker containers
+pnpm run serve # Start a Docker container
+pnpm run seed  # Populate the MongoDB database and load the images to GridFS
+pnpm run stop  # Stop the Docker containers
 ```
 
 ### Local/Remote Database
 
 For a MongoDB running either in localhost or remotely (i.e. Mongo Atlas):
 
 ```bash
-cp .env.local.example env.local # Edit the variables
+cp .env.local.example .env.local # Edit the variables
 
 # Development
-npm run dev
+pnpm run dev
 
 # Production
-npm run build
-npm start
+pnpm run build
+pnpm start
 ```
 
 ## Learn More

apps/bootstrap/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@apps/bootstrap",
+  "version": "1.0.0",
+  "dependencies": {
+    "mongodb": "4.9.1"
+  }
+}

bootstrap/src/client.mjs → apps/bootstrap/src/client.mjs

@@ -7,17 +7,17 @@ let client;
 export async function getClient() {
   // Use connect method to connect to the server
   if (!client) {
-    let url = process.env.NEXT_MONGO_URL;
+    let url = process.env.MONGO_URL;
 
     if (!url) {
       throw new Error(
-        'Mongo URL is not defined, use NEXT_MONGO_URL environment variable'
+        'Mongo URL is not defined, use MONGO_URL environment variable'
       );
     }
 
     console.log('starting getClient...', {
       database: process.env.MONGO_INITDB_DATABASE,
-      url: process.env.NEXT_MONGO_URL,
+      url: process.env.MONGO_URL,
     });
 
     client = new MongoClient(url);

bootstrap/src/constants.mjs → apps/bootstrap/src/constants.mjs

@@ -1,7 +1,7 @@
 // @ts-check
 
-import { resolve } from 'path';
-import { fileURLToPath } from 'url';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 // load environment variables from .env file
 

bootstrap/src/seed-db.mjs → apps/bootstrap/src/seed-db.mjs

@@ -1,7 +1,7 @@
 // @ts-check
 
-import { readFileSync } from 'fs';
-import { join } from 'path';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { getClient, getCollection } from './client.mjs';
 import { assetsFolder } from './constants.mjs';