Code breaks once I start adding files to my controllers folder - why? - node.js

I am using node, express, fs and a few other things to create my first MVC framework app. I am currently googling around to find out more about an error I was getting, but am not finding the clarity I am looking for. Right now, I am not getting errors when I keep all my code in my server.js file. But that is not what MVC is all about, so at some point I created a users_controller.js file began to move the following routes into it (all except the ('/') route). As soon as I did that, everything broke!
The error I get is => TypeError: undefined is not a function
The line being referenced is => route.controller(app);
here is the code:
var express = require('express');
var logger = require('morgan');
var path = require('path');
var exphbs = require('express-handlebars');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var session = require('express-session');
var cookieParser = require('cookie-parser');
var pg = require('pg');
var bcrypt = require ('bcrypt');
var fs = require('fs');
var app = express();
var db = require('./db.js');
app.listen(3000);
app.engine('handlebars', exphbs({defaultLayout: 'main', extname: 'handlebars'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'handlebars');
//app.use(session({ secret: 'app', cookie: { maxAge: 60000 }}));
app.use(session({
secret: 'app',
resave: true,
saveUninitialized: true
}));
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static('public'));
app.use(logger('dev'));
// look in url encoded POST bodies and delete it
app.use(methodOverride(function(req, res) {
if (req.body && typeof req.body === 'object' && '_method' in req.body) {
var method = req.body._method;
delete req.body._method;
return method;
}
}));
//says look in the controllers folder for these routes
// dynamically include routes (Controller)
fs.readdirSync('./controllers').forEach(function (file) {
if(file.substr(-3) == '.js') {
route = require('./controllers/' + file);
route.controller(app); ///// <================= error =======
}
});
////check if session does not exist
app.get('/', function (req, res) {
if(!req.session.name) {
res.redirect('/loginform');
} else {
res.send("WELCOME BACK" + req.session.name);
}
});
///////renders login form if not logged in
app.get('/loginform', function (req, res) {
res.render('login');
});
///authenticates a login
app.post('/login', function (req, res){
db.findByColumn('users', 'username', req.body.name, function (data){
console.log(data);
bcrypt.compare(req.body.password, data[0].password_digest, function (err, result){
res.session.currentUser = req.body.name;
res.send('You\'re logged in '+ req.body.name + ' Be kind.');
});
res.redirect('/home');
});
});
///render home page once logged in
app.get('/home', function (req, res){
res.render('home');
});
//////register form
app.get('/register', function (req, res){
res.render('register');
});
After spending a bunch of time trying to figure out why I was getting the error, I moved it back into the server file. But I still got the error. So I deleted the users_controller.js file (making the controllers folder empty again), and everything worked again! So it seems the minute I put a file in the controllers folder, even an empty file, my code breaks. Hmmm.
My guess it that since fs is telling my server to look in the controllers folder for it's routes, as long as there are no files in there, it will look back to server.js for routes. But if there are, it looks there first (is this correct logic?). With that said, I have a couple questions:
1) Why is it breaking when I throw these routes in what 'seems' like the appropriate place, a controller file inside the controllers folder? After all, the controllers folder is where the routes SHOULD be coming from, right?
Once this all sorted out...
2) Best Practice: I figured the forms are dealing with users so I would put them in the user controller - but would it be better practice to make a forms_controller.js?
All input is appreciated ;)

There was an underscore in my filename (forms_controller.js) that was throwing the error.

Related

Express server middleware execute twice?

