javascript file not found in node express handlebars app

2
votes

My app is not loading .js file, css file, or image from my public folder. These are the errors that I'm getting in the console:

  1. GET http://localhost:8080/assets/images/burger.jpg 404 (Not Found)
  2. GET http://localhost:8080/burgers.js net::ERR_ABORTED 404 (Not Found)
  3. Refused to apply style from 'http://localhost:8080/assets/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Here are my paths in the head of main.handlebars:

<link rel="stylesheet" href="/assets/css/style.css" type="text/css">
<script src="/assets/js/burgers.js"></script>

I've included this in my middleware in server.js:

app.use(express.static('public'));

And here is my directory:

  • public
    • assets
      • css
        • style.css
      • js
        • burgers.js
      • images
        • burger.jpg
  • views
    • layouts
      • main.handlebars
    • index.handlebars
  • server.js
2
javascriptmysqlnode.jsexpresshandlebars.js
Is it not because your app.use(express.static('public')); path is wrong? Maybe try app.use(express.static('/public')); - Dane Brouwer
@DaneBrouwer That didn't work either, ugh. Also of note, my teacher cloned my repository to help debug it and none of the public folders/files exist for her, even though they exist in my repository. Could that have something to do with it? - sarahm16
@DaneBrouwer I've also tried app.set(express.static(__dirname + '/public')); - sarahm16
Let's continue this chat here - Dane Brouwer
@DaneBrouwer apparently I don't have enough points to chat, I just made an account today for this issue. But here is a link to the repository github.com/sarahm16/burger - sarahm16

2 Answers

1
votes

Try this instead

<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<script src="assets/js/burgers.js"></script>

Or

<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<script src="./assets/js/burgers.js"></script>
1
votes

I figured it out. I used terminal to create my directory and apparently I named my folders 'public ' and ' assets' with spaces in the folder names that I couldn't see. Renamed them and everything is working properly now. Thank you everyone!