remove hardcoding from deploy config

.env.example

@@ -1,7 +1,9 @@
 DOMAIN=http://modes.local
-POSTGRES_HOST=db
+POSTGRES_HOST=localhost
 POSTGRES_PORT=5432
 POSTGRES_DB=modes
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres
 DATABASE_URL="postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}?schema=public"
+API_HOST=localhost
+API_PORT=3000

apps/api/Dockerfile

@@ -1,12 +1,19 @@
-FROM node:20-slim
+FROM node:20-alpine
 
 RUN corepack enable && corepack prepare pnpm@latest --activate
 
 WORKDIR /app
 
-COPY . .
+COPY package*.json ./
+COPY pnpm-lock.yaml ./
+COPY nx.json ./
+COPY tsconfig*.json ./
+COPY eslint.config.js ./
 
 RUN pnpm install --frozen-lockfile
 
-EXPOSE 3000
+COPY apps/api ./apps/api
+
+EXPOSE 80
+
 CMD ["pnpm", "nx", "run", "api:serve", "--configuration=production"]

apps/api/project.json

@@ -4,50 +4,18 @@
   "sourceRoot": "apps/api/src",
   "projectType": "application",
   "targets": {
-    "build": {
-      "executor": "@nx/esbuild:esbuild",
-      "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
-      "dependsOn": ["prisma-generate"],
-      "options": {
-        "platform": "node",
-        "outputPath": "dist/apps/api",
-        "format": ["cjs"],
-        "bundle": false,
-        "main": "apps/api/src/main.ts",
-        "tsConfig": "apps/api/tsconfig.app.json",
-        "assets": ["apps/api/src/assets"],
-        "generatePackageJson": true,
-        "esbuildOptions": {
-          "sourcemap": true,
-          "outExtension": {
-            ".js": ".js"
-          }
-        }
-      },
-      "configurations": {
-        "development": {},
-        "production": {
-          "esbuildOptions": {
-            "sourcemap": false
-          }
-        }
-      }
-    },
     "serve": {
-      "executor": "@nx/js:node",
+      "executor": "nx:run-commands",
       "defaultConfiguration": "development",
-
-      "dependsOn": ["build"],
+      "dependsOn": ["prisma-generate"],
       "options": {
-        "buildTarget": "api:build"
+        "command": "tsx watch apps/api/src/main.ts",
+        "cwd": "."
       },
       "configurations": {
-        "development": {
-          "buildTarget": "api:build:development"
-        },
+        "development": {},
         "production": {
-          "buildTarget": "api:build:production"
+          "command": "tsx apps/api/src/main.ts"
         }
       }
     },

apps/api/src/main.ts

@@ -1,25 +1,40 @@
 import * as trpcExpress from '@trpc/server/adapters/express';
 import cors from 'cors';
+import 'dotenv/config';
 import express from 'express';
+import { z } from 'zod';
+import { prisma } from './db/client';
 import { appRouter } from './trpc/root';
 import { createContext } from './trpc/router';
 
-const host = process.env.HOST ?? 'localhost';
-const port = process.env.PORT ? Number(process.env.PORT) : 3000;
+const envSchema = z.object({
+  API_HOST: z.string().default('localhost'),
+  API_PORT: z.string().transform((val) => Number(val)),
+  DATABASE_URL: z.string().url(),
+});
+
+const env = envSchema.parse(process.env);
 
 const app = express();
 
 app.use(cors());
 
 app.use(
-  '/api/trpc',
+  '/api',
   trpcExpress.createExpressMiddleware({
     router: appRouter,
     createContext,
   })
 );
 
-app.listen(port, host, () => {
-  // TODO: logging
-  console.log(`[ ready ] http://${host}:${port}`);
-});
+const start = async () => {
+  // Check if the database is connected
+  await prisma.$connect();
+
+  app.listen(env.API_PORT, env.API_HOST, () => {
+    // TODO: logging
+    console.log(`[ ready ] http://${env.API_HOST}:${env.API_PORT}`);
+  });
+};
+
+start();

apps/web/nginx.conf

@@ -5,4 +5,10 @@ server {
     location / {
         try_files $uri $uri/ /index.html;
     }
+
+    location /api/ {
+    proxy_pass http://api:80/;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+}
 }

apps/web/src/app/providers.tsx

@@ -56,7 +56,7 @@ export const Providers = ({ children }: { children: React.ReactNode }) => {
     trpc.createClient({
       links: [
         httpBatchLink({
-          url: 'http://localhost:3000/api/trpc',
+          url: './api',
           headers: () => {
             const token = localStorage.getItem('token');
             return {

apps/web/vite.config.ts

@@ -1,46 +1,54 @@
 /// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig, loadEnv } from 'vite';
 
 // eslint-disable-next-line import/no-default-export
-export default defineConfig({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/web',
-  server: {
-    port: 4200,
-    host: 'localhost',
-  },
-  preview: {
-    port: 4300,
-    host: 'localhost',
-  },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-  build: {
-    outDir: '../../dist/apps/web',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const apiHost = env.API_HOST || 'localhost';
+  const apiPort = env.API_PORT || '3000';
+
+  return {
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/apps/web',
+    server: {
+      port: 4200,
+      host: 'localhost',
+      proxy: {
+        '/api': {
+          target: `http://${apiHost}:${apiPort}`,
+          changeOrigin: true,
+        },
+      },
+    },
+    preview: {
+      port: 4300,
+      host: 'localhost',
+    },
+    plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+    build: {
+      outDir: '../../dist/apps/web',
+      emptyOutDir: true,
+      reportCompressedSize: true,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+    },
+    test: {
+      watch: false,
+      globals: true,
+      environment: 'jsdom',
+      include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+      reporters: ['default'],
+      coverage: {
+        reportsDirectory: '../../coverage/apps/web',
+        provider: 'v8',
+      },
     },
-  },
-  test: {
-    watch: false,
-    globals: true,
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../../coverage/apps/web',
-      provider: 'v8',
+    define: {
+      'process.env.MEDIA_URL': JSON.stringify('https://m.untu.ms'),
     },
-  },
-  define: {
-    'process.env.MEDIA_URL': JSON.stringify('https://m.untu.ms'),
-  },
+  };
 });

compose.yaml

@@ -25,6 +25,22 @@ services:
     networks:
       - caddy
 
+  api:
+    build:
+      context: .
+      dockerfile: apps/api/Dockerfile
+    restart: always
+    environment:
+      - API_PORT=80
+      - API_HOST=0.0.0.0
+    env_file:
+      - .env
+    depends_on:
+      db:
+        condition: service_healthy
+    networks:
+      - caddy
+
   web:
     image: nginx:alpine
     restart: always
@@ -38,26 +54,8 @@ services:
       - api
     labels:
       caddy: ${DOMAIN}
-      caddy.handle: /*
       caddy.reverse_proxy: '{{upstreams 80}}'
 
-  api:
-    build:
-      context: .
-      dockerfile: ./apps/api/Dockerfile
-    restart: always
-    environment:
-      - NODE_ENV=production
-    depends_on:
-      db:
-        condition: service_healthy
-    networks:
-      - caddy
-    labels:
-      caddy: ${DOMAIN}
-      caddy.handle: /api/*
-      caddy.reverse_proxy: '{{upstreams 3000}}'
-
 volumes:
   postgres_data:
 

package.json

@@ -4,6 +4,9 @@
   "license": "MIT",
   "private": true,
   "packageManager": "pnpm@9.15.1",
+  "scripts": {
+    "start": "nx run api:prisma-generate && tsx apps/api/src/main.ts"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -20,6 +23,7 @@
     "@trpc/server": "^10.45.2",
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
     "express": "~4.18.1",
     "jsonwebtoken": "^9.0.2",
     "msw": "^2.7.0",
@@ -86,6 +90,7 @@
     "superjson": "^2.2.2",
     "ts-node": "10.9.1",
     "tslib": "^2.3.0",
+    "tsx": "^4.19.2",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.13.0",
     "vite": "^5.0.0",