Search code examples
javascriptnode.jsexpresshandlebars.jsexpress-handlebars

script source not found. Error internal server 500 (node, express-handlebars)


I'm stuck with this stupid error 500 because my custom js scripts wont load. I'm running a node.js server locally with express and express-handlebars.

here it is my app.js file

const express = require('express');

const { engine } = require ('express-handlebars');


const app = express();
const port = process.env.PORT || 3001;

app.engine("handlebars", engine({defaultLayout: 'main'}));
app.set("view engine", "handlebars");
app.set('views', './views');


app.get("/", (req, res) => res.render("home"));
app.get("/recognitions", (req, res) => res.render("recognitions"));


// 404 page
app.use((req, res) => {
  res.status(404);
  res.render("404");
});



// custom 500 page
app.use((err, req, res, next) => {
    console.error(err.message)
    res.type('text/plain')
    res.status(500)
    res.send('500 - Server Error')
    })

app.listen(port);

//here start my main.handlebars file

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="../../script.js"></script>
    <script defer src = "../../face-api-min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>the 1984</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    
    <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>

<nav>
    <a href="/">home</a>
    <a href="/recognitions">recognitions</a>
</nav>

{{{body}}}

</body>
</html>

stackoverflow ask me to add more details but i don't know what to add


Solution

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

    every static file should be in the '/public' directory and you should add this to make it readble from the server