TIL/2021–01–20

Day 40: Treehouse Full Stack JavaScript Techdegree

Today I learned about Express.

Express is a web framework for node.js that allows you to rapidly build dynamic web applications

Web framework

• A web framework is a set of software tools used to create dynamic web applications

Web applications have a lot of commonalities between them. Commonalities in software are called patterns

Patterns

• Solutions for common problems in software

Web framework tools

• Templating for dynamic layouts and content
• URL mapping / routing
• User input processing

Benefits of using a web framework

• Write applications faster
• Focus on business logic (differences between your application with others is called business logic)
• Understanding other codebases
• Collaborate with other developers

Similar web frameworks

• express/node.js
• flask/python
• spark/java
• sinatra/ruby

— — —

On the terminal

mkdir flashcards

cd flashcards

npm init -y (initialize node applications, -y accepts all default options)

npm install express@4.15.2 — save

To open on visual studio code

code app.js (on vsc add cmd + shift + p and add “shell command” and press enter and it should be good to enter code app.js on the terminal to open vsc)

And on app.js on vsc

const express = require(“express”);

— — -

In order to use the node modules in a file, they need to be required using the require method

To start a node project in a directory without a package.json file, run npm init-y

What is a word for solutions to common problems in software? Patterns

— —

Creating a server in express

Express sets up a server — a server is a program that runs on a remote computer

• Its job is to wait for http requests from clients
• The browser is making a request to the server at the URL you typed in
• When the browser or client makes an http request to the server, the server puts together a response and sends it back to the browser

To create an express application we just have to call express();

The express function returns an express application

The app is the central part of our application and we will extend it with routes, middleware, etc

const express = require(“express”);

const app = express();

First thing we have to do is set up a development server. For this we have to call the listen method. We can give it one parameter, the port, which is 3000

const express = require(“express”);

const app = express();

app.listen(3000);

This code will create a server

On the terminal we will run this so we can start the app. The prompt is gone because the server is busy listening for requests.

And on our browser: this is a good sign because we can see that express is running and it is sending a response. The error is happening because we haven’t told express how to respond to requests yet.

— — —

Creating route with express

Express handles requests through routes that we can handle on the app

A route is just like a url:

teamtreehouse.com/about

teamtreehouse.com/home

teamtreehouse.com/profile

User perspective: It is called a route because it is the path a user takes to access data on a server

Application’s perspective: a route, also called an end point, is a command to run a specific function — which in return sends a response back to a client

GET request: asking to view or get a webpage

The client sends a get request to the server

The URL tells the server what to get for the client

A server responds to a get request by sending information off on a web page

But the browser can also send information

This is where the POST request comes in.

When typing out forms, a client sends the values of the form and the server receives them and processes those values in some way.

What happens when I client makes a request to a route that the server isn’t set up to respond to

Going back to our project, we have this. This is happening because express doesn’t know what to do with the request that we sent. So, we have to instruct it on what to do. We have to create a route

The get method is used to handle the get requests of a certain URL

We are going to create a root route (the starting route of when you visit a website), to indicate a root route we use the / as the first parameter/ location parameter

First parameter of the get function is the location parameter, and the next or second parameter is a callback function

The second parameter will have two arguments (request, response)

The callback will run when the client requests that route

We will use the response’s send method — the send method sends a string to the client

const express = require(“express”);

const app = express();

app.get(“/”, (request, response) => {

response.send(“I love Team Treehouse!!”);

});

app.listen(3000);

And this is what we get

— —

app.listen method takes a parameter, which will tell the server which port to serve the application on

In express the convention for creating a new application is to assign it to the variable app

The get method takes two parameters: location parameter/path and callback function which takes on request and response

A route is where a server is set up to respond to a request from a client

The get method registers a route that will listen for HTTP GET requests at a given route

— — -

Adding multiple routes to the app

const express = require(“express”);

const app = express();

app.get(“/”, (req, res) => {

res.send(“<h1>I love Team Treehouse!!</h1>”);

});

app.listen(3000);

We can also render html tags in the res.send()

In the terminal, we have no idea about what’s going on

So, in our listen method we can add a callback that would tell us what is going on

Now when nodemon restarts the server this is what we get

Let’s add one more route to see what it looks like

const express = require(“express”);

const app = express();

app.get(“/”, (req, res) => {

res.send(“<h1>I love Team Treehouse!!</h1>”);

});

app.get(“/home”, (req, res) => {

res.send(“<h1> Hello, Renzo! You are now in the home screen </h1>”);

});

app.listen(3000, () => {

console.log(“The application is running on localhost:3000”);

});

And we now have two routes

And if we go back to the root route: