Create a test backend server with ExpressJs

software/backend/routes/routes.ts

@@ -0,0 +1,11 @@
+import express, { Request, Response, NextFunction } from 'express'
+
+export const routes = app => {
+  var router = express.Router()
+
+  router.get("/", (req: Request, res: Response, next: NextFunction) => {
+    res.send("Hello World from the backend!")
+  })
+
+  app.use("/api/", router)
+}

software/backend/server.ts

@@ -0,0 +1,21 @@
+import express from 'express'
+import cors from 'cors'
+import bodyParser from 'body-parser'
+import { routes } from './routes/routes'
+
+const app = express()
+const port = 3000
+
+// Same origin access
+app.use(cors())
+
+// Process JSON parameter
+app.use(bodyParser.json())
+
+// Use the app routes
+routes(app)
+
+// Start server
+app.listen(port, () => {
+  console.log(`Server is running and listening to port ${port}`)
+})

software/package.json

@@ -1,22 +1,37 @@
 {
-  "name": "software",
+  "name": "hackmycart",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "dev-server": "concurrently \"nodemon\" \"wait-on http://localhost:3000/api/ && vite\""
+  },
+  "nodemonConfig": {
+    "watch": [
+      "backend"
+    ],
+    "exec": "tsc && node ./build/dist/server.js",
+    "ext": "ts, js, json"
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "@types/node": "^22.5.2",
-    "typescript": "^5.5.4",
+    "axios": "^1.7.7",
+    "body-parser": "^1.20.2",
+    "concurrently": "^8.2.2",
+    "cors": "^2.8.5",
+    "express": "^4.19.2",
     "vue": "^3.4.29",
-    "vuetify": "^3.7.1"
+    "vuetify": "^3.7.1",
+    "wait-on": "^8.0.0"
   },
   "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.5.2",
     "@vitejs/plugin-vue": "^5.0.5",
+    "nodemon": "^3.1.4",
     "vite": "^5.3.1"
   }
 }

software/src/App.vue

@@ -1,7 +1,16 @@
 <script setup>
 import { ref } from 'vue';
+import axios from 'axios';
 
 const showDrawer = ref(true)
+const testResponse = ref("")
+
+
+axios.get('http://127.0.0.1:3000/api')
+  .then(function (response) {
+    console.log(response)
+    testResponse.value = response.data
+  })
 </script>
 
 <template>
@@ -17,6 +26,7 @@ const showDrawer = ref(true)
     </v-navigation-drawer>
 
     <v-main>
+      {{ testResponse }}
       <!-- todo -->
     </v-main>
   </v-app>

software/tsconfig.json

@@ -10,5 +10,8 @@
       "@/*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist"],
+  "include": [
+    "backend/**/*.ts",
+  ]
 }