Currently, I am facing challenges with linking CSS to my EJS files in a project I am developing using Node/Express/EJS. Despite creating a public folder with a CSS subfolder and the main.css file inside, I am unable to get the CSS to display in the browser. I have followed tutorials to resolve this issue, but I am still struggling to find a solution. I would greatly appreciate any help with this matter :)
Here is my app.js file with the app.use
const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const mongoose = require('mongoose');
const passport = require('passport');
const flash = require('connect-flash');
const session = require('express-session');
const path = require('path');
const app = express();
// Passport Config
require('./config/passport')(passport);
// DB Config
const db = require('./config/keys').mongoURI;
// Connect to MongoDB
mongoose
.connect(
db,
{ useNewUrlParser: true ,useUnifiedTopology: true}
)
.then(() => console.log('MongoDB Connected'))
.catch(err => console.log(err));
// EJS
app.use(expressLayouts);
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use('/css', express.static(__dirname + 'public/css'))
// Express body parser
app.use(express.urlencoded({ extended: true }));
// Express session
app.use(
session({
secret: 'secret',
resave: true,
saveUninitialized: true
})
);
// Passport middleware
app.use(passport.initialize());
app.use(passport.session());
// Connect flash
app.use(flash());
// Global variables
app.use(function(req, res, next) {
res.locals.success_msg = req.flash('success_msg');
res.locals.error_msg = req.flash('error_msg');
res.locals.error = req.flash('error');
next();
});
// Routes
app.use('/', require('./routes/index.js'));
app.use('/users', require('./routes/users.js'));
app.use(express.static(__dirname + '/public/styles/main.css'));
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log(`Server started on port ${PORT}`));
This is the EJS file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<script src="https://kit.fontawesome.com/4ab1675432.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TBANK</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>T</span>BANK</h1>
</div>
<ul class="nav">
<li><a href="#">Savings</a></li>
<li><a href="#">Borrowing</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</header>
<div class="main-body">
<div class="home-heading">
<h1 class="home-header">Bank with the future</h1>
</div>
<!--<div class="container"><%- body %></div>-->
<div class="footer-container">
<footer class="footer_area">
<div class="row">
<div class="column">
<span>T</span>BANK
</div>
<div class="column">
<ul class="list-style-company">
<li><a href="#">About us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">FAQS</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="column">
<ul class="list-style-company">
<li><a href="#">Community</a></li>
<li><a href="#">Transparency</a></li>
<li><a href="#">How money works</a></li>
<li><a href="#">How we protect you</a></li>
<li><a href="#">Business Accounts</a></li>
</ul>
</div>
<div class="column">
<div class="f_social_icon">
<a href="#" class="fab fa-facebook"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>