I'm exploring and testing nodejs with a html, css and javascript.
When i run index.html locally (no webserver) I can see the css,js,html,images render properly on my browser.
The problem when I create server.js and browse localhost:8000/index.html, it just return my heading and paragraph... no nice images, css, js execute...
I have gone through from SO and due to calling is only on html file but not css/js/images.
I don't know what's the problem, and how to proceed further.
This is my server.js:
var express = require('express');
var connect = require('connect');
var http = require('http');
var path = "";
var app = connect().use(express.static(__dirname + path));
http.createServer(app).listen(8000);
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>TEST NODEJS WEB</title>
<!-- library -->
<link rel="stylesheet" href="/home/xero/next/css/next.min.css">
<script type="text/javascript" src="/home/xero/next/js/next.min.js">
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="/home/xero/next/font-
awesome/css/font-awesome.min.css">
</head>
<body>
<div id="topology-container"></div>
<!-- Application scripts -->
<script type="text/javascript" src="topology_data.js"></script>
<script type="text/javascript" src="action-panel.js"></script>
<script type="text/javascript" src="topology.js"></script>
<script type="text/javascript" src="main.js"></script>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
This is folder structure in my machine:
home
xero
next
js/next.min.js
css/next.min.css
myweb
index.html
topology_data.js
action-panel.js
topology.js
main.js
server.js
When i browse index.html..only can see 'My First Heading' and 'My first paragraph.'
Please help and advise me further. Thank you. Thanks to all
I'm exploring and testing nodejs with a html, css and javascript.
When i run index.html locally (no webserver) I can see the css,js,html,images render properly on my browser.
The problem when I create server.js and browse localhost:8000/index.html, it just return my heading and paragraph... no nice images, css, js execute...
I have gone through from SO and due to calling is only on html file but not css/js/images.
I don't know what's the problem, and how to proceed further.
This is my server.js:
var express = require('express');
var connect = require('connect');
var http = require('http');
var path = "";
var app = connect().use(express.static(__dirname + path));
http.createServer(app).listen(8000);
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>TEST NODEJS WEB</title>
<!-- library -->
<link rel="stylesheet" href="/home/xero/next/css/next.min.css">
<script type="text/javascript" src="/home/xero/next/js/next.min.js">
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="/home/xero/next/font-
awesome/css/font-awesome.min.css">
</head>
<body>
<div id="topology-container"></div>
<!-- Application scripts -->
<script type="text/javascript" src="topology_data.js"></script>
<script type="text/javascript" src="action-panel.js"></script>
<script type="text/javascript" src="topology.js"></script>
<script type="text/javascript" src="main.js"></script>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
This is folder structure in my machine:
home
xero
next
js/next.min.js
css/next.min.css
myweb
index.html
topology_data.js
action-panel.js
topology.js
main.js
server.js
When i browse index.html..only can see 'My First Heading' and 'My first paragraph.'
Please help and advise me further. Thank you. Thanks to all
Share Improve this question edited Apr 25, 2019 at 8:53 chenoi asked Apr 25, 2019 at 4:20 chenoichenoi 5653 gold badges12 silver badges33 bronze badges 2- Whats error in browser console? – Khushit Shah Commented Apr 25, 2019 at 4:28
-
I don't see any code in your
server.jswhich handles any ining request, So how you are gonna get the HTML file? – Ropali Munshi Commented Apr 25, 2019 at 4:43
2 Answers
Reset to default 3You will have to create api for sending the css and javascript file from Node server. Since you are already using the express you don't need to use connect and http to start a server. Using express you can run a server, check the code
`
var app = express();
app.listen(8000, function() {
console.log('app listening on port 8000!');
});
`
In order to send next.min.css and next.min.js files just create the get api in your server
`
app.get('/script', (req,res) => {
res.sendFile("/home/xero/next/js/next.min.js");
});
`
`
app.get('/css', (req, res) => {
res.sendFile("/home/xero/next/css/next.min.css");
});
`
and call these apis from your index.html file.
`
<link rel="stylesheet" href="http://localhost:8000/css">
<script type="text/javascript" src="http://localhost:8000/script">
`
Check out the whole working solution -
https://codesharehub./post/e6b58ce0dab274f977af2fd7a855008ff6034ffc
As you are using a server to serve html. The links in the html are relative with the base of the server.
i.e
your server is running on /home/xero/myweb
So, your links in css or js bees /home/xero/myweb/home/xero/next/css/next.min.css,
Which doesn't exists
As, you can't access parent directory of your server base directory.
Use following Directory Structure
home
xero
myweb
next
js/next.min.js
css/next.min.css
index.html
topology_data.js
action-panel.js
topology.js
main.js
server.js
And, then in index.html
<!DOCTYPE html>
<html>
<head>
<title>TEST NODEJS WEB</title>
<!-- library -->
<link rel="stylesheet" href="/next/css/next.min.css">
<script type="text/javascript" src="/next/js/next.min.js">
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="/next/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="topology-container"></div>
<!-- Application scripts -->
<script type="text/javascript" src="topology_data.js"></script>
<script type="text/javascript" src="action-panel.js"></script>
<script type="text/javascript" src="topology.js"></script>
<script type="text/javascript" src="main.js"></script>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
*Edit
Use app.use(express.static(<path>)). here is the documentation.
code:
var express = require("express");
var connect = require("connect");
var http = require("http");
var path = "";
var app = connect().use(express.static(__dirname + path));
app.use(express.static("../next/"));
http.createServer(app).listen(8000);
Ans now in html you just need to refer as
css/next.min.css and js/next.min.js
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745543008a4632215.html
评论列表（0条）