hmr on port 5173??

Author: aligneddev

src/BikeTracking.AppHost/AppHost.cs

@@ -15,6 +15,17 @@
 
 var webFrontend = builder
     .AddViteApp("frontend", "../BikeTracking.Frontend")
+    .WithEndpoint(
+        "http",
+        endpoint =>
+        {
+            endpoint.Port = 5173;
+            endpoint.TargetPort = 5173;
+            // Disabling the proxy means Aspire's dashboard will not track requests for the frontend application, and you must ensure the configured port (default 5173) does not conflict with other local Vite instances
+            // Required for HMR to work with default Aspire proxy
+            endpoint.IsProxied = false;
+        }
+    )
     .WithReference(apiService)
     .WaitFor(apiService);
 

src/BikeTracking.Frontend/src/pages/HistoryPage.tsx

@@ -59,7 +59,7 @@ function HistoryTable({
     <table className="history-page-table" aria-label="Ride history table">
       <thead>
         <tr>
-          <th scope="col">Date</th>
+          <th scope="col">Dateddddd</th>
           <th scope="col">Miles</th>
           <th scope="col">Duration</th>
           <th scope="col">Temperature</th>

src/BikeTracking.Frontend/vite.config.ts

@@ -4,8 +4,12 @@ import react from "@vitejs/plugin-react";
 // https://vite.dev/config/
 export default defineConfig({
   server: {
+    host: true,
     open: !process.env.CI,
-    port: 49363,
+    port: 5173,
+    hmr: {
+      overlay: true, // Show error overlay
+    },
   },
   plugins: [react()],