Express Flashcards
What does CRUD mean? What are the adjacent API calls?
Create, read, update, delete
Post, get, put, delete
How do you create the express app in a server.js file? How do you make it listen on port 3000?
const express = require(“express”)
const app = express()
app.listen(3000)
How would you install the ejs view engine to render html files? How do render it in an express method and pass values to the ejs file? How do you use those values? What should you add to make sure the ejs file does not return an error?
To install ejs:
npm i ejs
Then on your express app in server.js:
app.set(‘view engine’, ‘ejs’)
The html file needs to rename the extension to .ejs instead of .html. Install EJS language support to see syntax highlights (vscode, not sure if it works for other editors). Then to render it in express method, use res.render(“index”).
Note: index.ejs needs to be in a views folder because that is the default path for render.
We can use something like res.render(“index”, { text: “World” }) to send variables to the ejs file, which can be used in the ejs file.
<body>
Hello <%= text %>
<\body>
This will output Hello World because the text variable was “World”.
<body>
Hello <%= locals.text || ‘Default’ %>
<\body>
Using locals.anything will not return an error because locals always exists here. It simply won’t print the variable if the value inside locals hasn’t been defined. “Default” will print instead if that is the case.
</body></body>
How would you send a status and value from an express method? send JSON? send a downloadable file?
res.status(500).send(“hi”)
This will send “hi” and an internal server error status
res.json({ message: “Error” })
res.download(“server.js”)
What npm command creates a general package.json? What do you need to install so you can restart your server easily? What goes in the script section of package.json to make this work?
npm init -y
Creates the package.json file
npm i —save-dev nodemon
To install nodemon
In scripts:
“devStart” : “nodemon server.js”
npm run devStart
This will now restart the server easily whenever you save a file.
How do you install express with node?
npm i express
If you have /users methods for example, what can you do to organize these method calls?
Create a folder called routes and a new file called users.js. Import express, the same as in server.js, except instead of making app with express(), make a router:
const router = express.Router()
router.get(…) will be how we do the functions now. Instead of typing /users as the start of each of these paths, it will be implied, so /new is equivalent to /users/new
At the bottom of the file:
module.exports = router
Back in server.js, import the file:
const userRouter = require(‘./routes/users’)
Then mount the router onto the server.js app:
app.use(‘/users’, userRouter)
Now any API calls that begin with /users will route to the users
If an express method has a route with /:id for example, how do you use the id value in the function?
In a string:
${req.params.id}
Probably works without the brackets and dollar sign when not used in a string. Not sure though.
What do you need to remember about placing dynamic routes?
Always put dynamic routes at the bottom of the file.
If I have a dynamic route of /:id and another static route /new below it, calling /new is still going to use the /:id route and set req.params.id to “new”. That’s because it always picks the first route that matches from top to bottom.
How can you shorten the 4 CRUD methods that map to the route “/:id”?
Instead of using router.get, router.put, etc., do this:
router.route(“/:id”).get(…).put(…).etc….
What does the router.param() function do? How do you use it? What do we call this function?
It allows you to run code whenever a method has a given parameter. So for the 4 CRUD methods that include /:id, calling any of them will run this code.
router.param(“id”, (req, res, next, id) => {
req.user = users[id]
next()
})
This is called middleware. It is code that runs between the start and the end of the request.
Note: you must use the function “next()” to indicate that we should move on to the actual method call. I believe this is the case with all middleware.
What is middleware? What special parameter is unique to these functions that aren’t included in the regular CRUD functions?
Middleware is code that runs between the start of the request and the end of the request. The special parameter used in these function is next(). This indicates that the middleware function is complete and you can move on to the next function.
How do you create a middleware logger? How do you make it run on all requests? Specific request?
This is the custom middleware function you can create:
function logger(req, res, next) {
console.log(req.originalUrl)
next()
}
It simply prints the original URL to the console, but you can make it do whatever you want. To make this run whenever a function is called, use:
app.use(logger)
The middleware function will only activate on requests declared after the app.use() statement, so if you want it to apply to everything, put the statement at the top of the file before any methods are declared.
To make it run for a specific function only, don’t use the app.use(logger) statement. Simply put the name of the method as an additional argument in the CRUD method you want to use it. So:
app.get(“/“, logger, (req, res) => {…}
You can pass any number of middleware functions into the CRUD functions. Just make another comma and insert before or after “logger,”
All of this works on specific routers too, so in a users.js file you can do router.use(logger) after pasting the logger function into the file too.
If you want to serve html files (not ejs) without having to render it with a request and/or view engine, what tool would you use?
The built-in middleware function express.static(). If we have a folder called “public” in the same folder as server.js, and “public” holds html files, we could use:
app.use(express.static(“public”))
This sets the default folder to public. When we go to the default url plus the file name inside the “public” folder (localhost:3000/index.html), the html file will be served. If there are folders within “public” which contain html, we can navigate through them using the url to get those other pages. So if test.html is in public/test/test.html, we could use localhost:3000/test/test.html to get it.
When you submit an ejs form with an action that maps to a CRUD method, how do you retrieve the variables of that form? How do you send information back to the form? Why would you do this?
Each form has inputs, and those inputs have an inner html field called “name”. When a form is submitted, the req object in the express method has a .body element. So if one of the inputs had name “firstName”, in the express method called, use req.body.firstName to get the value provided to that input.
In order to access the body element of a req object, however, you must do something first. Express, by default, does not allow you to access it. You must use some middleware. At the top of your server.js file, use:
app.use(express.urlencoded({ extended: true }))
To send info back to the form, you can use res.render(‘users/new’, { firstName: req.body.firstName })
This renders the page back to the way it was originally while keeping the “firstName” value the same as what the person typed in. That way, each time the person presses the submit button, the page won’t reload with an empty input if it was an error. This is good UX/UI practice.
