Using Nodejs to render html-css-javascript-images

Question

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 don't see any code in your server.js which handles any incoming request, So how you are gonna get the HTML file? — Ropali Munshi
– Ropali Munshi, Commented Apr 25, 2019 at 4:43

Shubham Tiwari · Accepted Answer · 2019-04-25 06:56:37Z

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.com/post/e6b58ce0dab274f977af2fd7a855008ff6034ffc

answered Apr 25, 2019 at 6:56

Shubham Tiwari

4021 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

chenoi Over a year ago

I getting error when run node server.js app.use(express.static(path.join(__dirname, path))); ^ TypeError: path.join is not a function at Object.<anonymous> (/home/xero/next/server.js:20:29) at Module._compile (module.js:653:30) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) at Function.Module.runMain (module.js:694:10) at startup (bootstrap_node.js:204:16) at bootstrap_node.js:625:3

chenoi Over a year ago

Any simple way to do it... ?

Shubham Tiwari Over a year ago

Updated the code, checkout the link codesharehub.com/post/e6b58ce0dab274f977af2fd7a855008ff6034ffc

Shubham Tiwari Over a year ago

That is the simplest way, it will work give it a try and I am here to help you, no worries.

chenoi Over a year ago

Im getting more error sir... path.js:28 throw new TypeError('Path must be a string. Received ' + inspect(path)); ^ TypeError: Path must be a string. Received { resolve: [Function: resolve], normalize: [Function: normalize], isAbsolute: [Function: isAbsolute], join: [Function: join], relative: [Function: relative], _makeLong: [Function: _makeLong], dirname: [Function: dirname], basename: [Function: basename], extname: [Function: extname], format: [Function: format], parse: [Function: parse],

|

Khushit Shah · Accepted Answer · 2019-04-25 10:19:42Z

2

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 becomes /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

edited Apr 25, 2019 at 10:19

answered Apr 25, 2019 at 4:41

Khushit Shah

5556 silver badges20 bronze badges

3 Comments

chenoi Over a year ago

Hi sir...thank you....but is it possible I can maintain my directory structure..? If I maintain the structure...where should I add/edit in server.js

chenoi Over a year ago

If I can maintain the dir structure and do something to server.js so that it can refer to css and js folder

Khushit Shah Over a year ago

@chenoi Added Solution! :p and tick the answer if it works!

Collectives™ on Stack Overflow

Using Nodejs to render html-css-javascript-images

2 Answers 2

17 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related