How to solve net::ERR_ABORTED 404 in Nodejs - node.js

Question

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 class="ad-analytics">
<div class="container-fluid ad-analytics__contain">
<div class="row ad-analytics__row">
<div class="col-md-6" id="meetings-img-holder">
<!-- bg-img holder -->
</div>
<div class="col-md-6 ad-analytics__textbox">
<div class="col-sm-12 ad-analytics__info">
<h1 class="h2">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
class="btn btn-outline-light btn-sm"
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/bootstrap#5.1.3/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

Answer 1

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