After trying to log some data on index file. I found my express server execute twice. Why do i get this error/bug?
Running Node 12.13.0 LTS, Express 4.17.1 and latest packages versions by the date of this post. I’ve tried on commenting some parts of code and always seem to end up running twice.
My app.js code:
const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const path = require('path');
const bodyParser = require('body-parser');
const favicon = require('serve-favicon');
const app = express();
// ENV Variables
require('dotenv').config();
const PORT = process.env.PORT;
// Authentication Packages
const session = require('express-session');
const passport = require('passport');
// Middlewares
app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.json());
app.use(session({
secret: 'GBR6N7^?5Xx-Ldqxf&*-Hv$',
resave: false,
saveUninitialized: false,
//cookie: { secure: true }
}));
app.use(passport.initialize());
app.use(passport.session());
// View Engine
app.use(expressLayouts);
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// Routes
app.use('/', require('./routes/index'));
// Controllers
app.use('/profile', require('./routes/profile'));
app.use('/products', require('./routes/products'));
app.use('/bookmarks', require('./routes/bookmarks'));
// Catch 404
app.use((req, res) => {
res.render('pages/404');
});
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
and my index.js code:
const express = require('express');
const router = express.Router();
// Official pages
router.get('/', (req, res) => {
// THIS IS THE CODE I GET TWICE ON CONSOLE
console.log(req.user);
console.log(req.isAuthenticated());
// THIS IS THE CODE I GET TWICE ON CONSOLE
res.render('pages/index');
});
router.get('/about', (req, res) => {
res.render('pages/about');
});
router.get('/features', (req, res) => {
res.render('pages/features');
});
// Footer pages
router.get('/terms', (req, res) => {
res.render('pages/terms');
});
router.get('/refunds', (req, res) => {
res.render('pages/refunds');
});
module.exports = router;
Also i have those two functions on my profile.js (for passport.js):
passport.serializeUser((userId, done) => {
done(null, userId);
});
passport.deserializeUser((userId, done) => {
done(null, userId);
});
I get those results twice:
console.log(req.user);
console.log(req.isAuthenticated());
Output (Executed twice!):
undefined
false
undefined
false
and I expect one:
undefined
false
Due to how Express routing works, the path / will match / and /about and /favicon.ico etc. This is because Express supports not just endpoint routing but also path mounting. In other words, express supports things like this:
const app = express();
const route = express.Router();
route.get('/world', (req, res) => { res.send('hello') });
app.get('/hello', route); // mounts world to hello
// so we can access /hello/world
In order to support the feature above, express needs to interpret paths such as /hello to mean both /hello and /hello/anything/else. It needs to treat it as both the endpoint and potentially just a path leading to an endpoint.
This means that if you have a path:
app.get('/', () => {});
It will also trigger if the browser requests /favicon.ico. And browsers request favicon.ico to draw the tiny icon in the browser tab. This is why your route is triggered twice.
A few things to keep in mind when writing Express routes/controllers:
Make sure that the / path is last because otherwise it will also respond to requests to all your other paths.
If you are using express.static() make sure it is set up before the / path. Yes, the first rule above should also cover this but I see this issue often enough that it merits its own point.
In your case you can possibly fix the issue by simply creating a favicon.ico icon and saving it in the static (public) folder.

All pages return the same content with OVH Cloud Hosting

I've recently completed a Node.js website locally, which works fine, though I have noticed some issues when uploading the website online to OVH Cloud Web Hosting. All pages, even those that should not exist, return the contents of the homepage.
I'm running Express with Node.js, and the file structure was created with express-generator. My app.js file contains the following:
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 Handlebars = require('handlebars');
var HandlebarsIntl = require('handlebars-intl');
var mongoose = require('mongoose');
var indexRouter = require('./routes/index');
var blogRouter = require('./routes/blog');
var blogItemRouter = require('./routes/blog-item');
var portfolioRouter = require('./routes/portfolio');
var contactRouter = require('./routes/contact');
var iBlogPostsRouter = require('./routes/i/blog-posts');
var iContactRouter = require('./routes/i/contact');
var iPortfolioItemsRouter = require('./routes/i/portfolio-items');
var portfolioItemRouter = require('./routes/portfolio-item');
HandlebarsIntl.registerWith(Handlebars);
var app = express();
// view engine setup
app.engine('.hbs', expressHbs({defaultLayout: 'layout', extname: '.hbs'}));
app.set('view engine', '.hbs');
app.disable('etag');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/blog', blogRouter);
app.use('/blog/:title', blogItemRouter);
app.use('/portfolio', portfolioRouter);
app.use('/contact', contactRouter);
app.use('/i/blog-posts', iBlogPostsRouter);
app.use('/i/contact', iContactRouter);
app.use('/i/portfolio-items', iPortfolioItemsRouter);
app.use('/portfolio/:title', portfolioItemRouter);
// 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) {
res.status(err.status || 500);
res.render('error', {title: err.status + ' ' + err.message});
});
module.exports = app;
All of the routers have the same code, except render a different template. Here is an example of the indexRouter:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'About', about: true });
});
module.exports = router;
The issue is that every page, even my .js and .css files, returns the HTML from whatever is in the app.use('/' ...) router. The console returns the following error:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://xxx.co.uk/core/styles/m.css".
I experimented with this by changing the homepage to be my contact page, which has resulted in every URL returning the contact page. My CSS and JavaScript are in a public folder. The only thing that I can think of is that the '/' route is somehow being used for every single request, but it doesn't make any sense to me why this could be happening.
Instead of using app.use('/<route>', <router>) in your project, try replacing it with the corresponding express statements, e.g,
router.<route_method>('/<route>', function(req, res, next){
// code
});
See if it works fine or not.
The reason your site is defaulting to the '/' route is because you haven't properly set up your routes. Each router module needs to know what is getting exported. Your indexRouter file, for example, needs to look like this:
var express = require('express');
var router = express.Router;
router.get('/', function(req, res){
res.render('index', { title: 'About', about: true });
});
module.exports = router; <<----
In addition, if the app.js you're showing as of 09/04/2018 06:36 is the complete app.js, you're missing a lot. You have a minimized CSS as your first stylesheet, which actually contains the rendered index.html.

