Express Basics — Part 2

In this tutorial, we will cover how to render HTML and read data from the client.

Following on from Part 1:

First, we need to tell the app we wrote in part 1 that we want to render HTML and how we want to render it. My preferred engine is called Hogan Express, which is based on handlebars and I think offers the simplest method of injecting data into the page.

We’ll add Hogan Express as a dependency, add this to app.js just after we require Express:

const hoganExpress = require('hogan-express');

To tell Express that we would like to render HTML, we need to add the following line just after we declared the variable app:

app.set('view engine', 'html');

This is fairly self explanatory, We’re telling express that the view engine we want to use is HTML.

Next we need to tell Express that the view engine should use Hogan Express, to do this, we will add the following line just after the previous one:

app.engine('html', hoganExpress);

Again, it’s pretty straightforward. If you were to use another engine such as Jade you would instead replace Hogan Express with Jade.

Next we will move away from our app.js and create a directory in our project directory called views, then create a file in that directory called form.html.

In form.html, we will add some basic HTML for a simple submit form. Like so:

<form action="/form" method="post">
Enter your name:<br>
<input type="text" name="name" value="John Doe"><br>
<input type="submit" value="Submit">
</form>

Notice the action, we will be adding this route later on. This form will prompt the user to enter their name, then it will POST the data to the route specified in the action. Save this file and let’s move back to app.js.

To show this HTML to the client, we will create a new GET route, similar to the route we made in Part 1. Add the following after the original GET route from Part 1:

app.get('/form', function(req, res) {
});

Similar to the method from Part 1, when a GET request is made to the route /form, we will do something. In this case, we’re going to render some HTML. Achieving this is as simple as calling res.render within the above route. Add the following to the above route:

res.render('form');

This will take the form.html file from our views directory and send it to the client. Once you have done this, save your work and install the dependency we added like so:

yarn add hogan-express

Now run your project, browse to http://localhost:3000/form and you should see the form.

Submitting the form won’t work, we will need to add a POST route to our project. This is similar to a GET route, so add the following after the previous route we added:

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

To access the data sent by the client, we can use req.body. This variable contains all of the form data sent in the request body. We’re going to send a message back to the client, saying hello to the name they supplied. Add the following to the POST route above:

res.send("Hello " + req.body.name + ".");

So we’re taking the req.body data and using the name field we sent from the client and sending that back in a string.

Now run your code and… it doesn’t work.

Express won’t listen for request data automatically, we need to tell it to do this and to give it us in a format we can use. For this, we’ll be using a package called BodyParser. Add the following dependency after Hogan Express:

const bodyParser = require('body-parser');

And the following line after we tell the view engine to use Hogan Express:

app.use(bodyParser.urlencoded({ extended: true }));

Essentially, this line will get any incoming data, uncompress it if needed and let us use it via req.body.

Now install Body Parser with yarn:

yarn add body-parser

app.js should look something like this:

const express = require('express');
const hoganExpress = require('hogan-express');
const bodyParser = require('body-parser');
const app = express();

app.set('view engine', 'html');
app.engine('html', hoganExpress);
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', function (req, res) {
res.send('Hello World!');
});

app.get('/form', function(req, res) {
res.render('form');
});

app.post('/form', function(req, res) {
res.send("Hello " + req.body.name + ".");
});

app.listen(3000, function () {
console.log('App listening.')
});

Run the project again, and it should work.

Some food for thought: When sending the data back to the client we created the string like so: “Hello “ + req.body.name + “.”. A more modern way to do this would be: `Hello ${req.body.name}.` The back-ticks are important. Just something to keep in mind, as future tutorials will use this syntax.

In Part 3 we will look at layout wrappers for our app and rendering data with our HTML.