feat(bolt-vite-react-ts): add @/ path alias for src (#116)

* feat(bolt-vite-react-ts): add @/ path alias for src

Configure a depth-invariant @/* -> src/* alias in both tsconfig.app.json
(paths + baseUrl) and vite.config.ts (resolve.alias) so cross-module
imports can be written @/services/foo instead of ../../services/foo.
Removes the miscounted-relative-depth import errors that agents hit on
deep folder layouts.

* feat(bolt-vite-react-ts): steer imports to the @/ alias via template prompt

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: kj <kj@stackblitz.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

bolt-vite-react-ts/.bolt/prompt

@@ -3,3 +3,5 @@ For all designs I ask you to make, have them be beautiful, not cookie cutter. Ma
 By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
 
 Use icons from lucide-react for logos.
+
+Import project modules with the `@/` path alias (`@/components/Foo`, maps to `src/`) instead of deep relative paths like `../../components/Foo`.

bolt-vite-react-ts/tsconfig.app.json

@@ -14,6 +14,12 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* Path alias — depth-invariant imports for src (@/foo === src/foo from any file) */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": false,

bolt-vite-react-ts/vite.config.ts

@@ -1,9 +1,15 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
   optimizeDeps: {
     exclude: ['lucide-react'],
   },