I'm facing an issue with my express app that renders Mustache templates. The problem is related to the CSS not applying on one of the routes due to it being of MIME type text/html (as mentioned in the Chrome console).
This is how I set up my express app:
const app = express();
app.use(express.static(__dirname + '/public'));
app.use(
cookieSession({
maxAge: 30 * 24 * 60 * 60 * 1000,
keys: [
process.env.COOKIE_KEY_1,
process.env.COOKIE_KEY_2,
process.env.COOKIE_KEY_3
]
})
);
app.use(passport.initialize());
app.use(passport.session());
app.engine('mst', mustacheExpress(__dirname + '/views/partials', '.mst'));
app.set('views', __dirname + '/views', '.mst');
app.set('view engine', 'mst');
Here are the specific routes causing trouble. '/' works fine with CSS, but '/user/profile' throws the MIME type error.
app.get('/', (req, res) => {
res.render('home', {
user: req.user,
title: 'Home'
});
});
app.get('/user/profile', (req, res) => {
res.render('profile', {
user: req.user,
title: 'Profile'
});
});
Additionally, here is the Mustache partial used for the header where the CSS is referenced. While Bootstrap CSS works, both styles.css and login.css are causing issues.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
{{#login}}
<link rel="stylesheet" type="text/css" href="css/login.css">
{{/login}}
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
{{#user}}
<li class="nav-item dropdown" id="header__dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{user.name}}
<img class="user__pic" src="{{user.pic}}" alt="Profile picture" />
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/user/profile">Profile</a>
<a class="dropdown-item" href="/user/settings">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout">Logout</a>
</div>
</li>
{{/user}}
{{^user}}
{{^login}}
<li class="nav-item">
<a href="/login" class="btn btn-outline-secondary" role="button">Login</a>
<a href="/login" class="btn btn-danger" role="button">Sign up</a>
</li>
{{/login}}
{{/user}}
</ul>
</div>
</nav>
</header>
I have already attempted troubleshooting steps like deleting node_modules and reinstalling, but I'm still stuck. If you can pinpoint the difference in declaring these routes, I would greatly appreciate the help!
Thank you