How to load CSS and Bootstrap files into server using node.js?
Question
I have a html file called myfile.html that displays 'Hello World'. My css file called myfile.css is used to insert background image. My bootstrap files are used to insert a image in the form of a circle.
The HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
</head>
<body>
<h1>Hello World!!</h1>
<img src="public\pinky.jpg" class="img-circle">
</body>
</html>
My CSS file is as follows:
body {
background-image: url('fishy.jpg');
}
My node.js file called new.js is as follows:
const express = require('express')
const app = express()
app.use(express.static('public'))
app.get('/',function (req,res) {
console.log(__dirname)
res.sendFile(__dirname+"/myfile.html")
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})
My main folder is called Bootsstrap and it has the following contents:
Bootsstrap
-myfile.html
-public /*Folder*/
/*inside public folder*/
-myfile.css
-css
-js
-fonts
-fishy.jpg /*background image*/
-pinky.jpg /*circular image*/
I open Command Prompt from Bootsstrap folder and run
node new.js
I get the message as:
'Example app listening on port 3000!'
When I open Chrome Browser and type localhost:3000, I get only 'Hello World'.The images are not getting displayed. I get an Error 404.
What can I do in order to run my HTML file in server using node.js by including all my css and bootstrap files?
3 answers
solution1
0 2017-07-09 07:52:22
If you want to serve static files, such as html files, css , images, you need to make them available for the public. In your existing setup, only myfile.html is available for the public. Since you use css and other files from your server, you need to make them available also. The best way to achieve is to create a public folder and let express to make all the files available in the public folder.
Add to node.js
app.use('/', express.static('public'));
and rename your myfile.html to index.html
and in your index.html file
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
For example, your node.js should look like something
const express = require('express');
const app = express();
app.use('/', express.static('public'));
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
For more info Serving static files in Express
Edit
Your folder structure should be. no need of bootstap folder
public //public folder
-index.html
-myfile.css
-css
-js
-fonts
-fishy.jpg
-pinky.jpg
solution2
0 2017-07-09 07:59:30
You must not use the public path in your html. Also, in URLs use always forward slashes. Backslashes are just for Windows directories.
<!DOCTYPE html> <html> <head> <title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
</head> <body> <h1>Hello World!!</h1>
<img src="pinky.jpg" class="img-circle"> </body> </html>
solution3
0 2017-07-09 08:01:06
replace
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
by
<link rel="stylesheet" type="text/css" href="css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.