Node.js serve HTML, but can't load script files in served page

Question

i'm trying to make a little login page using a mongoDB database and Node.js + express. I'm new to Node.js so maybe the solution is easier than i thought. The problem is: when i serve the HTML file when connecting to the server page, i can't use the JavaScript file referenced in the html file. How can i fix it? P.s the index.html and client.js files are all located in a folder named "client".

Code:

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

HTML File:

 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Login</title>
    <meta name="description" content="Login Page">
    <meta name="author" content="AlbertoCoder">
    <script src="/client/client.js"></script>
</head>
<body>
</body>
</html>

Ele · Accepted Answer · 2019-01-04 15:41:52Z

16

You're able to use it, but you need to serve that javascript file from your server through a valid path.

In your HTML you're trying to retrieve the javascript file from /client/client.js

The hint here is:

Imagine the following URL of your server http://myserver:8080/

Now, your HTML is trying to retrieve the js file through http://myserver:8080/client/client.js

As you can see, your server is not serving that assets, thus you won't be able to retrieve that js file.

Do the following:

app.get('/client/client.js', function(req, res) {
    res.sendFile(path.join(__dirname + '/client.js'));
});

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

edited Jan 4, 2019 at 15:41

answered Jan 1, 2018 at 15:07

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

5 Comments

Alberto Calabrese Over a year ago

if i did get it right, this should send the javascript file when i try to access the page /client/client.js in the server right? But if i want to send the html page with the script when the user access the main page ("/"), should i use the same function? Because it gives me an error about the headers can't be set after they're sent. P.s thanks, this was really heplful! :)

Ele Over a year ago

No, you mustn’t send at the same time. Just put those gets separately and the browser will make two requests, one for index and another for client.js.

Alberto Calabrese Over a year ago

Oh i see! The app.get() method, execute the anonymous function when the client connect to any page or when it goes to that page?

Alberto Calabrese Over a year ago

Done, sorry for not doing it earlier, first time i use stackoverflow ahaha

Christos Michael Over a year ago

@AlbertoCalabrese I am facing the same issue. If I apply your way you posted, browser displays the code inside .js file. You can check it here if you like: stackoverflow.com/questions/64636438/…

Kasper Seweryn · Accepted Answer · 2019-05-21 07:48:18Z

6

Create a virtual path.

app.use('/client', express.static(path.join(__dirname, 'client')));

edited May 21, 2019 at 7:48

answered Jan 1, 2018 at 15:12

Kasper Seweryn

3661 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

Node.js serve HTML, but can't load script files in served page

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related