Js file not loading in node js server

Question

I have a node js server when I run HTML page in local host i get the error Uncaught SyntaxError: Unexpected token < in the console because my local js and css files are not able to be loaded. i have gone through - Node.js serve HTML, but can't load script files in served page but it didn't worked

i have a file structure enter image description here

my server code server.js

Node js:-

var express = require('express');
var http = require('http');
var fs = require('fs');
var app = express();

app.use(express.static(__dirname + '/public'));

app.get('*', function(req, res) {
    console.log("Global");
    res.sendFile(__dirname + '/public/index.html');
});

var port = process.env.PORT || 7000;

http.createServer(app).listen(7000);

My HTML file index.html is

<!DOCTYPE html>
<html>
<head>
    <title>sample spa app</title>
    <link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
    <li><a href="#home">home</a></li>
    <li><a href="#about">about</a></li>

    <div>
        <h2>you are in index.html</h2>
    </div>

   <div id="app">

   </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    <script src="public/js/app.js" type="text/javascript"></script>

</body>
</html>

amrutk · Accepted Answer · 2019-02-02 15:55:27Z

0

<!DOCTYPE html>
<html>

<head>
    <title>sample spa app</title>
    <link rel="stylesheet" type="text/html" href="css/style.css">
</head>

<body>
    <li><a href="#home">home</a></li>
    <li><a href="#about">about</a></li>

    <div>
        <h2>you are in index.html</h2>
    </div>

    <div id="app">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./js/app.js" type="text/javascript">
    </script>

</body>

</html>

answered Feb 2, 2019 at 15:55

amrutk

364 bronze badges

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

1 Comment

Harsh Gaur Over a year ago

in my case this works : " <script type="text/javascript" src="/script.js"></script> "

Stock Overflaw · Accepted Answer · 2019-02-02 15:57:00Z

<link rel="stylesheet" type="text/html" href="css/style.css">

The static handler will try and find a file sampleProject/public/css/style.css

<script src="public/js/app.js" type="text/javascript"></script>

The static handler will try and find a file sampleProject/public/public/js/app.js (yes, I wrote public/public).

None of these exist, therefore the static handler lets the request pass to the next route. The next route forces sampleProject/public/index.html to be served, whatever the request is. Hence your error.

Option A: isolate statically-served files

app.use('/public', express.static(__dirname + '/public'));

(As a side note you should require('path') and declare express.static(path.join(__dirname, 'public')), which is safer and more portable than manually concatenating.)

This tells the application to use the static handler only if the route begins with /public.

Option B: always try to resolve files as static

Move your css folder to public/css, and change the path when calling your JS to:

<script src="/js/app.js" type="text/javascript"></script>

Read about the bases here.

Collectives™ on Stack Overflow

Js file not loading in node js server

2 Answers 2

1 Comment

Option A: isolate statically-served files

Option B: always try to resolve files as static

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Option A: isolate statically-served files

Option B: always try to resolve files as static

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related