const express = require('express');
const path = require('path');
const app = express();
// Use static folder middleware
app.use(express.static(path.join(__dirname , "public")));
// Get
app.get("/" , (req , res)=>{
res.sendFile(`${__dirname}/index.html`);
});
// Listen
app.listen(3000 , ()=>{
console.log('server running on port 3000');
});
Folder structure
Root
-index.html
-app.js
public
-css
-index.css
-images
-image.png
In the index.html page The index.css file and the image.png are linked. However, Those two are not being server as static files in app.js. But I have included the middle for serving static folders.
can some one explain what is the issue
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Hugo 0.82.0">
<title>Sign up</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-
touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-
tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="./public/css/index.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form action="/" , method="POST">
<img class="mb-4" src="./public/images/image.png" alt="" width="72"
height="57">
<h1 class="h3 mb-3 fw-normal">Sign Up</h1>
<div class="form-floating">
<input type="text" name="fname" class="form-control top"
id="firstName" placeholder="first name">
<label for="firstName">First Name</label>
</div>
<div class="form-floating">
<input type="text" name="lname" class="form-control middle" id="lastName" placeholder="last name">
<label for="firstName">Last name</label>
</div>
<div class="form-floating">
<input type="email" name="email" class="form-control bottom" id="email" placeholder="[email protected]">
<label for="email">Email ID</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2020–2021</p>
</form>
</main>
</body>
</html>
This is the html page taken from bootstrap The css file under the comment custom styles for this template and the png is below the form tag.
The files are added correct as when the html page is seen in the browser independently then the image and css is showing up
However when it is served using node and express the image and css arent showing up
OK, So I am answering my own question here. After refering to @jdmayfield 's answer and searching about MIME type errors I reached link to this link.
I realised that when you set the pubic folder as static in node, Then that public folder should not be added in the path to css or images in html
Meaning that In the folder structure given above if we want to link css in html the code we use is
<link href="./public/css/index.css" rel="stylesheet">
And this gave me a MIME type error. So I changed the above code to
<link href="css/index.css" rel="stylesheet">
This worked.
However if You independently open the HTML file by going live in vscode, the css and images wont load. But when served with node they will be served.