techLab - 4th Lesson

Springbreak is over!

Today we are gonna explore how to make different types of requests using Express.js.

Express.js is defined as being a Web Framework.

It provides us with a certain number of features for web and mobile applications.

Installation:

Create directory and cd into it.
```
mkdir myapp
cd myapp
```
Use the command npm init to initialize a new npm directory in your project.
Finally, run npm install express --save to install the framework.

Alright, we installed Express. Now, let's see what we can do with it.

The one below is a good example of a server using Express. Let's take a look at the code.

The first three lines request the modules that we are gonna need to run our server.

More specifically:

var express = require('express');

requires our module express, that we installed, in a variable called express.

This is the basement of our app, as we are gonna create a new "app" using it.

var express = require('body-parser');

requires our module body-parser, that we installed, in a variable called bodyParser.

This module literally parses a format called JSON from a simple string to an object, that we return after receiveing a specific request.

var app = express();

this defines our app. This is the starting point of our server.

The following code is a little more specific.

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

With these two lines we are telling our server to use json as a bodyparser and to specifcally refer to only "good" requests, specifically requests that are encoded in UTF-8 only.

Don't worry if this seems a little cryptic as it's just a server improvement but it's not necessary in the understanding of how an Express server works.

  app.use(express.static('public'));

In here, our app uses the directory "public" to server "static" files such as plain html pages. With this we are just make it specific as of where our static files are at.

Now, the interesting part.

As mentioned in the previous lesson a server is based off of endpoints where we make requests and we get responses in return.

What kind of requests can we make?

GET Requests - Requests data from a specified resource
POST Requests - Submits data to be processed to a specified resource

The code:

app.get('/', (req, res) => {
	res.send('Hello Express app');
});

Creates our first GET request. In response to the request we are sending a response back that says "Hello Express App". Pretty straight-forward.

The code:

app.listen(3000, () => console.log('server started'));

Starts our server at port 3000.

What if I wanted to make a `POST` request?

The syntax is pretty similar.

  app.post('/', function (req, res) {
    res.send('POST request to the homepage')
  })

What if I wanted to host my webpage using Express?

Here's a working example. We are using res.render to render the HTML page that has been converted in Jade.

Jade is an elegant templating engine, primarily used for server-side templating in NodeJS.

All done. Did it hurt?

This is what we learnt, so far, today.

What Express is.
How to use it to create our first real server
What a GET request and a POST request are.
How to host our webpage on our server, using Express this time.

Take Away Project 🌮🌮

Create four endpoints (IN YOUR SERVER!) that redirect you to different images. What kind of request should you use? What if we wanted to retrieve the url and the url only?