Similar questions have been asked and I'm asking again after reading many of them(including this most upvoted), trying and getting no positive results and banging my head for around two hours. Please look into this. I'm learning some web dev. and am trying to build this bootstrap signup page. However I'm stuck on the very early stage. Attaching the code files:(zip file uploaded at Gofile.io, link at the end)
Error I'm getting on chrome console:
Refused to apply style from 'http://localhost:3000/assets/styles/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:3000/assets/styles/signup.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:39 GET http://localhost:3000/assets/images/bootstrap-solid.svg 404 (Not Found)
On opening any link to new tab, I'm getting(example for bootsrap-image):
Cannot GET /assets/images/bootstrap-solid.svg
I'm using Google Chrome latest version on Windows 10 OS.
Apart from package.json and app.js , I've copied all html and css bootstrap example source code.
directory structure--
Newsletter-signup
|_assets
| |_images
| | |_bootstrap-solid.svg
| | |_favicon.ico
| |
| |_styles
| |_bootstrap.min.css
| |_signup.css
|
|_app.js
|_package.json
|_signup.html
package.json:
{
"name": "Newsletter-Signup",
"version": "1.0.0",
"description": "",
"main": "app.js",
"type": "module",
"scripts": {
"start": "nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"nodemon": "^2.0.7"
}
}
app.js:
import express from "express";
import https from "https";
import path from "path";
const app = express();
const __dirname = path.resolve();
const portNumber = 3000;
// console.log(__dirname);
app.use(express.static(path.join(__dirname, "assets")));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "signup.html"));
});
app.post("/", () => {
console.log("called app.post method");
});
app.listen(portNumber, () => {
console.log("server listening at portNumber: " + portNumber);
});
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="assets/images/favicon.ico" />
<title>Signup Form</title>
<!-- <link
rel="canonical"
href="https://getbootstrap.com/docs/4.0/examples/sign-in/"
/> -->
<!-- Bootstrap core CSS -->
<link
type="text/css"
rel="stylesheet"
href="assets/styles/bootstrap.min.css"
/>
<!-- Custom styles for this template -->
<link type="text/css" rel="stylesheet" href="assets/styles/signup.css" />
</head>
<body class="text-center">
<form class="form-signin">
<img
class="mb-4"
src="assets/images/bootstrap-solid.svg"
alt=""
width="72"
height="72"
/>
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input
type="email"
id="inputEmail"
class="form-control"
placeholder="Email address"
required
autofocus
/>
<label for="inputPassword" class="sr-only">Password</label>
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="Password"
required
/>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me" /> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in
</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</body>
</html>
signup.css
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
If I use CDN for bootstrap then bootstrap part works. Also, without node, if I simply paste path of signup.html in browser, it is working fine.
You can download and check the complete source file from here
