How to render html with Metro 4 Ui framework using node.js?

Question

I am practicing creating a server using node.js. I have created an HTML with metro UI/metro 4 framework in it. Opening HTML was ok.

But when I try to integrate it into the node server. It did render but it did not read the metro UI framework. It rendered the plain texts and the other stuff. No good UI at all.

But when I tried the express it did render the whole package with no problem.

Is there a way to render my HTML using the non-express reading HTML? or do I need this express.js to render my HTML with metro UI /metro 4 framework?

I have listed my code below so you could help me out. thank you!

const fs = require('fs');
const http = require('http');
const url = require('url');

///// non express reading html 
const mainHtml = fs.readFileSync(`${__dirname}/Main.html`, 'utf-8');
const server = http.createServer((req,res) => {
  const pathName = req.url;
  fs.readFile('./${__dirname}/main.html`, .html', function (err,html){
        if (err) throw err;

        res.writeHead(200,{ 'content-type': 'text/html' });
        res.write(html);
        res.end();
    });


});


//using express
const express = require("express");
const app = express();

app.listen(7000, () => {
  console.log("Application started and Listening on port 3000");
});

// server your css as static
app.use(express.static(__dirname));

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/Main.html");
});