Serving front-end web-application from a type-script based KOA server cannot resolve CSS and JS files

Question

I am trying to serve a front-end web-application from a type-script based KOA server. The index.html (HTML) renders fine from the public folder when i hit a full url till index.html (http://localhost:3000/ui/index.html).

however the local js/css files that this index.html refers to doesn't get resolved if i just hit the root of the static-url i.e http://localhost:3000/ui and in this case i get the below error. .

ERROR ON WEB CONSOLE:

GET http://localhost:3000/styles/style.css net::ERR_ABORTED 404 (Not Found)
ui:14 GET http://localhost:3000/scripts/zhun/zhn-nav-toolbar/zhn-nav-toolbar.js net::ERR_ABORTED 404 (Not Found)
ui:15 GET http://localhost:3000/scripts/zhun/zhn-nav-button/zhn-nav-button.js net::ERR_ABORTED 404 (Not Found)
ui:14 GET http://localhost:3000/scripts/zhun/zhn-nav-toolbar/zhn-nav-toolbar.js net::ERR_ABORTED 404 (Not Found)
ui:15 GET http://localhost:3000/scripts/zhun/zhn-nav-button/zhn-nav-button.js net::ERR_ABORTED 404 (Not Found)

Package.json

 "dependencies": {
    "@types/winston": "^2.4.4",
    "koa": "^2.12.0",
    "koa-mount": "^4.0.0",
    "koa-router": "^9.0.1",
    "koa-static": "^5.0.0"
  },
  "devDependencies": {
    "@types/koa": "^2.11.3",
    "@types/koa-mount": "^4.0.0",
    "@types/koa-router": "^7.4.1",
    "@types/koa-static": "^4.0.1",
    "rollup": "^2.15.0"
  }

project structure

root/-
     + src/
        |  +public/
        |         +index.html
        |         +scripts/ 
        |                 + subfolders and js files
        |         +styles/
        |                + style.css
        |+ server.ts

index.html file-references

<link rel="stylesheet" href="styles/style.css">
<script src="scripts/zhun/zhn-nav-toolbar/zhn-nav-toolbar.js" type="module"  ></script>  
<script src="scripts/zhun/zhn-nav-button/zhn-nav-button.js" type="module"  ></script>

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2017",
        "noImplicitAny": true,
        "outDir": "./dist",
        "sourceMap": true,
        "allowJs":true 
    },
    "include": [
        "./src/**/*"
    ]
}

A few pointers about the tests I have performed:

I have already tried testing the implementation using plain javascript without "TS compilation" and it works fine.
the JS that the index.html is trying to refer are having web-components java-script.
1. I have used koa-mount to mount both ui and api . below is the related code
app.use(mount('/api', api)); app.use(mount('/ui', ui)); app.listen(3000,()=>{ console.log("zhun-otu started listening on port:3000 "); })

Can i get pointers on what should be changed inthe implemenation for this code to work.

Serving front-end web-application from a type-script based KOA server cannot resolve CSS and JS files

0 Answers0