title: How can I render an EJS file when making a POST request on express?
body: <p>My app has the path <code>\</code> which is the homepage (working).</p>
  <p>It also has a <code>poems</code> path where I can see a list of poems (working).</p>
  <p>It also has a <code>poems/new</code> path where I am called to add a new poem (here is where I need help).</p>
  <p>I make a <code>GET</code> request to the path <code>poems/new</code> on localhost: <code>http://localhost:3000/poems/new</code>.</p>
  <p>When the page loads, I can see an input element and a button.</p>
  <p><strong>Desired Behavior</strong></p>
  <p>Once I type in a text, I want to:</p>
  <p>a) properly make the <code>POST</code> request,</p>
  <p>b) visit the <code>poems</code> page and see the user-typed text as the last item of the list of the poems on the <code>poems</code> page.</p>
  <p><strong>Actual Behavior</strong></p>
  <p>The output I see on the terminal is:</p>
  <pre><code>GET /poems/new 200 28.877 ms - 378
  GET /stylesheets/style.css 304 3.242 ms - -
  POST /poems/new 404 35.646 ms - 149
  </code></pre>
  <p>Τhe output I see on the screen is:</p>
  <p><code>Cannot POST /poems/new</code></p>
  <p><strong>App Files</strong></p>
  <p><code>package.json</code>:</p>
  <pre><code>{
    &quot;name&quot;: &quot;poems&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;node ./bin/www&quot;,
      &quot;start-test-server&quot;: &quot;node ./bin/www&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;test-coverage&quot;: &quot;jest --coverage&quot;
    },
    &quot;dependencies&quot;: {
      &quot;cookie-parser&quot;: &quot;~1.4.4&quot;,
      &quot;debug&quot;: &quot;~2.6.9&quot;,
      &quot;dotenv&quot;: &quot;^8.2.0&quot;,
      &quot;ejs&quot;: &quot;~2.6.1&quot;,
      &quot;errorhandler&quot;: &quot;^1.5.1&quot;,
      &quot;express&quot;: &quot;~4.16.1&quot;,
      &quot;morgan&quot;: &quot;~1.9.1&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;jest-puppeteer&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;jest&quot;: &quot;^26.6.3&quot;,
      &quot;jest-puppeteer&quot;: &quot;^4.4.0&quot;,
      &quot;pg&quot;: &quot;^8.5.1&quot;,
      &quot;puppeteer&quot;: &quot;^8.0.0&quot;
    }
  }
  </code></pre>
  <p><code>app.js</code>:</p>
  <pre><code>var errorhandler = require('errorhandler');
  var express = require('express');
  var path = require('path');
  var cookieParser = require('cookie-parser');
  var logger = require('morgan');
  
  var indexRouter = require('./routes/index');
  var poemsRouter = require('./routes/poems')
  
  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(errorhandler());
  
  app.use('/', indexRouter);
  app.use('/poems', poemsRouter);
  
  // error handler
  app.use(function(err, req, res, next) {
    res.locals.message = err.message
    if (process.env.NODE_ENV === 'development') {
      // only use in development
      res.locals.error = err;
    }
    // render the error page
    res.status(err.status || 500);
    res.render('error');
  });
  
  module.exports = app;
  </code></pre>
  <p><code>routes/poems.js</code>:</p>
  <pre><code>var express = require('express');
  var router = express.Router();
  const poem = require('../public/javascripts/poem')
  
  /* GET poems list page. */
  router.get('/', async function(req, res, next) {
    await poem.allPoems((allPoems) =&gt; {
      res.render('poems', { message: allPoems });
    });
  });
  
  /* GET add poem page. */
  router.get('/new', function(req, res, next) {
    let content = req.body;
    console.log(content)
    res.render('addPoem', { message: content });
  });
  
  /* Add a new poem. */
  router.post('/new'), function(req, res, next) {
    const message = req.body.content // not sure if this is even correct
    console.log(message)
   
    res.render('poems') // something like res.render('poems', { message: I_should_put_a_correct_vaiarable_name_here }) should probably happen here
  }
  
  module.exports = router;
  </code></pre>
  <p><code>views/poems.ejs</code>:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel='stylesheet' href='../public/stylesheets/style.css' /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;ul&gt;
        &lt;!-- &lt;%= message %&gt; --&gt;
        &lt;%message.forEach(poem =&gt; {%&gt;
        &lt;li&gt;&lt;%= poem.content %&gt;&lt;/li&gt;
        &lt;% }) %&gt;
      &lt;/ul&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><code>views/addPoem.js</code>:</p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;HTML&gt;
    &lt;head&gt;
      &lt;link rel='stylesheet' href='/stylesheets/style.css' /&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;form action=&quot;/poems/new&quot; method=&quot;post&quot;&gt;
        &lt;!-- &lt;%= message %&gt; --&gt;
        &lt;label for=&quot;content&quot;&gt;&lt;%=message.content%&gt;&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;content&quot; name=&quot;content&quot; value=&quot;&lt;%=   message.content %&gt;&quot;&gt;
        &lt;button type=&quot;submit&quot; value=&quot;add poem&quot;&gt;add poem&lt;/button&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><code>routes/index.js</code>:</p>
  <pre><code>var express = require('express');
  var router = express.Router();
  
  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index', { 
      title: 'Poems',
      message: 'Here you\'ll see poems' });
  });
  
  module.exports = router;
  </code></pre>
  <p><code>views/index.ejs</code>:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt;
      &lt;link rel='stylesheet' href='/stylesheets/style.css' /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;&lt;%= title %&gt;&lt;/h1&gt;
      &lt;p&gt;Welcome to &lt;%= title %&gt;&lt;/p&gt;
      &lt;section id=&quot;poems&quot;&gt; &lt;%= message %&gt; &lt;/section&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><code>views/error.ejs</code>:</p>
  <pre><code>&lt;h1&gt;&lt;%= message %&gt;&lt;/h1&gt;
  &lt;h2&gt;&lt;%= error.status %&gt;&lt;/h2&gt;
  &lt;pre&gt;&lt;%= error.stack %&gt;&lt;/pre&gt;
  </code></pre>
  <p>I'm learning Express at the moment. If there is anything missing and you'd like me to add, please let me know. Also, if I add a link to my project online, I'm not sure how it works. Open to suggestions. Thanks a lot.</p>