NodeJS parse middleware to Controller/Route

I'm starting now with NodeJS and I'm having a problem accessing some functions in controllers with express.
Example:
My server.js:
var express = require('express');
var consign = require('consign');
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var Recaptcha = require('express-recaptcha');
var recaptcha = new Recaptcha('blablabla', 'blablabla');
var app = express();
app.set('view engine', 'ejs');
app.set('views', 'app/views');
app.use(express.static('./app/public'));
consign()
.include('./app/routes')
.then('./app/models')
.then('./app/controllers')
.into(app);
module.exports = app;
app.listen(3000, function () {
console.log('Server ON');
});
My app/routes/home.js route:
module.exports = function (myapp) {
myapp.get('/site', recaptcha.middleware.render, function (req, res) {
myapp.app.controllers.home.pagina(myapp, req, res, {title: 'Cadastre-se', url: req.originalUrl, captcha: res.recaptcha});
});
};
My app/controllers/home.js controller:
module.exports.pagina = function (myapp, req, res, page) {
res.render("index", page);
};
You are returning the error:
ReferenceError: recaptcha is not defined at Function.module.exports (/Users/User/NodeJS_projects/myapp/app/routes/home.js:2)
If I call the middleware in the server.js file as follows:
...ss.static('./app/public'));
app.use(recaptcha());
consign()...
Returns the following error:
TypeError: recaptcha is not a function
How to solve this problem? Or, what would be the correct way to pass a middleware to controllers or routes?
There are a couple of issues. One, if you look at the documentation for the express-recaptcha module here, you need to parse the request body for this module to work. To do this you need the body-parser module, which you correctly have, but you also need to add the middleware:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
You can add this right after defining app in your server.js file. Then, you do not have recaptcha defined in your home.js file. You can move the following definition from server.js to home.js:
var Recaptcha = require('express-recaptcha');
var recaptcha = new Recaptcha('blablabla', 'blablabla');
Also, you added app.use(recaptcha()); to your server.js file. recaptcha is not a function itself. It contains two middleware functions, one for rendering the widget (recaptcha.middleware.render) and the other for verifying the response from the widget (recaptcha.middleware.verify). These should be added to specific routes that are in charge of rendering and verification. I think if you look at the link I provided, it will be helpful.

Why req.session set in one route, not available in another route call?

