Express Flashcards
What is Express?
A node package which is a framework. Helps get servers up and running. We install it and it gives us methods and different plugins we can use to build web apps and apis.
Some stuff it does: Starts up server to listen to requests, parse incoming requests, match those requests to particular routes, craft our http response and associated content.
Listens to incoming requests, what are they searching for/que/form data they’re submitting/username and password, etc., (often check info against a database or save something to a database), build a response and send that back to client.
What are the differences between a library and a framework?
Libraries and frameworks are codes that others have made for us and we download or include as a script.
A library is something you can integrate into code at any point. You decide when and how to use it, like axios.
A framework typically invert flow so framework is providing structure for application and you are participating in it and abiding by the rules. Frameworks help us build an application while libraries are more single use like http request or changing color of terminal request.
Framework is more so for creating large web applications, making games, making ios applications, etc.
How would you get a server up and running? (We don’t send back a response. Includes .listen and .use)
First you require express
const express = require('express');
Then in next line we're going to execute express as a function.
const app = express(). Don't have to call this app and in the first line you don't need to call it express(Not the function, that must be express()) but that's used in the docs frequently.
The method called .listen() needs to have a port it’s going to listen on
app.listen(3000, () => {
console.log(“Listening on Port 3000”)
})
This is only served locally on our machine. We can get requests but can’t be requested at this point. We can view this by going to localhost:3000 on our machine. We’ll currently get a error because we don’t respond with any content. Code will print out but our goal is to have an incoming request get an outgoing response.
After the const app = express() add a
app.use(() => { console.log("We got a new request.")})
This takes a callback and the way this works is that anytime we have an incoming request, this callback will run. It doesn’t matter where the request is going to, all requests coming in will trigger the callback function to run. We need to restart server anytime we change our code so in terminal just do ^C to get out and just do your node index.js to open.
All in all the recipe is npm install express, require it,, execute it, save it to variable called app, and then we call methods on that app including listen which is what starts the server. We’ve registered that there is a request which is what our use does but we’re not responding to the request.
When we’re responding to a request to our server, what does the res object/argument do? This is one part and the second paramter, res, is its own question.
Express makes two important objects for us on every incoming request, we have access to 2 different parameters in this function that are automatically passed in. The first one is an object that represents incoming request and second is a object representing outgoing response. We can name them whatever we want but we’ll mostly see req, res. There are objects made by express and passed in to this callback. Express creates this javascript object for us by parsing incoming http request info and passing it in as first argument of callback.
app.use((req, res) => { console.log(“We got a new request.”)})
2nd part to question. We’ve looked at req object/argument. What is the res object/argument and what does it do?
Has methods on it including res.send. Whatever we put in will be the response.
app.use((req, res) => { console.log(“We got a new request.”)
res.send(“Hello, we got your request! This is a response”)
})
res.send is going to send out and generate an http response and this is express doing it for us. We can also send an object instead of a string. Can also respond with a string that contains html.
req is an object created by express based upon the incoming http request, response is an object with a bunch of methods on it including res.send which we use to send back content.
What is routing? What does .get do?
Taking incoming requests and a path that is requested and matching that to some code and a response.
A path could be /dogs, /search, / anything really. We are routing some incoming request to some outgoing response.
App.get expects a path that we are matching and then a callback function. This will run whenever a request comes in matching /cats.
app.get(‘/cats’, (req, res) => {console.log(“Cat request!”)})
app.use matches what?
Every single request regardless.
How does * work?
It’ll match to everything which is why it goes at the bottom if we use it. If we use it before then it’ll match to everything like the /dogs page and it doesn’t matter if it’s defined below. Only one response is given. It is an app.get so we could still request app.post.
app.get(‘*’, (req, res) => {console.log(“I don’t know that path!”)})
He brings up the example of how we wouldn’t manually do routes for many /r/ whatever. How would we do it? Also includes taking out the params value.
Path variables. Defining a pattern, not an exact match.
Define a generic pattern. In express we create a route and inside of the path string we use a colon to designate something as a path variable.
app.get(‘/r/:subreddit’, (req, res) => {res.send(‘This is a subreddit’)})
Now if we go to our browser and do localhost:3000/r/cats or /r/puppies we’ll get the string above.
Now what if we wanted to say welcome to the cats subreddit or dogs subreddit? We need access to that and it’s in the request object. Express adds property params.
console.log(req.params). in the node console we’d see subreddit equal to the string cats. If we were trying to access /r/dogs in our browser, the subreddit would be dogs. We can extract that and in his example he uses destructuring.
const { subreddit } = req.params;
res.send(<h1>Browsing the ${subreddit} subreddit.</h1>)
So whatever that string is that we’re matching, we’ll extract that from req.params and then we’ll send back a h1.
What are query strings?
portion of the url that comes after a question mark and we can include info in key value pairs as part of this query string. Often applications are set up so that they are expecting something in the query string. So parsing the query string and having access to it in an express app is important.
If we define some route we do not add anything to the path (ex. /r/aksdj) in terms of matching a query string or looking for a query string.
Instead, the request object that express constructs for us and passes in to our callback has a property called query. In that property we’ll find key value pairs based upon the query string.
app.get(‘/search’, (req, res) => {console.log(req.query)} This query starts off as empty.
How do we stop a server?
D^C
What is templating?
Kind of like madlibs. Templating allows us to define a preset pattern for a webpage that we can dynamically modify.
Rather than writing static html code that’s always the same, we could embed info and logic. So we can repeat parts of a template over and over with a loop for example, we can conditionally hide or show something like log in/sign up.
End goal is to combine some form of logic with creating html responses.
