admin管理员组

文章数量:1023220

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

  • javascript
  • html
  • css
  • node.js
  • webserver
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.js which handles any ining request, So how you are gonna get the HTML file? – Ropali Munshi Commented Apr 25, 2019 at 4:43
Add a ment  | 

2 Answers 2

Reset to default 3

You 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

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

  • javascript
  • html
  • css
  • node.js
  • webserver
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.js which handles any ining request, So how you are gonna get the HTML file? – Ropali Munshi Commented Apr 25, 2019 at 4:43
Add a ment  | 

2 Answers 2

Reset to default 3

You 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

本文标签： Using Nodejs to render htmlcssjavascriptimagesStack Overflow

版权声明：本文标题：Using Nodejs to render html-css-javascript-images - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745543007a2155270.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。