IIS won’t handle the static file properly for nodejs-express and vite-react app. No static file found (index…. .js and index…. cs -> 404.0)

I have created frontend using react-vite and backend using nodejs-express.js. Done npm run build for production build of frontend and served the static build using express.static()

Whenever I host my app on IIS using iisnode and url-rewrite. The app can fetch index.html correctly but as soon as index.html being loaded the IIS can route the static files needed but index.html

<configuration> 
    <system.webServer>
  
     <handlers>
       <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
     </handlers>
  
     <rewrite>
       <rules>
       
         <rule name="nodejs">
           <match url="(.*)" />
           <conditions>
             <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
           </conditions>
           <action type="Rewrite" url="server.js" />
         </rule>

        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="/frontend/dist/index.html" />
        </rule>

       </rules>
     </rewrite>
  
     <security>
       <requestFiltering>
         <hiddenSegments>
           <add segment="node_modules" />
           <add segment="iisnode" />
         </hiddenSegments>
       </requestFiltering>
     </security>
     </system.webServer> 
 </configuration>

server.js:

import path from "path";
import express from "express";
import dotenv from "dotenv";
import cookieParser from "cookie-parser";

import authRoutes from './backend/routes/auth.routes.js'
import messageRoutes from "./backend/routes/message.routes.js";
import userRoutes from './backend/routes/user.routes.js';

import connectToMongoDB from "./backend/db/connectToMongoDB.js";
import { app, server } from "./backend/socket/socket.js";

dotenv.config();


// Initialize express application

const PORT = process.env.PORT || 5000;
const __dirname =  path.resolve();

// Load environment variables from .env file

/*
        MIDDLEWARE SECTION
*/
app.use(express.json()); //to parse the incoming requests with JSON payloads (from: req.body)
app.use(cookieParser());


// app.use->(  Middleware to handle routes starting with /api/auth/)
app.use("/api/auth", authRoutes);  //authentication routes
app.use("/api/messages", messageRoutes); //get & send:id message
app.use("/api/users", userRoutes);  //get users

app.use(express.static(path.join(__dirname, "/frontend/dist")));

app.get("*", (req, res) => {
        res.sendFile(path.join(__dirname, "/frontend", "dist", "index.html"));
})



/*
        SERVER SECTION
*/

// Start the server and listen on the specified port
server.listen(PORT, '0.0.0.0',() => {
    connectToMongoDB();
    console.log(`Server is running on PORT: http://localhost:${PORT}`)

});

I have hosted the app as subsite under default website and the error I always get is:
No .js and .css file found. I tried making changes in web.config still no reaults.


localhost/chat

http://localhost/assets/index-qBCe9vKe.js