Add storage configuration and enhance file handling in API and web applications: Updated .env.example files to include storage settings, refactored ActiveUserDto to utilize dynamic storage URLs, and improved file service methods for better error handling and stability. Introduced AppDevtools for enhanced development experience in the web application.

Author: Rykuno

apps/api/.env.example

@@ -18,6 +18,7 @@ MAIL_DOMAIN=example.com
 
 # storage
 STORAGE_URL=http://localhost:9000
+STORAGE_BUCKET_NAME=public
 STORAGE_REGION=us-east-1
 STORAGE_ACCESS_KEY=admin
 STORAGE_SECRET_KEY=admin

apps/api/src/auth/dtos/active-user.dto.ts

@@ -1,13 +1,19 @@
 import { User } from 'better-auth';
 import { Transform } from 'class-transformer';
 
+const STORAGE_URL =
+  process.env['STORAGE_URL']?.replace(/\/+$/, '') ?? 'http://localhost:9000';
+const STORAGE_BUCKET = process.env['STORAGE_BUCKET_NAME'] ?? 'public';
+
 export class ActiveUserDto implements User {
   id!: string;
   name!: string;
   emailVerified!: boolean;
   email!: string;
   createdAt!: Date;
   updatedAt!: Date;
-  @Transform(({ value }) => (value ? `http://localhost:9000/dev/${value}` : null))
+  @Transform(({ value }) =>
+    value ? `${STORAGE_URL}/${STORAGE_BUCKET}/${value}` : null,
+  )
   image?: string | null;
 }

apps/api/src/common/config/storage.config.ts

