Express.js not serving local javascript

Question

I am learning express.js and trying to run local JavaScript file on node server. But express is not able to serve the static files.

File structure:

Express
-public
--JS
---client.js
--index.html

-index.js

index.js

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

console.log(path.join(__dirname,'/public'));
app.use(express.static(path.join(__dirname,'/public')));

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="../public/JS/client.js"></script>
</head>
<body>
     
    done..

</body>
</html>

server's console log show for path

E:\node js\express\public

errors in the browser console

localhost/:7 GET http://localhost:3000/public/JS/client.js net::ERR_ABORTED 404 (Not Found)

localhost/:1 Refused to execute script from 'http://localhost:3000/public/JS/client.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Quentin · Accepted Answer · 2022-10-14 14:01:07Z

2

The src attribute needs to contain the URL to the JavaScript.

The browser doesn't know there the HTML document or the JS file are stored on your servers file system.

app.get('/' means your HTML document is at /. You can't go up any higher than that so ../ is meaningless.

app.use(express.static(path.join(__dirname,'/public'))); means that any request for a URL will cause the server to look inside the public directory for a match. So if you ask for /foo it will look for foo inside the public directory.

You are asking for public/JS/client.js so it is looking for public inside the public directory.

The real URL to your JS is: /JS/client.js.

answered Oct 14, 2022 at 14:01

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

lifetimeLearner007 · Accepted Answer · 2022-10-14 14:20:31Z

-1

The path to the client.js file in the HTML is incorrect. The path for all assets in the HTML file should be relative to the HTML file.

In your case, index.html is in public folder and the client.js is inside public/JS folder.

So, the script tag should be like this. Hope this helps!

<script defer src="JS/client.js"></script>

answered Oct 14, 2022 at 14:20

lifetimeLearner007

6537 silver badges18 bronze badges

Collectives™ on Stack Overflow

Express.js not serving local javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related