title: Keep getting a 404 error using nodejs and express
body: <p>I'm trying to collect data from a webpage (registration form that collects user info) running on local host but when I press the submit button, I get a </p>
  
  <blockquote>
    <p>404 Error: page not found and the data from the form isn't being collected and outputted.</p>
  </blockquote>
  
  <p>I'm using webstorm with <code>node.js</code> and express and I wanted the user input from the registration page to be collected and parsed using body-parser. A lot of this code was already in the premade Nodejs Express App project. </p>
  
  <p>This is my <strong>app.js</strong> file:</p>
  
  <pre><code>var express = require('express');
  var path = require('path');
  var logger = require('morgan');
  var cookieParser = require('cookie-parser');
  var bodyParser = require('body-parser');
  
  var index = require('./routes/index');
  var registration = require('./routes/registration');
  
  var app = express();
  var urlencodedParser = bodyParser.urlencoded({ extended: true });
  
  module.exports = app;
  
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'ejs');
  
  app.use(logger('dev'));
  app.use(bodyParser.json());
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.use('/', index);
  app.use('/registration', registration);
  
  // 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 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');
  });
  
  app.get('/', function(req, res) {
    res.render('index');
  });
  
  app.get('/registration', function(req, res) {
    res.render('registration', {qs: req.query});
  });
  
  app.post('/registration', urlencodedParser, function(req, res) {
    console.log(req.body);
    res.render('registration', {qs: req.query});
  });     
  </code></pre>
  
  <p>I'm able to see the form on the webpage while the server is running and I can input information but when I hit the submit button, it goes to the <code>404 error: page not found</code> and the information isn't printed to my console log. </p>
  
  <p>I'm not sure what the problem is because before I added the <code>app.get</code> lines, I was able to input information and submit the form (though it didn't do anything - just refreshed to a new blank form).</p>
  
  <p>I followed this tutorial: <a href="https://www.youtube.com/watch?v=rin7gb9kdpk&amp;t=137s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=rin7gb9kdpk&amp;t=137s</a></p>
  
  <p>This is a portion of the html file:</p>
  
  <pre><code>&lt;form id="registration-info" method="POST" action="/registration"&gt;
  &lt;div class="container"&gt;
      &lt;div class="py-5 text-center”&gt;
          &lt;h2&gt;Registration Form&lt;/h2&gt;
  
      &lt;div class="row justify-content-center"&gt;
  
          &lt;div class="col-md-8 order-md-1"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6 mb-3"&gt;
                      &lt;label for="firstName"&gt;First name&lt;/label&gt;
                      &lt;input type="text" class="form-control" value="" required&gt;
                      &lt;div class="invalid-feedback"&gt;
                          Valid first name is required.
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6 mb-3"&gt;
                      &lt;label for="lastName"&gt;Last name&lt;/label&gt;
                      &lt;input type="text" class="form-control" value="" required&gt;
                      &lt;div class="invalid-feedback"&gt;
                          Valid last name is required.
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-5 mb-3"&gt;
                      &lt;label for="birthmonth"&gt;Birthday&lt;/label&gt;
                      &lt;select class="custom-select d-block w-100" required&gt;
                          &lt;option value=""&gt;Month&lt;/option&gt;
                          &lt;option&gt;January&lt;/option&gt;
                          &lt;option&gt;February&lt;/option&gt;
                          &lt;option&gt;March&lt;/option&gt;
                          &lt;option&gt;April&lt;/option&gt;
                          &lt;option&gt;May&lt;/option&gt;
                          &lt;option&gt;June&lt;/option&gt;
                          &lt;option&gt;July&lt;/option&gt;
                          &lt;option&gt;August&lt;/option&gt;
                          &lt;option&gt;September&lt;/option&gt;
                          &lt;option&gt;October&lt;/option&gt;
                          &lt;option&gt;November&lt;/option&gt;
                          &lt;option&gt;December&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;div class="invalid-feedback"&gt;
                          Please select a valid month.
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-4 mb-3"&gt;
                      &lt;label for="birthday"&gt;Day&lt;/label&gt;
                      &lt;input type="text" class="form-control" required&gt;
                      &lt;div class="invalid-feedback"&gt;
                          Day is required.
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="col-md-3 mb-3"&gt;
                      &lt;label for="birthyear"&gt;Year&lt;/label&gt;
                      &lt;input type="text" class="form-control" required&gt;
                      &lt;div class="invalid-feedback"&gt;
                          Year is required.
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="mb-3"&gt;
                  &lt;label for="password"&gt;Password&lt;/label&gt;
                  &lt;input type="password" class="form-control" &gt;
                  &lt;div class="invalid-feedback"&gt;
                      Please enter a password.
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;hr class="mb-4"&gt;
              &lt;button class="btn btn-primary btn-lg btn-block" type="submit"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>