javascript - Node JS - HTML Paths - Stack Overflow

admin管理员组

文章数量:1355019

I recently have the problem that I dont get how the paths for html in node js work. I link my index.html's scripts as normal - relative to the index.html's file (node.js file and index.html are in the same directory "res.sendFile(__dirname + '/index.html');"). But if I open it up in the Browser executed with node js it just stats "cant GET blabla" for the scripts. Instead opening it up by just clicking index.html without node js those paths work! How do I have to write html paths for node js?

var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    port = Number(process.env.PORT || 3000),

server.listen(port);

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

Thanks for your time! :)

I recently have the problem that I dont get how the paths for html in node js work. I link my index.html's scripts as normal - relative to the index.html's file (node.js file and index.html are in the same directory "res.sendFile(__dirname + '/index.html');"). But if I open it up in the Browser executed with node js it just stats "cant GET blabla" for the scripts. Instead opening it up by just clicking index.html without node js those paths work! How do I have to write html paths for node js?

var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    port = Number(process.env.PORT || 3000),

server.listen(port);

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

Thanks for your time! :)

• javascript
• html
• node.js
• path

Share Improve this question Follow asked Mar 22, 2016 at 12:00 dunnohowishouldnamemyselfdunnohowishouldnamemyself 15922 silver badges1212 bronze badges 1

• This code works on my PC actually. XD. perhaps something wrong with permissions? – SCaffrey Commented Mar 22, 2016 at 12:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Look at this:

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

You have told Node "When the browser asks for / give it index.html".

What happens when the browser asks for someScript.js?

You haven't told Node what to do then.

(You'll probably want to find a library for serving up static files rather than explicitly handling each one individually).

you should configure express to server static files, for example, put all the static files under a directory called 'public'

var express = require('express');
var app = express();
var path = require('path');

// viewed at http://localhost:8080
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

ExpressJS to Deliver HTML Files

Render HTML file in ExpressJS

You can use

app.use(express.static(path.join(__dirname, "folder-name")));

Usually i put all my static files in a separate folder named "assets" The I set up a static route as shown below:enter code here

app.use('/assets', express.static('assets'));

When you write:

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

It will only serve index.html file, not the other js scripts and stylesheets which you have added in your html.

There are 2 ways to solve that:

For both of them, I would suggest to use 'path' module.

Solution 1:

var path = require('path')
app.get('/path/to/js/foo.js',function(req,res){
    res.sendFile(path.resolve(__dirname,'/path/to/js/foo.js')
})
app.get('/path/to/css/bar.css',function(req,res){
    res.sendFile(path.resolve(__dirname,'/path/to/css/bar.css'))
})

and so on for every .css and.js file you have added in your index.html.

Solution 2:

You can create a public dir in your project's root dir. Inside which all your img, css and js files will be there.

Next,

var path = require('path')
app.use(express.static('public'))
app.get('/',function(req,res){
    res.sendFile(path.resolve(__dirname,'/index.html')
})

本文标签： javascriptNode JSHTML PathsStack Overflow