Node.js / Express / Jade POST form 404s

So, I'm new to Javascript (and coding in general). To suppliment my education on Javascript, I thought I'd fool around with Node.js. Thinking I'd need a project I thought that I'd try to make a Dungeons & Dragons character creator. There are some out there already, but I'm needing a project, right?

So I made a form that takes the character name, and then instead of putting it to the console and/or displaying it on the page, I get a 404. I must be botching something simple here, so after a couple hours of trying to figure out what has to be a simple thing by myself and doing lots of search engine work, I thought I'd take it to the community.

Right now I have the base framework that you get from:

express --css myapp

Nothing fancy added. Here is my app.js (note the final lines with app.post:

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();

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

// uncomment after placing your favicon in /public
//app.use(favicon(__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')));

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

// error handlers

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

module.exports = app;

app.post('/', function(req, res) {
    console.log(req.body);
    console.log('Character: ' + req.body.charactername);
    res.send('Character Name: ' + req.body.charactername);
});

And finally, my jade file with the form.

extends layout

block content
  h1= title
  p Welcome to #{title}
  form(method='post',action='/')
    input(type='text',name='charactername')
    input(type='submit')

Like I said, it is certainly something simple, but it's been driving me nuts and I can't seem to find that one document, webpage, howto, or tutorial that explains what I'm doing wrong here.

app.post('/', function(req, res) {}); is after your 404 error handling route. Move it so that it is before:

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

This will work as long as there is nothing conflicting in your other routes (app.use('/', routes)).