Merge pull request #8 from danangekal/feature/update-tech-stacks

feat: update tech stack latest (node, pnpm, react, next, etc)

Author: danangekal

.dockerignore

@@ -3,6 +3,7 @@ node_modules
 
 # next.js
 .next
+out
 
 # vercel
 .vercel
@@ -15,14 +16,27 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
-# docker file
+# docker files
 Dockerfile
 docker-compose.yml
 kubernetes-deployment.yml
+
+# git
+.git
+.gitignore
+
+# IDE
+.vscode
+.idea
+
+# testing
+coverage
+
+# docs
+README.md
+CLAUDE.md

.eslintrc.json

@@ -1,62 +1,85 @@
-# This is a basic workflow to help you get started with Actions
+name: CI/CD Pipeline
 
-name: CI to Docker Hub
-
-# Controls when the action will run.
 on:
-  # Triggers the workflow on push or pull request events but only for the main branch
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
-
-  # Allows you to run this workflow manually from the Actions tab
+    branches: [main]
   workflow_dispatch:
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
+  lint-and-test:
     runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Biome checks
+        run: pnpm lint
 
-    # Steps represent a sequence of tasks that will be executed as part of the job
+      - name: Type check
+        run: pnpm type-check
+
+      - name: Run tests
+        run: pnpm test
+
+  build:
+    runs-on: ubuntu-latest
+    needs: lint-and-test
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - name: Check Out Repo
-        uses: actions/checkout@v2.3.4
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
 
-      # Set up cache for the builder
-      - name: Cache Docker layers
-        uses: actions/cache@v2.1.4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          path: /tmp/.buildx-cache
-          key: ${{ runner.os }}-buildx-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-buildx-
-
-      # Login to docker
-      - name:  Docker Login
-        uses: docker/login-action@v1.8.0
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build application
+        run: pnpm build
+
+  docker:
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_HUB_USERNAME }}
           password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
 
-      # Set up docker buildx
-      - name: Docker Setup Buildx
-        uses: docker/setup-buildx-action@v1.1.1
-
-      # Build and push docker images
-      - name: Build and push Docker images
-        uses: docker/build-push-action@v2.3.0
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
         with:
-          context: ./
+          context: .
           file: ./Dockerfile
-          builder: ${{ steps.buildx.outputs.name }}
           push: true
-          tags:  danangekal/next-typescript-pwa-starter:latest
-          cache-from: type=local,src=/tmp/.buildx-cache
-          cache-to: type=local,dest=/tmp/.buildx-cache
-
-      - name: Image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}
+          tags: danangekal/next-typescript-pwa-starter:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/main.yml

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged
+pnpm lint-staged

.husky/pre-commit

@@ -1,7 +1,3 @@
 {
-  "*.{css,scss,json,md,html}": "prettier --ignore-path .gitignore --write",
-  "*.{js,ts,tsx}": [
-    "prettier --ignore-path .gitignore --write",
-    "eslint --ignore-path .gitignore --quiet --fix"
-  ]
+  "*": "biome check --no-errors-on-unmatched --files-ignore-unknown=true"
 }

.husky/prepare-commit-msg

