node.jsexpresshandlebars.js

Node server can't find client-side javascript file. Serves 404 page instead

I am trying to build my first node.js app with express and handlebars. In my homepage(index.hbs) I have a script tag with some client-side JavaScript and works fine:

 <script> console.log("hello there") </script>

When I try to point to a file though:

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

it does not work! I see the homepage in my browser ok but in the dev tools I get this:

 app.js:1 Uncaught SyntaxError: Unexpected token '<' (at app.js:1:1)

in the dev tools sources tab I can see that http://localhost:3000/public/js/app.js brings the 404 page.

When I delete the following from my node server to stop all 404 errors:

 app.use('', (req, res) => {
     res.render('404', {})
 })

I get this:

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

I don't get any other problems with my public folder it works fine with all css, photographs etc. This is how I point to it:

const pathToPublic = path.join(__dirname, '../public')
app.use(express.static(pathToPublic))

Thanks

Solution

  • take a look on this docs express-js-static

    since we use express.static we dont need to type /public