I am currently towards the end of my project but there is one error I am receiving still. I cannot seem to figure out why I am receiving the error:

"Failed to load resource: the server responded with a status of 404 (Not Found)".

Below is my file layout, server.js and the script tag. I have my layout the same as all the other projects I have made in the past but for some reason this error keeps popping.

server.js

"use strict";

// DEPENDENCIES
require("dotenv").config();
const express = require("express");
const session = require("express-session");
const passport = require("passport");
const path = require("path");
const ejs = require("ejs");
const logger = require("morgan");

var createError = require("http-errors");
var cookieParser = require("cookie-parser");
const flash = require("connect-flash");
const favicon = require("serve-favicon");

// ROUTES REQUIRED
const main = require("./routes/main");
const about = require("./routes/about");
const contact = require("./routes/contact");
const profile = require("./routes/profile");
const pricing = require("./routes/pricing");
const help = require("./routes/help");
const login = require("./routes/login");
const signup = require("./routes/signup");
const forgot_password = require("./routes/forgot-password");

// PORT
const port = 3000;
const app = express();

// COOKIES AND SESSION
app.use(
  session({
    secret: process.env.SECRET,
    resave: false,
    saveUninitialized: true,
  })
);

app.use(passport.initialize());
app.use(passport.session());

// DATABASE
require("./config/database.js");

// PASSPORT AUTHENTICATION
require("./config/passport.js");

// VIEWS SETUP
app.set("views", path.join(__dirname   "/views"));
app.set("view engine", "ejs");
app.set("view cache", false);

// MIDDLEWARE
app.use(favicon(__dirname   "/public/favicon.ico"));
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use("/public", express.static(path.join(__dirname   "/public")));
app.use(flash());

// ROUTES

app.use("/", main);
app.use("/about", about);
app.use("/contact", contact);
// PRICING
app.use("/pricing", pricing);
// PROFILE
app.use("/profile", profile);
app.use("/help", help);
app.use("/login", login);
app.use("/signup", signup);
app.use("/forgot-password", forgot_password);

// Logout
app.get("/logout", function (req, res) {
  res.clearCookie("connect.sid");
  res.redirect("/");
});

app.listen(process.env.PORT || port, (err, done) => {
  if (!err) {
    console.log({ message: "success!" });
  } else {
    return err;
  }
});

home.ejs(home page layout with scripts.)

--------------------------------------------------------------------------
    <section >
      <div >
        <div >
          <div  id="meetings-img-holder">
            <!-- bg-img holder -->
          </div>
          <div >
            <div >
              <h1 >Analytical Precision</h1>
              <p>
                Getting ahead of the curve is the best way to scale above the
                compeititon. With our machine learning tools, you can leverage
                your data and get real insight on what your customers want from
                you.
              </p>
              <a
                
                href="/machine-learning"
                role="button"
                >Get Started</a
              >
            </div>
          </div>
        </div>
      </div>
    </section>
    <%- include('partials/footer.ejs') %> 
    <%- include('partials/scripts.ejs') %>
  </body>
</html>
------------------------------------------------------------------------------------
(Inside partials/script.js)

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
  crossorigin="anonymous"
></script>
<script type="javascript" src="/server.js"></script>

File Layout

CodePudding user response：

You shouldn't use <script> tags to import server side files like for an example server.js, this file is used to run the node server

let's say you make a script for home page, you need to save it inside /public and the send it to client to be interpreted by the browser by adding it to partials/scripts.ejs

example

<script type="javascript" src="/home_script.js"></script>

the path would be

public/home_script.js

Edit: it feels like you're still a bit confused so i'll take a example

in server.js you have

const main = require("./routes/main");
app.use("/", main); 

think about the file main.js like taking a function from server.js and moving it to a single file

now in main.js i'm guessing you have a function like this:

router.get('/', (req,res,next) => {
 res.render('home.ejs')

})

the code above is part of server side code and shouldn't be sent to the user(the client)

now inside home.ejs you have your partials and then a section for scripts

<script type="javascript" src="/bootstrap.bundle.min.js"></script>
<script type="javascript" src="/home_script.js"></script>

this file home_script should contains stuff that you want to do once the page arrives the user (we call this client side)

as an example:

if you have button and you want to do something when you click you write that part of javascript inside home_script.js