@@ -15,7 +15,8 @@ export class StorageConfig {
 
   @IsString()
   @IsNotEmpty()
-  bucketName = 'public';
+  @Value('STORAGE_BUCKET_NAME', { default: 'public' })
+  bucketName!: string;
 
   @IsString()
   @IsNotEmpty()

apps/api/src/storage/files.service.ts

@@ -1,66 +1,87 @@
-import { Injectable, NotFoundException } from '@nestjs/common';
-import { S3Service } from './s3.service';
-import { createId } from '@paralleldrive/cuid2';
-import { DrizzleTransactionClient } from 'src/databases/drizzle.provider';
-import { files } from 'src/databases/drizzle.schema';
-import { takeFirstOrThrow } from 'src/databases/drizzle.utils';
-import { eq } from 'drizzle-orm';
-import { StorageConfig } from 'src/common/config/storage.config';
-import { TransactionHost } from '@nestjs-cls/transactional';
+import { Injectable, NotFoundException } from "@nestjs/common";
+import { S3Service } from "./s3.service";
+import { createId } from "@paralleldrive/cuid2";
+import { DrizzleTransactionClient } from "src/databases/drizzle.provider";
+import { files } from "src/databases/drizzle.schema";
+import { takeFirstOrThrow } from "src/databases/drizzle.utils";
+import { eq } from "drizzle-orm";
+import { StorageConfig } from "src/common/config/storage.config";
+import { TransactionHost, Transactional } from "@nestjs-cls/transactional";
 
 @Injectable()
 export class FilesService {
   constructor(
     private readonly s3Service: S3Service,
     private readonly txHost: TransactionHost<DrizzleTransactionClient>,
-    private readonly storageConfig: StorageConfig,
+    private readonly storageConfig: StorageConfig
   ) {}
 
+  @Transactional()
   async create(file: Express.Multer.File) {
-    const fileRecord = await this.txHost.tx
-      .insert(files)
-      .values({
-        name: file.originalname,
-        mimeType: file.mimetype,
-        sizeBytes: file.size,
-        storageKey: createId(),
-      })
-      .returning()
-      .then(takeFirstOrThrow);
+    const storageKey = createId();
+    const test = "test";
 
     await this.s3Service.putObject({
       bucketName: this.storageConfig.bucketName,
-      key: fileRecord.storageKey,
-      file: file.buffer,
+      key: storageKey,
+      file: file.buffer
     });
 
-    return fileRecord;
+    try {
+      return await this.txHost.tx
+        .insert(files)
+        .values({
+          name: file.originalname,
+          mimeType: file.mimetype,
+          sizeBytes: file.size,
+          storageKey
+        })
+        .returning()
+        .then(takeFirstOrThrow);
+    } catch (error) {
+      // Compensate uploaded object if the DB write fails.
+      await this.s3Service.deleteObject({
+        bucketName: this.storageConfig.bucketName,
+        key: storageKey
+      });
+      throw error;
+    }
   }
 
+  @Transactional()
   async update(key: string, file: Express.Multer.File) {
     const fileRecord = await this.txHost.tx.query.files.findFirst({
       where: {
-        storageKey: key,
-      },
+        storageKey: key
+      }
     });
-    if (!fileRecord) throw new NotFoundException('File not found');
+    if (!fileRecord) throw new NotFoundException("File not found");
 
-    // Delete old file record and S3 object
-    await this.txHost.tx.delete(files).where(eq(files.storageKey, key));
-    await this.s3Service.deleteObject({
+    // Keep the storage key stable and replace object contents/metadata in-place.
+    await this.s3Service.putObject({
       bucketName: this.storageConfig.bucketName,
       key,
+      file: file.buffer
     });
 
-    // Create new file record and upload to S3
-    return this.create(file);
+    return this.txHost.tx
+      .update(files)
+      .set({
+        name: file.originalname,
+        mimeType: file.mimetype,
+        sizeBytes: file.size
+      })
+      .where(eq(files.storageKey, key))
+      .returning()
+      .then(takeFirstOrThrow);
   }
 
+  @Transactional()
   async delete(key: string) {
-    await this.txHost.tx.delete(files).where(eq(files.storageKey, key));
     await this.s3Service.deleteObject({
       bucketName: this.storageConfig.bucketName,
-      key,
+      key
     });
+    await this.txHost.tx.delete(files).where(eq(files.storageKey, key));
   }
 }

apps/api/src/utils/openapi.ts

@@ -1,73 +1,65 @@
-// @ts-nocheck
-import { OpenAPIObject } from '@nestjs/swagger';
-import chalk from 'chalk';
-import * as fsSync from 'node:fs';
-import * as fs from 'node:fs/promises';
-import openapiTS, { astToString, type OpenAPI3 } from 'openapi-typescript';
-import * as ts from 'typescript';
-
-const DEFAULT_OUTPUT_DIR = './generated';
-const DEFAULT_FILENAME = 'openapi.d.ts';
-
-interface OpenApiSpecBase {
-  fileName?: string;
-}
+import { OpenAPIObject } from "@nestjs/swagger";
+import chalk from "chalk";
+import * as fsSync from "node:fs";
+import * as fs from "node:fs/promises";
+import openapiTS from "openapi-typescript";
+import * as ts from "typescript";
 
-interface OpenApiSpecApiOpenAPI3 extends OpenApiSpecBase {
-  document: OpenAPI3;
-}
+const DEFAULT_OUTPUT_DIR = "./generated";
+const DEFAULT_FILENAME = "openapi.d.ts";
 
-interface OpenApiSpecApiObject extends OpenApiSpecBase {
+interface OpenApiSpec {
   document: OpenAPIObject;
+  fileName?: string;
 }
 
-type OpenApiSpec = OpenApiSpecBase &
-  (OpenApiSpecApiOpenAPI3 | OpenApiSpecApiObject);
+type TransformableSchema = {
+  format?: string;
+  nullable?: boolean;
+};
 
 export async function generateOpenApiSpecs(
-  specs: OpenApiSpec[],
+  specs: OpenApiSpec[]
 ): Promise<void> {
   if (specs.length === 0) {
-    console.log(chalk.yellow('⚠️  No OpenAPI specs provided'));
+    console.log(chalk.yellow("⚠️  No OpenAPI specs provided"));
     return;
   }
 
   console.log(chalk.blue(`🔄 Generating ${specs.length} OpenAPI spec(s)...`));
 
   // Generate all specs in parallel
   const results = await Promise.allSettled(
-    specs.map((spec) => generateSingleSpec(spec)),
+    specs.map(spec => generateSingleSpec(spec))
   );
 
   // Process results
   const successful = results.filter(
-    (result) => result.status === 'fulfilled',
-  ).length;
-  const failed = results.filter(
-    (result) => result.status === 'rejected',
+    result => result.status === "fulfilled"
   ).length;
+  const failed = results.filter(result => result.status === "rejected").length;
 
   if (failed > 0) {
     console.log(chalk.yellow(`⚠️  ${failed} spec(s) failed to generate`));
     results.forEach((result, index) => {
-      if (result.status === 'rejected') {
+      if (result.status === "rejected") {
         console.error(
           chalk.red(
-            `❌ Spec ${index + 1} (${specs[index]?.fileName || DEFAULT_FILENAME}): ${result.reason}`,
-          ),
+            `❌ Spec ${index + 1} (${specs[index]?.fileName || DEFAULT_FILENAME}): ${result.reason}`
+          )
         );
       }
     });
   }
 
   if (successful > 0) {
     console.log(
-      chalk.green(`✅ ${successful} OpenAPI spec(s) generated successfully`),
+      chalk.green(`✅ ${successful} OpenAPI spec(s) generated successfully`)
     );
   }
 
   if (failed === specs.length) {
-    throw new Error('All OpenAPI specs failed to generate');
+    throw new Error("All OpenAPI specs failed to generate");
   }
 }
 
@@ -76,23 +68,33 @@ async function generateSingleSpec(spec: OpenApiSpec): Promise<void> {
   const filePath = `${DEFAULT_OUTPUT_DIR}/${fileName}`;
 
   const BLOB = ts.factory.createTypeReferenceNode(
-    ts.factory.createIdentifier('Blob'),
+    ts.factory.createIdentifier("Blob")
   ); // `Blob`
   const NULL = ts.factory.createLiteralTypeNode(ts.factory.createNull()); // `null`
 
   try {
     // Generate new OpenAPI types content
-    const ast = await openapiTS(spec.document as OpenAPI3, {
-      transform(schemaObject) {
-        if (schemaObject.format === 'binary') {
-          return schemaObject.nullable
-            ? ts.factory.createUnionTypeNode([BLOB, NULL])
-            : BLOB;
+    const ast = await openapiTS(
+      spec.document as Parameters<typeof openapiTS>[0],
+      {
+        transform(schemaObject: TransformableSchema) {
+          if (schemaObject.format === "binary") {
+            return schemaObject.nullable
+              ? ts.factory.createUnionTypeNode([BLOB, NULL])
+              : BLOB;
+          }
+          return undefined; // Use default transformation for other schema objects
         }
-        return undefined; // Use default transformation for other schema objects
-      },
-    });
-    const newContents = astToString(ast) as string;
+      }
+    );
+    const sourceFile = ts.factory.createSourceFile(
+      ast as ts.Statement[],
+      ts.factory.createToken(ts.SyntaxKind.EndOfFileToken),
+      ts.NodeFlags.None
+    );
+    const newContents = ts
+      .createPrinter({ newLine: ts.NewLineKind.LineFeed })
+      .printFile(sourceFile);
 
     // Check if content has changed
     const hasChanged = await hasContentChanged(filePath, newContents);
@@ -105,21 +107,21 @@ async function generateSingleSpec(spec: OpenApiSpec): Promise<void> {
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : String(error);
     throw new Error(`Failed to generate ${fileName}: ${errorMessage}`, {
-      cause: error,
+      cause: error
     });
   }
 }
 
 async function hasContentChanged(
   filePath: string,
-  newContents: string,
+  newContents: string
 ): Promise<boolean> {
   if (!fsSync.existsSync(filePath)) {
     return true;
   }
 
   try {
-    const existingContents = await fs.readFile(filePath, 'utf8');
+    const existingContents = await fs.readFile(filePath, "utf8");
     return existingContents !== newContents;
   } catch {
     return true;
@@ -128,13 +130,13 @@ async function hasContentChanged(
 
 async function writeOpenApiFile(
   filePath: string,
-  contents: string,
+  contents: string
 ): Promise<void> {
   // Ensure directory exists
   await fs.mkdir(DEFAULT_OUTPUT_DIR, { recursive: true });
 
   // Write file
-  await fs.writeFile(filePath, contents, 'utf8');
+  await fs.writeFile(filePath, contents, "utf8");
 }
 
 // Convenience function for single spec (backward compatibility)

apps/web/.env.example

@@ -1,2 +1,3 @@
 VITE_API_URL=http://localhost:8000
 VITE_WEB_URL=http://localhost:3000
+VITE_STORAGE_URL=http://localhost:9001

apps/web/src/components/otp-form.tsx

@@ -22,7 +22,9 @@ export function OTPForm({ email, ...props }: OTPFormProps) {
   const verifyOtpMutation = useMutation({
     mutationFn: async (otp: string) => api.auth.signInWithOtp(email, otp),
     onSuccess: async () => {
-      await queryClient.invalidateQueries();
+      await queryClient.invalidateQueries({
+        queryKey: [...api.auth.queryKeys, 'session'],
+      });
       await router.invalidate();
       await navigate({ to: '/' });
     },

apps/web/src/lib/api-client.ts

@@ -8,6 +8,14 @@ type FetchImpl = (input: RequestInfo | URL, init?: RequestInit) => Promise<Respo
 
 let browserClient: ApiClient | undefined;
 
+function getRequiredApiUrl() {
+  const apiUrl = import.meta.env.VITE_API_URL;
+  if (!apiUrl) {
+    throw new Error('VITE_API_URL is required');
+  }
+  return apiUrl;
+}
+
 function toHeaderObject(headers?: HeadersInit) {
   if (!headers) return undefined;
   if (headers instanceof Headers) return Object.fromEntries(headers.entries());
@@ -47,7 +55,7 @@ const clientFetch: FetchImpl = (input, init) =>
 
 function initApiClient(opts?: { headers?: HeadersInit; fetch?: FetchImpl }) {
   const client = createClient<paths>({
-    baseUrl: String(import.meta.env.VITE_API_URL),
+    baseUrl: getRequiredApiUrl(),
     credentials: 'include',
     headers: opts?.headers,
     fetch: opts?.fetch,