I am using Express "express": "~4.13.1" and "express-session": "^1.11.3".
I have set my server like this :
app.js :
var express = require('express');
var session = require('express-session');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var routes = require('./routes/index');
var users = require('./routes/users');
app = express();
// view engine setup
var engines = require('consolidate');
app.set('views', path.join(__dirname, 'views'));
app.engine('html', engines.mustache);
app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//Using express-session in app with secret key
app.use(session({
secret: 'mapdcs',
resave: true,
saveUninitialized: true,
cookie: {
path: '/',
httpOnly: true,
secure: false,
maxAge: null
}
}));
app.use('/', routes);
app.use('/api/users', users);
index.js :
// First call
router.post('/adduser', function(req, res, next) {
req.session.username = red.body.username;
req.session.save();
console.log('>>Session data From Add users');
console.log(req.session); //I got the username session here
}
// Second call
router.post('/check_auth', function(req, res, next) {
console.log('>> Session data From check_auth');
console.log(req.session); //Am not getting session here.
}
Am trying to solve this issue since last two days. Can any one help in this please. Thanks in advance.
You seem to have missing closing brackets ')' after the router calls, but I don't think that's the main issue. It has something to do with the request not sending a response / terminating correctly.
If you change the console.log(req.session)'s to something that sends a response e.g res.json(req.session), the second call works - see below for an example:
router.post('/adduser', function(req, res, next) {
req.session.username = red.body.username;
req.session.save();
console.log('>>Session data From Add users');
// changed console.log to res.json
res.json(req.session)
}); // Added the final closing bracket to router.post
// Second call
router.post('/check_auth', function(req, res, next) {
console.log('>> Session data From check_auth');
// Changed the second console.log to res.json
res.json(req.session);
}) // Added another closing bracket
Hope this helps!
Edit: You could also just use res.end(), res.send() or res.render() - anything that generates a response - see the Express response docs.
I changed the axios call and set withCredential to true to solve the problem.

how do i fix routes to find views inside subfolders in node.js

i am trying to create a route for localhost:port/admin/
and i want to keep the routes.js files and view.js files in matching folders so i wont have too much spaggeti later on
but i keep getting: 500 Error: Failed to lookup view "/admin/manage_subjects"
for trying to create a new route and using same folders few the same
i have the following view folder with express
mainapp(root)
routes(folder)
admin(folder)
index.js(nested inside admin)
index.js(nested inside routes)
views(folder)
admin(folder)
admin_layout.jade(nested inside admin)
manage_subjects.jade(nested inside admin)
index.jade(nested inside views)
layout.jade(nested inside views)
code:
routes/admin/index.js
exports.index = function (req, res) {
res.render('manage_subjects',{title:'Express'});}
views/admin/manage_subjects.jade
extends admin_layout
block content
h1 = title
p Welcome to #{title}
my app.js code
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, admin_routes = require('./routes/admin/')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, repository = new (require('./domain_model/repository'))();
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
//fill local subjects
repository.subjects.GetAll(function (err, data) {
if (err) throw err;
app.locals.subjects = data;
});
//append routes
app.get('/', routes.index);
app.get('/admin', admin_routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on http://localhost:' + app.get('port'));
});
I've been dealing with what I think is the same problem and figured out how to fix it. So in case someone else comes across this problem I'm posting my solution.
So here is what I had that was causing 404's and 500's
app.js
var routes = require('./routes/index');
var admin = require('./routes/admin');
app.use('/', routes);
app.use('/admin', admin);
and here was my routes/index.js
//append routes
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('index', {title: 'Express'});
});
module.exports = router;
and my routes/admin.js:
var express = require('express');
var router = express.Router();
router.get('/admin', function(req, res) {
res.render('admin/index', {title: 'Express'});
});
module.exports = router;
by defining the second /admin inside the router.get() function I think I was effectively telling node to look for the html in my views folder under the following path views/admin/admin/index.ejs. So to fix that all I had to do was remove either the /admin from the router.get() or the /admin from the app.use()
So my working code now looks like this:
app.js
var routes = require('./routes/index');
var admin = require('./routes/admin');
app.use('/', routes);
app.use('/admin', admin); //I left the /admin here and instead removed the one in routes/admin.js
and here was my routes/index.js
//append routes
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('index', {title: 'Express'});
});
module.exports = router;
and my routes/admin.js:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) { //NOTICE THE CHANGE HERE
res.render('admin/index', {title: 'Express'});
});
module.exports = router;
So making that change made it so I could have sub folders in my views folder.
Simple Answer for sub-folders inside the views folder (mine is called frontend)
click here the picture to see the folder structure
file app.js
app.set('views', [path.join(__dirname, 'frontend'), path.join(__dirname, 'frontend/locked'), path.join(__dirname, 'frontend/template'), path.join(__dirname, 'frontend/public')]);
app.set('view engine', 'pug')
I'd check out TJ's video on Modular apps on his vimeo the best part about this work flow is your code becomes really flexible and it's alot easier to stay DRY.
Additionally I would do something like this with my app.set("views")
var path = require("path");
app.set('views', path.join(__dirname, 'views'));
// you can then extend this to the example for routes
Another alternative would be something like in your app.js file:
var express require("express")
var app = express()
var routes = require("./path/to/routes")(app)
and then routes would look like:
routes = function (app) {
app.get("/route", middleWareifYou.gotIt, route.handler || function (req, res) {
res.send("some msg");
});
};
module.exports = routes
Cheers, I hope this helps!
I had a similar problem and what worked for me was setting the views folder in both the main app file and in the router file too.
So in the main app.js file I had:
app.set('views', viewsFolderPath);
And inside my router.js file I also did the same thing:
app.set('views', viewsFolderPath);

Resources