feat: handle dockerize core app

apps/core/Dockerfile

@@ -0,0 +1,53 @@
+FROM node:18-alpine AS base
+
+# This Dockerfile is copy-pasted into our main docs at /docs/handbook/deploying-with-docker.
+# Make sure you update both files!
+
+FROM base AS builder
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk update
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+RUN yarn global add turbo
+COPY . .
+RUN npm run prepare:ci
+RUN turbo prune core --docker
+
+# Add lockfile and package.json's of isolated subworkspace
+FROM base AS installer
+RUN apk update
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# First install the dependencies (as they change less often)
+COPY --from=builder /app/out/json/ .
+RUN yarn install
+
+# Build the project
+COPY --from=builder /app/out/full/ .
+
+# Uncomment and use build args to enable remote caching
+# ARG TURBO_TEAM
+# ENV TURBO_TEAM=$TURBO_TEAM
+
+# ARG TURBO_TOKEN
+# ENV TURBO_TOKEN=$TURBO_TOKEN
+
+RUN yarn turbo build
+
+FROM base AS runner
+WORKDIR /app
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=installer --chown=nextjs:nodejs /app/apps/core/.next/standalone ./
+COPY --from=installer --chown=nextjs:nodejs /app/apps/core/.next/static ./apps/core/.next/static
+COPY --from=installer --chown=nextjs:nodejs /app/apps/core/public ./apps/core/public
+
+CMD node apps/core/server.js

apps/core/next.config.mjs

@@ -8,6 +8,7 @@ const nextConfig = {
   images: {
     domains: ["images.unsplash.com"],
   },
+  output: "standalone",
 };
 
 export default nextConfig;

docker-compose.yml

@@ -1,8 +1,14 @@
-version: '3.8'
 services:
-  core-app:
+  core:
+    container_name: web
     build:
       context: .
-      dockerfile: Dockerfile
+      dockerfile: ./apps/core/Dockerfile
+    restart: always
     ports:
-      - "3000:3000"
+      - 3000:3000
+# Define a network, which allows containers to communicate
+# with each other, by using their container name as a hostname
+# networks:
+#   app_network:
+#     external: true

package.json

@@ -13,7 +13,8 @@
     "ui:add": "bun --filter @repo/ui ui:add",
     "gen:api": "turbo gen api",
     "prepare": "husky",
-    "deploy": "git pull origin main && git push vercel main", 
+    "prepare:ci": "node ./scripts/prepare.js",
+    "deploy": "git pull origin main && git push vercel main",
     "rebase:main": "git fetch origin main && git rebase main"
   },
   "devDependencies": {

packages/apis/package.json

@@ -12,8 +12,8 @@
     "react": "^18"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@anatine/zod-mock": "^3.13.4",
+    "@faker-js/faker": "^9.5.1",
     "@repo/ui": "*",
     "@tanstack/react-query": "^5.62.2",
     "@tanstack/react-query-devtools": "^5.62.2",

packages/design-system/package.json

@@ -2,14 +2,15 @@
   "name": "@repo/design-system",
   "version": "1.0.0",
   "scripts": {
-    "build": "bun run src/scripts/build.ts"
+    "build": "ts-node src/scripts/build.ts"
   },
   "exports": {
-    "./styles": "./src/styles/main.scss", 
+    "./styles": "./src/styles/main.scss",
     "./tailwind": "./src/tailwind/config.ts"
   },
   "devDependencies": {
     "@repo/typescript-config": "*",
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.3.2",
+    "ts-node": "^10.9.2"
   }
 }

packages/design-system/src/scripts/build-palette-style.ts

@@ -1,10 +1,13 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import { hexToHsl } from './utills.js';
+import * as fs from "fs";
+import * as path from "path";
+import { hexToHsl } from "./utills";
 
 // Paths for input and output files
-const inputFilePath = path.join(__dirname, '../tokens/token_palette_primitive.json');
-const outputFilePath = path.join(__dirname, '../styles/base/_palette.scss');
+const inputFilePath = path.join(
+  __dirname,
+  "../tokens/token_palette_primitive.json",
+);
+const outputFilePath = path.join(__dirname, "../styles/base/_palette.scss");
 
 // Generate SCSS content with groups separated by an empty line
 const generateScssContent = (tokens: Record<string, any>): string => {
@@ -14,17 +17,17 @@ const generateScssContent = (tokens: Record<string, any>): string => {
     const groupTokens = tokens[group];
     for (const key in groupTokens) {
       const value = groupTokens[key];
-      if (value.$type === 'color') {
+      if (value.$type === "color") {
         lines.push(`  --${group}-${key}: ${hexToHsl(value.$value)};`);
       }
     }
-    lines.push(''); // Add an empty line after each group
+    lines.push(""); // Add an empty line after each group
   }
 
   return `
 @layer base {
   :root {
-${lines.join('\n')}
+${lines.join("\n")}
   }
 }
 `.trim();
@@ -33,7 +36,7 @@ ${lines.join('\n')}
 // Function to build and write SCSS content
 export const buildPaletteScss = (): void => {
   // Read and parse the JSON file
-  const rawData = fs.readFileSync(inputFilePath, 'utf-8');
+  const rawData = fs.readFileSync(inputFilePath, "utf-8");
   const tokens = JSON.parse(rawData);
 
   // Generate SCSS content
@@ -46,7 +49,7 @@ export const buildPaletteScss = (): void => {
   }
 
   // Write the SCSS content to the file
-  fs.writeFileSync(outputFilePath, scssContent, 'utf-8');
+  fs.writeFileSync(outputFilePath, scssContent, "utf-8");
   console.log(`SCSS file created at: ${outputFilePath}`);
 };
 

packages/design-system/src/scripts/build.ts

@@ -1,9 +1,9 @@
-import { buildColorsTailwind } from "./build-colors-tailwind.js";
-import { buildColorsScss } from "./build-colors-style.js";
-import { buildPaletteTailwind } from "./build-palette-tailwind.js";
-import { buildPaletteScss } from "./build-palette-style.js";
-import { buildTailwindConfig } from "./build-config-tailwind.js";
-import { buildMainScss } from "./build-main-style.js";
+import { buildColorsTailwind } from "./build-colors-tailwind";
+import { buildColorsScss } from "./build-colors-style";
+import { buildPaletteTailwind } from "./build-palette-tailwind";
+import { buildPaletteScss } from "./build-palette-style";
+import { buildTailwindConfig } from "./build-config-tailwind";
+import { buildMainScss } from "./build-main-style";
 
 const main = () => {
   try {

scripts/prepare.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const path = require("path");
+
+console.log("🚀 Preparing project...");
+
+const packageJsonPath = "./package.json";
+const newPackageManager = "[email protected]";
+
+try {
+  // Read package.json
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+
+  // Ensure packageManager is only set to Yarn
+  packageJson.packageManager = newPackageManager;
+
+  // Write back to package.json
+  fs.writeFileSync(
+    packageJsonPath,
+    JSON.stringify(packageJson, null, 2) + "\n",
+  );
+
+  console.log(
+    `✅ Successfully updated packageManager to "${newPackageManager}" in package.json`,
+  );
+} catch (error) {
+  console.error("❌ Error updating package.json:", error);
+  process.exit(1);
+}