Can someone help me understand why the colors for 'success' and 'danger' are not showing up in my flash messages? The messages themselves appear as expected, but the associated colors are missing. Here is a snippet of my package.json:
{
"dependencies": {
"body-parser": "^1.18.3",
"bootstrap": "^4.1.3",
"connect-flash": "^0.1.1",
"cookie-parser": "^1.4.3",
"express": "^4.16.4",
"express-messages": "^1.0.1",
"express-session": "^1.15.6",
"express-validator": "^5.3.0",
"mongoose": "^5.3.15",
"pug": "^2.0.3"
},
"devDependencies": {
"nodemon": "^1.18.7"
}
}
In my app.js file, this is how I am setting up the sessions and flash messages:
const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const expressValidator = require('express-validator');
const flash = require('connect-flash');
const session = require('express-session');
// express session middleware
app.use(session({
secret: 'keyboard cat',
resave: true,
saveUninitialized: true
}));
// express messages middleware
app.use(require('connect-flash')());
app.use(function (req, res, next) {
res.locals.messages = require('express-messages')(req, res);
next();
});
app.use(flash());
// routes setup
let quotes = require('./routes/quotes');
let subscribers = require('./routes/subscribers');
app.use('/quotes', quotes);
app.use('/subscribers', subscribers);
// Handling flash messages
router.post('/subscribe', function (req, res)
{
// logic to handle subscription
req.flash('success', 'Subscription confirmed.');
res.redirect('back');
});
In my services.pug file, I have included the necessary stylesheets and scripts:
link(rel='stylesheet', href='/css/style.css')
link(rel='stylesheet' href='/node_modules/bootstrap/dist/css/bootstrap.css')
// other code here...
h1 Subscribe to our newsletter
//- include subscribe.pug
form(method='POST', action= '/subscribe')
input(name = 'email',type='email', placeholder='Enter email')
button.button1(type='submit') Subscribe
!= messages('message',locals)
// at the bottom...
script(src='/node_modules/jquery/dist/jquery.js')
script(src='/node_modules/bootstrap/dist/js/bootstrap.js')
In my message.pug file, I am looping through the messages to display alerts with appropriate styling based on the type:
.messages
each type in Object.keys(messages)
each message in messages[type]
div(class = "alert alert-"+ type) #{message}
Although the messages appear as expected, the colors related to success and danger are not displaying correctly. The messages seem to blend with the background color instead. Not sure what I am missing here.
UPDATE:
Upon checking the console in Chrome, I found some error messages related to the bootstrap.css and jquery.js files not being found by the application. Here is where I set up my public folder in app.js:
// set public folder
app.use(express.static(path.join(__dirname, 'public')));
https://i.sstatic.net/PHlm7.png https://i.sstatic.net/7JJla.png
The node_modules folder is available as well. https://i.sstatic.net/jIQAP.png
Any assistance would be greatly appreciated!