Thanks to the valuable guidance provided by @Kennard, I was able to grasp the concepts shared in the link despite facing some challenges.
In an effort to assist fellow beginners who may encounter similar difficulties, I will attempt to explain the process in a more straightforward manner.
const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(home_html);
});
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
While the JavaScript code functions properly on its own, there is a small issue that becomes amplified over time. Express fails to locate the stylesheet (CSS file) referenced in the HTML, resulting in inconsistencies between the files. Instead of following the specified link, it prompts:
You want to serve a file along with HTML... Fine I'll do it.
But to avoid the mess, you have to do some thing more. Tell me the location where File is stored.
And this is the public thing mentined above
To simplify matters for novices, I recommend following this guide for creating a well-organized directory structure.
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
Executing the following commands will result in this directory structure:
npx express-generator
express --view=pug myapp (myapp is name of folder you wanna generate.)
Remember the "app.js" stores all of this Javascript.
We can instruct express to search in a specific directory as follows:
app.use('/public', express.static(path.join(__dirname, 'public')))
This line essentially directs express to the 'public' folder located in the current directory to fetch files from there.
Simply place all image files used for CSS and HTML within this designated folder.
If you choose to utilize the method outlined in this link, the necessary folders are already set up for your convenience.
Always remember that the solution to any problem can be found in thorough documentation.
Feel free to upvote if you found this explanation helpful.
//Special thanks to Kennard for his invaluable assistance without which this would not have been possible.