As developers, we use all sorts of frameworks to speed up the process of building web applications, reducing time spent on writing repetitive code. Express is one such handy framework.

Per the Express JS website, it is a "fast, unopinionated, minimalist web framework for Node.js."

I like the sound of that!

Here's what The Net Ninja has taught me about it.

What is Express?

Express is a web application framework for Node.js that has several benefits, including:

• easy and flexible routing system
• integrates with many templating engines
• contains its own middleware modules for additional functionalities on requests and responses
• easily serve static files and resources of the application
• easily connect with databases

Installation

To install Express, run the following in the terminal (assuming we already have Node.js installed):

$ npm install express

Once the installation is complete, let's require the Express module in our main app.js file, set a variable (in this case we will set it as app), and fire express(). We will also need to set up a port, which we can listen to. For our purposes, we'll use the commonly used port 3000.

app.js

// Require the Express module
const express = require('express');

// Fire Express and set it to a variable
const app = express();

// Listen to port 3000
app.listen(3000);

Now we have access to the functionalities offered by Express!

Routing

As we know, we make various HTTP requests to determine how our application responds. The HTTP verbs with the corresponding Express functionalities are as follows:

// GET 
app.get('route', fn);

// POST
app.post('route', fn);

// PUT
app.put('route', fn);

// DELETE
app.delete('route', fn);

Pretty straightforward!

The function that gets passed into the above HTTP request methods take two parameters: a request object and a response object. The response object has a property of send, wherein we can specify what we want to send back.

The following is a very basic example of a GET request for the root path ('/') with a simple string response:

app.get('/', function(request, response) {
  response.send('This is the root page');
});

This, however, is not typically how we would send responses - instead, we would be sending back various files. The response object also has access to a function sendFile() which takes a parameter of the file name we want to respond with.

If we take the example above and instead want to send the actual index.html root file, then we would code it as follows:

app.get('/', function(request, response) {
  response.sendFile(__dirname + '/index.html');
});

Route Parameters

To dynamically access certain parameters in the route, we can use the params property of the request object.

Let's say we are on a Dragon Ball Z website, looking at a directory of Saiyans. We could pass in a parameter of :name to identify which Saiyan's page we want to request, and have access to it through the request object as follows:

app.get('/saiyan/:name', function(request, response) {
  res.send('The Saiyan you are currently viewing is ' + req.params.name);
});

So if our URL is localhost:3000/saiyan/goku, req.params.name will equal goku.

Template Engines

Template engines allow us to use static template files in our application, replacing variables with values at runtime, and making the template into an HTML file that can be sent to and read by the client.

With a JavaScript template engine, we can embed JavaScript code into HTML files, dynamically injecting content.

EJS is one such template engine. It is just like ERB in Ruby (for those of you who may be a Rubyist).

To install the EJS package, run:

$ npm install ejs 

Then we need to let Express know that we want to use EJS as our view engine:

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

By default, when making a request for views/templates, EJS will look in the views folder, so we will need to create this directory and put all views/templates inside here.

All EJS file names must end with .ejs in order for the engine to recognize it.

When we want to respond with an EJS file, we use the render method on the response object, instead of sendFile(). This takes a parameter of the EJS file name, but we can exclude the .ejs part.

Let's say that, instead of sending the index.html file, we are now going to send an index.ejs file (which is inside the views folder). Our code would now look like this:

app.get('/', function(request, response) {
  response.render('index');
});

We can pass data to a view by passing an object as a second parameter to the render() function.

Let's take a prior GET request for a particular Saiyan's web page. In this example, we'll create a data object with properties of level and job. Then, we will call the render() function, passing in the saiyan EJS file (which we will get to in just a second), along with a second parameter of an object:

app.get('/saiyan/:name, function(request, response) {
  const data = {level: 3, job: 'hero', friends: ['Krillin', 'Bulma', 'Muten Roshi']};
  response.render('saiyan', {warrior: req.params.name, data: data});
});

Now let's create a saiyan.ejs file under the views directory. This will look mostly like an HTML file, but wherever we are embedding data, we will use <%= %>:

views/saiyan.ejs

<!DOCTYPE html>
<html>
<head>
  // We won't worry about this section for now
</head>
<body>
  <h1>Saiyan's Name: <%= warrior %></h1>
  <h2>Level: <%= data.level %></h2>
  <h2>Job: <%= data.job %></h2>
</body>
</html>

We can also output JavaScript with data:

  <% data.friends.forEach(friend => { %>
    <li><%= friend %></li>
  <% }); %>

Notice that we are not using the equal sign where we're not actually rendering data.

Partial Views

Partial templates are for parts of a page that can be used across multiple views, such as a navigation bar. The benefits of using partial templates include:

• eliminating repetitive code
• any change that needs to be made only need to be made once in a partial view

Under the views directory, we can create another directory called partials, and in here we can create partial template files (views/partials/navbar.ejs). All we need to do to include a partial template in another view file is to use the following syntax:

<html>
<body>
  // Include the navbar partial template here
  <%-include('partials/navbar.ejs') %>

  // The rest of the body content
</body>
</html>

There's much more to Express, but that's about it for this little introduction. I hope it helps!

Happy coding~~~ 😄

Helpful Link

The Net Ninja's Express tutorial videos