I'm hoping someone can help with showing flash messages in Express via a Handlebars view (which uses the bootstrap markup).
In app.js I have the below modules and middleware to try and get flashes working
//require modules
const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const expressValidator = require('express-validator');
const hbs = require('express-handlebars');
const session = require('express-session');
const flash = require('connect-flash');
const routes = require('./routes/index');
const app = express();
// view engine setup
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'layout',layoutsDir: __dirname + '/views/layouts/'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(expressValidator());
app.use(cookieParser());
app.use(session({
secret: process.env.SECRET,
key: process.env.KEY,
resave: false,
saveUninitialized: false,
store: new MongoStore({ mongooseConnection: mongoose.connection })
}));
app.use(flash());
app.use((req, res, next) => {
res.locals.h = helpers;
res.locals.flashes = req.flash();
res.locals.user = req.user || null;
res.locals.currentPath = req.path;
next();
});
app.use('/', routes);
module.exports = app;
and a route
router.post('/store/add', storeController.createStore);
which has the controller function
exports.createStore = async (req, res) => {
const store = new Store(req.body);
await store.save();
req.flash('error', 'leave a review');
console.log('my-messages',req.flash());
res.redirect('/');
};
when I create a new store and am redirected to homepage the console.log shows the correct value my-messages { error: [ 'leave a review' ] } but I cannot get it into the view
my homepage ('/') view is
<h1>{{title}}</h1>
<p>Hi! Welcome to {{title}} </p>
<p>This page was built by {{created}}</p>
{{#if message}}
<div class="alert alert-danger">{{message}}</div>
{{/if}}
{{#if errors}}
{{#each errors}}
<div class="error">
{{msg}}
</div>
{{/each}}
{{/if}}
but nothing shows up. I've read quite a few similar questions on SO, but can't seem to get this right.
Any help much appreciated.
OK, so this is how I've worked things based on https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423 from this https://stackoverflow.com/a/28221732/1699434 answer.
After app.use(flash()) in app.js I added:
app.use(function(req, res, next){
// if there's a flash message in the session request, make it available
in the response, then delete it
res.locals.sessionFlash = req.session.sessionFlash;
delete req.session.sessionFlash;
next();
});
In my routes file (index.js) I added the example in the gist:
router.all('/session-flash', function( req, res ) {
req.session.sessionFlash = {
type: 'info',
message: 'This is a flash message using custom middleware and express-session.'
}
res.redirect(301, '/');
});
Then I created a handlebars partial message.hbs (which makes use fo the contains helper from npmjs.com/package/handlebars-helpers:
{{#if sessionFlash.message}}
<div id="flash-messages" class="container">
{{#contains sessionFlash.type "info"}}
<div class="alert alert-info">
{{{sessionFlash.message}}}
</div>
{{/contains}}
{{#contains sessionFlash.type "success"}}
<div class="alert alert-success">
{{{sessionFlash.message}}}
</div>
{{/contains}}
{{#contains sessionFlash.type "warning"}}
<div class="alert alert-warning">
{{{sessionFlash.message}}}
</div>
{{/contains}}
{{#contains sessionFlash.type "error"}}
<div class="alert alert-danger">
{{{sessionFlash.message}}}
</div>
{{/contains}}
</div>
{{/if}}
I can then include this in my other handlebars templates {{> message}}. This gives me flash messages carrying bootstrap styling.
Unfortunately I'm not able to send multiple flashes at the same time (either of the same or different types) but I think this is discussed in https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423 anyway as a limitation of the middleware approach. As I learn more maybe I'll address this but I don't have a use case for multiple flash messages at the moment anyway :)
Related
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
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
Hi i am making a blog with node js. And now I am implementing the function to write a post, but there is a problem in this process.
new.ejs is a screen for creating a post.
new.ejs
<div>
<h2> new post </h2>
<form action="/articles" method = "POST">
<h4>title</h4>
<input required type="text" name = "title" / class='form-control'><br>
<h4>description</h4>
<textarea name="description" class = 'form-control'></textarea><br>
<h4>contents</h4>
<textarea id="mytextarea" name="contents" rows = '10'></textarea>
취소<button type = "submit" class="btn btn-primary">저장</button>
</form>
</div>
and
article.js
var express = require("express");
var app = express();
var router = express.Router();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
router.get("/", function (req, res) {
res.send("article");
});
router.get("/new/home", function (req, res) {
res.render("articles/index");
});
router.get("/new", function (req, res) {
res.render("articles/new");
});
router.post("/", function (req, res) {
console.log(req.body.title);
});
module.exports = router;
Here, when req.body.title is executed, req.body becomes undefined. And in the code editor window, a sentence stating that bordyParser has been deprecated appears as the middle line is drawn. How to solve it
The EJS file is POSTing to /articles, but your POST route in the NodeJS is /.
To fix the 'body-parser is deprecated' messages, change the code as follows :-
...
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
...
to
...
app.use(express.urlencoded());
...
Body Parser is now part of Express itself.
IF i am not logged in and make "GET" request to "/sell" i am redirected to "/user/login" which is working accordingly.But if i am logged in and i make GET request to "/sell" i am always redirected to
"/" i.e. homepage instead of "/sell" page.so what should i do to only access "/sell" page if i am logged in?.Here are the code snippets you may probably need. Please let me know if u need anything else. Thank you in advance.
/routes/sell.js
const express = require('express');
const router = express.Router();
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({extended:false});
const Product = require('../models/product');
router.get('/sell', isLoggedIn, (req, res, next) => {
res.render('sell',{title: 'Home|Sell', success: req.session.success, errors: req.session.errors, csrfToken: req.csrfToken()});
req.session.success = null;
req.session.errors = null;
})
router.post('/book_upload', isLoggedIn, (req, res, next) => {
req.check('name')
.isLength({min:3}).withMessage('Name must be of 3 characters long.')
.matches(/^[A-Za-z\s]+$/).withMessage('Name must be alphabetic.');
req.check('phone')
.isLength({min:10,max:10}).withMessage('Phone number must be of 10 digits.');
req.check('book_name')
.isLength({min:3}).withMessage('Book Name must be of 3 characters long.')
.matches(/^[A-Za-z\s]+$/).withMessage('Book Name must be alphabetic.');
req.check('book_price')
.isNumeric().withMessage('Price must be numeric.');
req.check('description')
.isLength({min:3}).withMessage('Description must be of 3 characters long.')
.matches(/^[<A-Za-z0-9></A-Za-z0-9>\s]+$/).withMessage('Please write appropriate description.')
req.check('faculty')
.isLength({min:3}).withMessage('Faculty must be of 3 characters long.')
.matches(/^[A-Za-z\s]+$/).withMessage('Faculty must be alphabetic.')
var errors = req.validationErrors();
if (errors){
req.session.errors = errors;
req.session.success = false;
} else {
req.session.success = true;
var item = {
name: req.body.name,
phone: req.body.phone,
book_name: req.body.phone,
book_price: req.body.price,
description: req.body.description,
faculty: req.body.faculty
};
var data = new Product(item);
data.save();
}
res.redirect('/sell');
})
function isLoggedIn (req, res, next){
if (req.isAuthenticated()){
return next();
}
req.flash('error', 'Please Login to Continue')
res.redirect('/user/login');
}
module.exports = router;
and app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var expressHbs = require('express-handlebars');
var mongoose = require('mongoose');
var session = require('express-session');
var passport = require('passport');
var flash = require('connect-flash');
var validator = require('express-validator');
// var MongoStore = require('connect-mongo')(session);
mongoose.connect('mongodb+srv://username:password#firstdatabase-ytrfr.mongodb.net/test?retryWrites=true&w=majority',{
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(()=>console.log('Connected to the database'))
.catch(err=> console.log('could not connect.',err.message))
// passport
require('./config/passport');
var indexRouter = require('./routes/index');
var userRouter = require('./routes/user');
var sellRouter = require('./routes/sell');
var app = express();
// view engine setup
app.engine('.hbs', expressHbs({ defaultLayout: 'layout', extname: '.hbs'}))
app.set('view engine', '.hbs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(validator());
app.use(session({
secret: 'blahblah',
resave: false,
saveUninitialized: false,
}))
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(path.join(__dirname, 'public')));
app.use((req, res, next) => {
res.locals.login = req.isAuthenticated();
res.locals.session = req.session;
next();
})
app.use('/', indexRouter);
app.use('/', userRouter);
app.use('/', sellRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
and sell.hbs
<section class="my_account_area pt--80 pb--55 bg--white">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<div class="my__account__wrapper">
{{# if success}}
<section class="success">
<h2>Form submitted!</h2>
</section>
{{else}}
{{# if errors}}
<div class="alert alert-danger">
<section class="errors">
<ul>
{{# each errors}}
<li>{{ this.msg }}</li>
{{/each}}
</ul>
</section>
</div>
{{/if}}
<h3 class="account__title">Fill Up the Information of Book</h3>
<form action="/book_upload" method="post">
<div class="account__form">
<div class="input__box">
<label>Your Name <span>*</span></label>
<input type="text" id="name" name="name">
</div>
<div class="input__box">
<label>Phone No. <span>*</span></label>
<input type="number" id="phone" name="phone">
</div>
<div class="input__box">
<label>Name of book <span>*</span></label>
<input type="text" id="book_name" name="book_name">
</div>
<div class="input__box">
<label>Price of Book<span>*</span></label>
<input type="number" id="book_price" name="book_price">
</div>
<div class="input__box">
<label>Description of Book<span>*</span></label>
<input type="text" id="description" name="description" placeholder="e.g. To study in 1st year 1st part">
</div>
<div class="input__box">
<label>Faculty<span>*</span></label>
<input type="text" id="faculty" name="faculty">
</div>
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
<div class="form__btn">
<button type="submit">Upload</button>
</div>
</div>
</form>
</div>
{{/if}}
</div>
</div>
</div>
</section>
Middleware functions are executed sequentially, therefore the order of middleware inclusion is important.
Hence, change the order of
app.use('/', indexRouter);
app.use('/', userRouter);
app.use('/', sellRouter);
to
app.use('/', sellRouter);
app.use('/', indexRouter);
app.use('/', userRouter);
It will work.
I have an express app that takes basic user input data. All of my get routes work fine but when submit a post request to the server I get a 404 on the url I'm posting to even though I have this page in my views folder.
app.js:
var express = require('express');
var path = require('path');
var consolidate = require('consolidate');
var bodyParser = require('body-parser');
var database = require('./database/database');
var Patient = require('./models/models').Patient;
var morgan = require('morgan');
var routes = require('./routes');
var app = express();
app.engine('html', consolidate.nunjucks);
app.set('view engine', 'html');
app.set('views', './views');
app.use(morgan('dev'));
//app.use(app.router);
app.use(routes);
app.use(bodyParser.urlencoded({ extended: false }));
app.listen(3055);
module.exports = app;
routes/index.js:
const express = require('express');
var bodyParser = require('body-parser');
var Patient = require('../models/models').Patient;
const router = express.Router();
router.get('/', function(req, res, next){
res.render('index.html');
});
router.post('/addsubject', function(req, res, next){
Patient.create(req.body).then(function(patient){
res.redirect('/profile');
}).catch(function(err){
if(error.name === "SequelizeValidationError"){
} else {
return next(err);
}
}).catch(function(error){
res.send(500, error);
});
});
router.get('/profile', function(req, res, next){
res.render('./profile.html');
});
router.get('/addsubject', function(req, res, next){
// .... do something here ..
});
module.exports = router;
I have the <form action="/addsubject" method="post"> in my index.html file.
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dabl Demographic</title>
<body>
<h2>Add Subject</h2>
<form action="/addsubject" method="post">
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname">
<br>
<label for="sname">Second Name: </label>
<input type="text" name="sname" id="sname">
<br>
<label for="dob">dob: </label>
<input type="text" name="dob" id="dob">
<br>
<label for="laterality">Laterality: </label>
<input type="text" name="laterality" id="laterality">
<br>
<button>Submit</button>
</form>
</body>
</html>
You pass wrong function (error handling function) to the POST route.
Just remove first "err" param from the function like this:
router.post('/addsubject', function(req, res, next){
Use body-parser middleware before app.router
...
app.use(bodyParser.urlencoded({ extended: false }));
app.use(morgan('dev'));
//app.use(app.router);
app.use(routes);
...
Problem solved:
}).catch(function(err){
if(error.name === "SequelizeValidationError"){
next(err); //next(err); called inide this block no more 404 error
}
User input is now succesfully passed through the body-parser.
I am trying to replicate a tutorial on using passport to create user authentication.
whenever i try including the below snippet in signup.ejs:
<% if (message.length > 0) { %>
<div class="alert alert-danger"><%= message %></div>
<% } %>
it throws error and as soon as i remove this from signup.ejs, it renders.
below is my app.js(includes all the configurations), index.js(routing part), signup.ejs and passport.js(link to this file is mentioned)
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
var mongoose = require("mongoose");
var passport = require('passport');
var flash = require('connect-flash');
var session = require('express-session');
mongoose.connect("mongodb://jer:jer#ds061611.mongolab.com:61611/passport1");
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
require('./config/passport')(passport);
app.use(logger('dev'));
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
// required for passport
app.use(session({ secret: 'zxcv' })); // session secret
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash()); // use connect-flash for flash messages stored in session
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
app.listen(8000);
module.exports = app;
index.js
var express = require('express');
var router = express.Router();
var passport = require('passport');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index.ejs', { title: 'Express' });
});
router.get('/signup', function(req, res) {
// render the page and pass in any flash data if it exists
res.render('signup.ejs');
});
// process the signup form
console.log("entering signup");
router.post('/signup', passport.authenticate('local-signup', {
successRedirect : '/profile', // redirect to the secure profile section
failureRedirect : '/signup', // redirect back to the signup page if there is an error
failureFlash : true // allow flash messages
}));
router.get('/profile', isLoggedIn, function(req, res) {
console.log("going to profile page.................................................................");
res.render('profile.ejs', {
user : req.user // get the user out of session and pass to template
});
});
function isLoggedIn(req, res, next) {
// if user is authenticated in the session, carry on
if (req.isAuthenticated())
return next();
// if they aren't redirect them to the home page
res.redirect('/');
}
module.exports = router;
signup.ejs
<!doctype html>
<html>
<head>
<title>Node Authentication</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- load bootstrap css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <!-- load fontawesome -->
<style>
body { padding-top:80px; }
</style>
</head>
<body>
<div class="container">
<div class="col-sm-6 col-sm-offset-3">
<h1><span class="fa fa-sign-in"></span> Signup</h1>
<% if (message.length > 0) { %>
<div class="alert alert-danger"><%= message %></div>
<% } %>
<!-- LOGIN FORM -->
<form action="/signup" method="post">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-warning btn-lg">Signup</button>
</form>
<hr>
</div>
</div>
</body>
</html>
passport.js (at below link:)
https://scotch.io/tutorials/easy-node-authentication-setup-and-local
Any help would really help me in completing this tutorial.
Thanks in advance.
Finally, digged out the fault...... was a very simple and basic error.Happy i did not waste other's time...
error: i was not passing the variable into the template while rendering.
codeChange:
in index.js for the /signup path
res.render('signup.ejs'); changes to res.render('signup.ejs',{message:'errorMessage'});