@@ -0,0 +1,100 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Next.js 15 + React 19 + TypeScript + PWA starter template with strict TypeScript configuration and Biome for code quality.
+
+**Key Technologies:**
+- Next.js 15.5.4 (Pages Router) with Turbopack
+- React 19.2.0
+- TypeScript 5.7 with strict mode enabled
+- Serwist (successor to next-pwa) for Progressive Web App functionality
+- Biome for linting and formatting
+- pnpm for package management
+
+## Common Commands
+
+### Development
+```bash
+pnpm dev              # Start development server with Turbopack (PWA disabled in dev)
+pnpm type-check       # Run TypeScript type checking without emitting files
+pnpm type-check:watch # Run TypeScript type checking in watch mode
+pnpm lint             # Run Biome lint checks on the codebase
+pnpm format           # Format all code with Biome
+pnpm check            # Run Biome lint and format (auto-fix) on the codebase
+pnpm telemetry        # Check Next.js telemetry status
+```
+
+### Build & Production
+```bash
+pnpm build   # Build production bundle
+pnpm start   # Start production server (requires build first)
+```
+
+### Docker
+```bash
+docker build -t next-typescript-pwa-starter .
+docker run --rm -it -p 3000:3000 next-typescript-pwa-starter
+docker-compose up
+```
+
+## Architecture
+
+### Directory Structure
+- `pages/` - Next.js Pages Router
+  - `_app.tsx` - Custom App component
+  - `_document.tsx` - Custom Document component
+  - `api/` - API routes
+  - `index.tsx` - Home page
+- `components/` - React components (e.g., nav.tsx)
+- `styles/` - CSS/styling files
+- `public/` - Static assets and PWA manifest
+- `sw.js` - Service worker source file
+
+### PWA Configuration
+PWA functionality is configured using **Serwist** (next-pwa successor):
+- Configuration in `next.config.js` using `@serwist/next`
+- Service worker source: `sw.js` (root) → builds to `public/sw.js`
+- **Disabled** in development mode (only works in production)
+- Manifest file: `public/manifest.json`
+- PWA meta tags and manifest link in `pages/_document.tsx`
+- Icons located in `public/icons/`
+
+### TypeScript Configuration
+Strict TypeScript settings enforced:
+- `strict: true` with all strict flags enabled
+- `noUnusedLocals` and `noUnusedParameters` enabled
+- Path alias `@/*` maps to project root
+- Target: ES5, Module: ESNext
+
+### Code Quality with Biome
+Pre-commit hooks automatically run via Husky + lint-staged:
+- Configuration in `biome.json` and `.lintstagedrc.json`
+- Husky hook in `.husky/pre-commit` runs `pnpm lint-staged`
+- lint-staged runs Biome checks on staged files only
+
+Biome rules of note:
+- `noConsoleLog: error` - Console.log statements are errors
+- `noUnusedVariables: error` - Unused variables are errors
+- `noExplicitAny: warn` - Explicit any types trigger warnings
+- Auto-organizes imports
+
+### CI/CD with GitHub Actions
+GitHub Actions workflow (`.github/workflows/main.yml`) runs on push/PR:
+1. **lint-and-test** job: Runs Biome checks, type checking, and tests
+2. **build** job: Builds the Next.js application
+3. **docker** job: Builds and pushes Docker image (main branch only)
+
+## Node & Package Manager Requirements
+- Node >= 22.0.0
+- pnpm >= 9.0.0 (packageManager: pnpm@9.15.3)
+
+## Important Notes
+- This project uses the **Pages Router** (Next.js 15), not the App Router
+- **Turbopack** is enabled by default for faster development builds (`pnpm dev --turbopack`)
+- PWA features only work in production builds (Serwist disabled in dev)
+- No test framework is configured yet (test script is a placeholder)
+- Console.log statements will fail Biome checks - remove before committing
+- Uses Serwist instead of next-pwa for better Next.js 15 compatibility

.lintstagedrc.json

@@ -1,26 +1,60 @@
-# Set image from base on offical node lts alpine
-ARG VERSION=lts-alpine
-FROM node:$VERSION
+# Use Node.js 22 Alpine as base image
+FROM node:22-alpine AS base
 
-# Set label maintainer, version & description
-LABEL maintainer="danangekal@gmail.com"
-LABEL version="0.1.0"
-LABEL description="Unofficial Next.js + Typescript + PWA starter with a latest package"
+# Install pnpm
+RUN corepack enable && corepack prepare pnpm@10.0.0 --activate
 
-# Set working directory
+# Dependencies stage
+FROM base AS deps
 WORKDIR /app
 
-# Copy all files
-COPY . .
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
 
 # Install dependencies
-RUN yarn install --frozen-lockfile
+RUN pnpm install --frozen-lockfile
+
+# Builder stage
+FROM base AS builder
+WORKDIR /app
 
-# Build app
-RUN yarn build
+# Copy dependencies and source
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Build application
+RUN pnpm build
+
+# Runner stage
+FROM base AS runner
+WORKDIR /app
 
-# Expose the listening port
+# Set labels
+LABEL maintainer="danangekal@gmail.com"
+LABEL version="0.1.0"
+LABEL description="Next.js 15 + React 19 + TypeScript + PWA starter with Biome and pnpm"
+
+# Set production environment
+ENV NODE_ENV=production
+
+# Create non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy built application
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Switch to non-root user
+USER nextjs
+
+# Expose port
 EXPOSE 3000
 
-# Run yarb start script when container starts
-CMD yarn start
+# Set environment variables
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# Start application
+CMD ["node", "server.js"]