Learning Express.js
Tags: node, express, backend, intro
Published: 2021-01-04 02:22:46

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](https://expressjs.com/), it is a *"fast, unopinionated, minimalist web framework for Node.js."*

I like the sound of that!

Here's what [The Net Ninja](https://www.thenetninja.co.uk/) 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**
```javascript
// 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: 
 
```javascript
// 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:

```javascript 
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:

```javascript
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:

```javascript
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](https://ejs.co/) 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: 

```javascript
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:

```javascript
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: 

```javascript
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**
```html
<!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: 

```html
  <% 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
<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~~~ :smile: 

# Helpful Link

[The Net Ninja's Express tutorial videos](https://www.youtube.com/watch?v=9TSBKO59u0Y&list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp&index=23)