My Express server is having trouble loading the Static JS

Question

My Express server is having trouble loading the Static JS

I'm feeling frustrated about this particular issue. The problem seems to be well-solved, and my code looks fine, but I can't figure out what's wrong . . .

I have a JavaScript file connecting to my survey page, which I've added at the bottom of the <body> tag like this:

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

In my server.js file, I've tried:

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

I thought I covered all bases there . . . 'public' contains the HTML pages, while 'data' holds my JSON and JavaScript files.

Directory structure:

root
-app
--data
--public
server.js

However, I keep encountering a failure to load JS error.

https://i.stack.imgur.com/fnDQ5.png https://i.stack.imgur.com/Ly9Et.png

What's going on here?

javascript express

Answer 1

Answer №1

The reason for the issue is that you forgot to send the js file to the user when a request is received by the server

For example, you need a js file called public.js

File path: ui/publish.js

Request URL: http//:localhost:4000/ui/publish.js

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

Give this a try.

Answer 2

The reason for the issue is that you forgot to send the js file to the user when a request is received by the server

For example, you need a js file called public.js

File path: ui/publish.js

Request URL: http//:localhost:4000/ui/publish.js

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

Give this a try.

Answer 3

Answer №2

Give this a shot.

Format
main-node
-app
--info
  -- file1.js
  -- file2.js
--assets
   -- page.html
server.js


app.enable(express.static('assets'));
app.enable(express.static('info'));

Now, to access file1.js, use the URL http://localhost:8080/file1.js and for the html file, use http://localhost:8080/page.html

Answer 4

Give this a shot.

Format
main-node
-app
--info
  -- file1.js
  -- file2.js
--assets
   -- page.html
server.js


app.enable(express.static('assets'));
app.enable(express.static('info'));

Now, to access file1.js, use the URL http://localhost:8080/file1.js and for the html file, use http://localhost:8080/page.html

Answer 5

Answer №3

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

It is recommended that you update your script tag as shown above and include the following line in server.js:

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

Ensure that your js files are placed in the /app/static directory.

Answer 6

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

It is recommended that you update your script tag as shown above and include the following line in server.js:

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

Ensure that your js files are placed in the /app/static directory.

My Express server is having trouble loading the Static JS

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to verify if a Backbone.View is actively displayed in the DOM?

Enhance the functionality of jQuery sortable by including additional details

Hapi/Node.js Reference Error for Request: Troubleshooting the Issue

Passing data retrieved from a mongoose query to a webpage without the need for a page refresh

Launch all external links in Browser (NWjs)

Hierarchy-based state forwarding within React components

refetchQueries may be effective for specific queries

Tips for keeping a login session active on multiple tabs

The persistent issue persists with the Sails.js Node server where the req.session remains devoid of any data, despite utilizing

Calculate the total cost for each row in a table by multiplying the quantity and price using jQuery, then display the result

Showing error messages in Angular when a form is submitted and found to be invalid

Transitioning create-react-app from JavaScript to Typescript

Sorting Columns in JQuery Datatables

Is there a reliable method for parsing a CSV file that contains JSON strings as values?

Escape from an iframe with the help of a buster

Ways to avoid scrolling on a fixed element

Is there a way to mimic disabled input fields?

What could be causing my page to suddenly disappear?

"Utilize Node.js to generate a nested array structure with groupings

Adding an onload event in a function-based component without using a fetch call