App.post from EJS form not working - ExpressJS

Question

I am using the express framework with EJS as the view engine. I have some basic routes ('/' & '/users') in the application. I also have a form in my EJS page which I'm using the users to login. Here I have form with action="/login" and method="POST". And I have created a handler function app.post in the app.js to check credentials and redirect to users page.

But when I click submit button of the page express app saying that "/login" not found. Below is the directory structure of the entire app.

menu.ejs:

    <form method="POST" action="/login">
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <input type="submit" name="login" class="login loginmodal-submit" value="Login">
    </form>

And the 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 session = require('express-session');
var mysql = require('mysql');
var bodyParser = require('body-parser');
var path = require('path');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var loginRouter = require('./routes/login');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

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('/users', usersRouter);
app.use('/login', loginRouter);

// 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');
});

//express session
app.use(session({
  secret:'secret_key',
  resave:true,
  saveUninitialized:true
}));
app.use(bodyParser.urlencoded({
  extended:true
}));
app.use(bodyParser.json());
mysql
var connection = mysql.createConnection({
  host:'localhost',
  user:'root',
  password:'secret_pw',
  database:'my_db'
});

//login authentication
app.post('/login', function(req,res){
  var username = req.body.username;
  var password = req.body.password;
  if(username && password){ 
      connection.query('SELECT username,password FROM logindetails WHERE username = ? AND password = ?',[username,password], function(error,results,fields){
          if(results.length > 0){
              req.session.loggedin = true;
              req.session.username = username;
              res.redirect('/users');
          } else{
              res.send('Incorrect username and password');
          }
          res.end();
      });
  }
   else{
       res.send('Please enter username and password');
       res.end();
   }
});

module.exports = app;

And the login route is

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { page:'home', menuId:'home' });
});



module.exports = router;

Answer 1

Omit this code from app.js

app.post('/login', function(req,res){
   /....../
});

Then add this to login-router

router.post('/', function(req, res) {
  /......../
});

Answer 2

Because your app reach this block below before executing app.post

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

Move the following block below app.post.

Also, you should initialise bodyParser and session before initialising routes.