href attribute in stylesheet link does not work in node

Question

I tried running my website 2 methods. 1) By using node
2) Without using node(just index.html on my computer) However, the outcomes are different in terms of linking stylesheet. Without node, the stylesheet in style tag could be linked as usual. However, when using node as a server, the stylesheet cannot be linked.

Here is the structure of my code.

/app
  /server.js
  /views
    /statics
        /index.html
    /partials
  /public
    /javascript
    /css
        /main.css
    /images

here is the index.html head tag

<link rel="stylesheet" type="text/css" media="screen" href="../../public/css/main.css">

server.js

const express = require('express')
const app = express()
const path = require('path')
// no need to use app.use(app.router) because of that update
// function signature express.static(root, [options])

app.use(express.static('public'));

// mount root to views/statics
app.use('/', express.static('views/statics'));

const PORT = process.env.PORT || 3000;

app.listen(PORT,() => {
    console.log(`Server is listening on port ${PORT}`)
  });

Answer 1

It seems that you did not provide the path under which your assets should be available under with

app.use(express.static('public'));

According to the docs in such case subfolders from the public folder will get served from root path.

In general you should avoid serving assets by relative path. In your case href="/css/main.css" should work. Node acts as a server and you define the paths under which given resources are available in server.js. You can't access them under the directory structure path of your filesystem