Add path aliases

.eslintrc.cjs

@@ -5,20 +5,25 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
-    "plugin:prettier/recommended", 
-    "plugin:import/recommended",
-    "plugin:import/typescript",
+    'plugin:prettier/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:import-resolver-typescript',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs', 'babel.config.js'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-    'prettier/prettier': "error",
-    'no-console': "error",
-    "no-async-promise-executor": "off",
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'prettier/prettier': 'error',
+    'no-console': 'error',
+    'no-async-promise-executor': 'off',
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: ['packages/*/tsconfig.json'],
+      },
+    },
   },
 }

.gitignore

@@ -4,3 +4,4 @@ data/sqlfiles/*
 .db.env
 dump/
 dump.zip
+

backend/src/routes/user.ts

@@ -1,11 +1,16 @@
 import { Router } from 'express'
 import { models } from '../utils/db'
 import jwt from 'jsonwebtoken'
-import { SECRET, LOGIN_VALID_MS } from '../utils/config'
+import { SECRET, LOGIN_VALID_MS } from '@/utils/config'
 import bcrypt from 'bcrypt'
 
 const router = Router()
 
+export type LoginData = {
+  token: string
+  username: string
+}
+
 router.post('/login', async (req, res) => {
   const { username, password } = req.body
   const result = await models.com_users.findOne({

backend/tsconfig.json

@@ -11,5 +11,11 @@
     "noFallthroughCasesInSwitch": true,
     "esModuleInterop": true,
     "noImplicitAny": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@services/*": ["./src/services/*"],
     }
+  },
+  "include": ["src"],
 }

frontend/package-lock.json

@@ -24,6 +24,7 @@
       },
       "devDependencies": {
         "@types/lodash-es": "^4.17.12",
+        "@types/node": "^20.12.7",
         "@types/react": "^18.2.56",
         "@types/react-dom": "^18.2.19",
         "@typescript-eslint/eslint-plugin": "^7.0.2",
@@ -1876,6 +1877,15 @@
         "@types/lodash": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "20.12.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
+      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -4300,6 +4310,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.12.7",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",

frontend/src/redux/userReducer.ts

@@ -1,12 +1,13 @@
 // Need to use the React-specific entry point to import createApi
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { api } from './api'
+import { api } from '@/redux/api'
+import { LoginData as UserFields } from '@backend/routes/user'
 
 type LoginData = { username: string; password: string }
 
 const userApi = api.injectEndpoints({
   endpoints: builder => ({
-    tryLogin: builder.mutation<{ token: string; username: string }, LoginData>({
+    tryLogin: builder.mutation<UserFields, LoginData>({
       query: ({ username, password }: LoginData) => ({
         url: `/user/login`,
         body: {

frontend/tsconfig.json

@@ -20,6 +20,14 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
+    "baseUrl": ".",
+    "types": ["node"],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@util/*": ["./src/util/*"],
+      "@backend/*": ["../backend/src/*"],
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

frontend/vite.config.ts

@@ -1,12 +1,22 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { fileURLToPath, URL } from 'url'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: [
+      { find: '@', replacement: path.resolve(__dirname, './src/') },
+    { find: '@components', replacement: path.resolve(__dirname, './src/components') },
+    { find: '@util', replacement: path.resolve(__dirname, './src/util') },
+    { find: '@backend', replacement: path.resolve(__dirname, '.,/src/') }
+    ],
+  },
   server: {
     watch: {
       usePolling: true,
-    },
-  },
+    }
+  }
 })