Imports from frontend to backend and vice versa are now restricted.

Author: smack0007

.eslintrc.cjs

@@ -2,21 +2,47 @@
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "prettier"],
+  plugins: ["import", "@typescript-eslint", "prettier"],
   extends: [
     "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier",
   ],
   parserOptions: {
     ecmaVersion: "latest",
   },
-  ignorePatterns: ["dist", "node_modules"],
+  settings: {
+    "import/resolver": {
+      typescript: true,
+      node: true,
+    },
+  },
+  ignorePatterns: ["**/dist/*", "**/node_modules/*"],
   rules: {
     "prettier/prettier": ["error"],
     // Fix annoying CRLF vs LF error.
     "linebreak-style": ["error", process.platform === "win32" ? "windows" : "unix"],
+
+    "import/no-restricted-paths": [
+      "error",
+      {
+        zones: [
+          {
+            target: "apps/backend/",
+            from: "apps/frontend/",
+            message: "Backend should not import from frontend. Use hotel-management-shared instead.",
+          },
+          {
+            target: "apps/frontend/",
+            from: "apps/backend/",
+            message: "Frontend should not import from backend. Use hotel-management-shared instead.",
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {

apps/backend/src/main.ts

@@ -11,10 +11,14 @@ const PORT = 3000;
 const app = express();
 app.use(cors());
 
-const hotels: Hotel[] = [
-  { id: 1, name: "City Centre" },
-  { id: 2, name: "Messe" },
-  { id: 3, name: "Westend" },
+export type BackendHotel = Hotel & {
+  updateCount: number;
+};
+
+const hotels: BackendHotel[] = [
+  { id: 1, name: "City Centre", updateCount: 0 },
+  { id: 2, name: "Messe", updateCount: 0 },
+  { id: 3, name: "Westend", updateCount: 0 },
 ];
 
 app.get("/hotels", (request, response) => {

apps/frontend/src/components/HotelList.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import type { Hotel } from "hotel-management-shared";
+// import type { Hotel } from "hotel-management-shared";
+
+import type { BackendHotel } from "../../../backend/dist/main.js";
 
 const props = defineProps<{
-  hotels: Hotel[];
+  hotels: BackendHotel[];
 }>();
 </script>
 

apps/frontend/src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 
 import App from "./App.vue";
-import router from "./router";
+import router from "./router/index.js";
 
 import "./assets/main.scss";
 

package.json

@@ -25,6 +25,8 @@
     "@typescript-eslint/parser": "5.49.0",
     "eslint": "8.22.0",
     "eslint-config-prettier": "8.6.0",
+    "eslint-import-resolver-typescript": "3.5.3",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "4.2.1",
     "npm-run-all": "4.1.5",
     "prettier": "2.7.1",