From ad7b5f37d8181040840d3f634cfebbcd3c698b7f Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Tue, 2 Jul 2019 22:00:09 -0500 Subject: [PATCH 01/10] Commit readme answers --- app.js | 55 ++++++++++++++++++----- package-lock.json | 41 +++++------------ readme.md | 110 +++++++++++++++++++++++++++------------------- 3 files changed, 121 insertions(+), 85 deletions(-) diff --git a/app.js b/app.js index 72edf4b..a927230 100644 --- a/app.js +++ b/app.js @@ -1,15 +1,48 @@ -const { NODE_ENV='development', PORT=5000 } = process.env -const express = require('express') -const app = express() +// process.env is our local environment. We're declaring two +// new variables, NODE_ENV and PORT. These variables are getting +// destructured from process.env. If the variables are not +// defined, go ahead and give them the following default +// values. +const { NODE_ENV = "development", PORT = 5000 } = process.env; +// Assign the express framework to the variable express +const express = require("express"); +// When we invoke express, we get a new applicat. That application +// has lots of methods we will need to use, such as app.use and app.get +const app = express(); -if (NODE_ENV === 'development') app.use(require('morgan')('dev')) -app.use(require('body-parser').json()) +if (NODE_ENV === "development") app.use(require("morgan")("dev")); +app.use(require("body-parser").json()); -app.get('/', (req, res, next) => { +app.use((req, res, next) => { + console.log("In the server!"); + next(); +}); + +app.get("/pizza", (req, res, next) => { + res.status(418).json({ + message: "Give me some zaaaa please!" + }); +}); + +app.get("/my/name/is/:name", (req, res, next) => { + console.log(req.params); + res.json({ + message: `Hello, ${req.params.name}!` + }); +}); + +app.get("/", (req, res, next) => { + console.log(req.headers); + console.log(req.query); res.json({ - message: 'Hello, Express!' - }) -}) + message: "Hello, Express!" + }); +}); -const listener = () => console.log(`Listening on Port ${PORT}`) -app.listen(PORT, listener) +// Create a function called listener that, when invoked, +// will print out the following statement that includes +// the PORT. +const listener = () => console.log(`Listening on Port ${PORT}`); +// Tells the app to listen on this specified PORT, and when it's +// ready, it will fire the listener. +app.listen(PORT, listener); diff --git a/package-lock.json b/package-lock.json index 04c4fe4..56d610f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -905,8 +905,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -927,14 +926,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -949,20 +946,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -1079,8 +1073,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -1092,7 +1085,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -1107,7 +1099,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -1115,14 +1106,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -1141,7 +1130,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -1222,8 +1210,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -1235,7 +1222,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -1321,8 +1307,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -1358,7 +1343,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -1378,7 +1362,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -1422,14 +1405,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/readme.md b/readme.md index 31791a9..c6e104d 100644 --- a/readme.md +++ b/readme.md @@ -4,15 +4,15 @@ By the end of this lesson, you should be able to build a simple server with the ## Core Learning Objective -* Create an application server using NodeJS and Express +- Create an application server using NodeJS and Express ## Sub-Objectives -* Create an Express server that listens on a specified port -* Make requests to that server using [Postman](https://www.getpostman.com) -* Create routes using different paths and HTTP verbs -* Identify and build middleware -* Parse information sent in the request body +- Create an Express server that listens on a specified port +- Make requests to that server using [Postman](https://www.getpostman.com) +- Create routes using different paths and HTTP verbs +- Identify and build middleware +- Parse information sent in the request body ### Installation @@ -29,6 +29,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Why do you think `node_modules/` is included in there? * **Your Answer:** + Because we don't need git to keep track of all of the changes that are going on with any `node_modules` that we might have installed in our project. --- @@ -37,6 +38,9 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Take a minute to look through the installed packages and describe the purpose of each one. Don't just copy and paste from something online! * **Your Answer:** + We have only one `devDependency`, `nodemon`, which is a required package during development. Nodemon will track any changes that are done in our project and then hot reload or auto restart your server, so that you can see those changes. Eliminates the need to manually restart your server when developing. + +`dependencies` are only required at runtime. We have three packages listed there, `express`, `body-parser`, and `morgan`. These are frameworks that give us some things that may solve problems, give us the ability to create features, or maybe give us some styling and layout for an app. --- @@ -45,6 +49,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Why do we get a response when we go to `/` but not `/notfound`? * **Your Answer:** + Because we have not yet defined a path for the `/notfound` endpoint/route. `/` currently works, becuase we currently have the server setup to return a response `{"message":"Hello, Express!"}`. --- @@ -57,106 +62,122 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What are headers? What values do you recognize? * **Your Answer:** + Expresss is powering it, the `Content-Type` looks familiar, and the `Date` information. --- - [ ] Add the following line **above** the `res.json()` line in your `app.js` file; then, make the request again. ```js - console.log(req.headers) + console.log(req.headers); ``` * **Question:** Where can you find this `console.log()` statement? How can you change the headers that are sent in Postman? * **Your Answer:** + You will find it in your terminal. --- - [ ] Add the following line **above** the `res.json()` line in your `app.js` file; then, make a request again but this time change the URL to the following: `http://localhost:5000?course=javascript` ```js - console.log(req.query) + console.log(req.query); ``` * **Question:** What are query parameters? Try going to a couple of your favorite websites and paste an example of query parameters being used. * **Your Answer:** + It's a way to define additional information when you make a `GET` request. They are often used to define or specify information in a request. --- - [ ] Before all of your routes, add the following: ```js app.use((req, res, next) => { - console.log('In the server!') - next() - }) + console.log("In the server!"); + next(); + }); ``` * **Question:** When does `app.use()` get called? * **Your Answer:** + It gets called when there is a match??? --- - [ ] Take a moment to observe the basic structure of a **route** in Express. ```js - app.get('/', (req, res, next) => { - console.log(req.query) + app.get("/", (req, res, next) => { + console.log(req.query); res.json({ - message: 'Hello, Express!' - }) - }) + message: "Hello, Express!" + }); + }); ``` * **Question:** What type of thing is `app` and what is its purpose? * **Your Answer:** + `app` is a middleware function. It's job is to parse incoming requests with JSON payloads. -* **Question:** What type of thing is `app.get()` and what is its purpose? +### it's a function and has many different methods on it, one of which is `.get()`. -* **Your Answer:** +- **Question:** What type of thing is `app.get()` and what is its purpose? -* **Question:** What type of thing is `/` and what is its purpose? +- **Your Answer:** + `app.get()` it's a function and will return the HTTP request header. It will look to see if there is a match with the input. -* **Your Answer:** +- **Question:** What type of thing is `/` and what is its purpose? -* **Question:** What type of thing is `req` and what does it represent in the callback? +- **Your Answer:** + `/` is the root or index path/route. It's purpose is to return content that has been requested when `app.get()` has found a match for it. -* **Your Answer:** +- **Question:** What type of thing is `req` and what does it represent in the callback? -* **Question:** What type of thing is `res` and what does it represent in the callback? +- **Your Answer:** + `req` is an object representing the HTTP request. -* **Your Answer:** +- **Question:** What type of thing is `res` and what does it represent in the callback? -* **Question:** What type of thing is `next` and what does it represent in the callback? +- **Your Answer:** + `res` is an object representing the HTTP response that Express app sends. -* **Your Answer:** +- **Question:** What type of thing is `next` and what does it represent in the callback? -* **Question:** Instead of a `GET` request, lets say we want to listen in for a `POST` request. What do you think you needs to change? +- **Your Answer:** + `next()` is a callback function and will represent the next matching route. -* **Your Answer:** +- **Question:** Instead of a `GET` request, lets say we want to listen in for a `POST` request. What do you think you needs to change? -* **Question:** Right now all of our requests will return a "Status Code" of 200. Define what a status code is and research how you could change it. +- **Your Answer:** + We can just swap out the `app.get()` to be `app.post()`. -* **Your Answer:** +- **Question:** Right now all of our requests will return a "Status Code" of 200. Define what a status code is and research how you could change it. + +- **Your Answer:** + Status codes help convey whether or not a HTTP request was successfully completed. We can chain on the `status()` method like the following `res.status(418)`. --- - [ ] Add the following route to your application; then, make a request again but this time change the URL to the following, making sure to replace ``. ```js - app.get('/my/name/is/:name', (req, res, next) => { - console.log(req.params) + app.get("/my/name/is/:name", (req, res, next) => { + console.log(req.params); res.json({ message: `Hello, ${req.params.name}!` - }) - }) + }); + }); ``` * **Question:** What is `req.params`? What else will you need to change if you change the path to `/my/name/is/:username`? * **Your Answer:** + `req.params` is an object and gives you access to any properties available on the named route. For example, in `/my/name/is/:username`, I would need to change `/:username` for something like `/q=examplename`. --- - [ ] Create three new routes as follows, testing each one as you go: + ``` GET /ping -> Status Code: 200 @@ -176,9 +197,9 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a - [ ] Earlier we added the following code. Try moving it between two routes you just created and test each route. ```js app.use((req, res, next) => { - console.log('In the server!') - next() - }) + console.log("In the server!"); + next(); + }); ``` * **Question:** The above can be described as middleware. Describe what middleware is in your own words and how it differs from building a route. @@ -189,10 +210,10 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a - [ ] Take a moment to read through the following code that is already in `app.js`. If you need, take a look at the [morgan](https://www.npmjs.com/package/morgan) and [body-parser](https://www.npmjs.com/package/body-parser) packages on NPM: ```js - if (NODE_ENV === 'development') { - app.use(require('morgan')('dev')) + if (NODE_ENV === "development") { + app.use(require("morgan")("dev")); } - app.use(require('body-parser').json()) + app.use(require("body-parser").json()); ``` * **Question:** Describe the purpose of both morgan and body-parser. Why do you think morgan is only being run when the application is run in development mode? @@ -203,7 +224,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a - [ ] Update one of the `POST` routes you've created by adding the following code before the response is set. Then, try sending a request body using Postman to that route. ```js - console.log(req.body) + console.log(req.body); ``` * **Question:** Try commenting out `body-parser` in your application. What happens and why? @@ -215,8 +236,9 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a - [ ] Visit the [Exercise: Express](https://github.com/pce-uw-jscript400/exercise-express) repository on GitHub. Follow the setup instructions and open the code in a code editor. Then, answer the following questions: * **Question:** Describe what is happening on the following line. What is the [shortid](https://www.npmjs.com/package/shortid) package and what is it being used for? + ```js - const { generate: generateId } = require('shortid') + const { generate: generateId } = require("shortid"); ``` * **Your Answer:** @@ -245,5 +267,5 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a - [Postman](https://www.getpostman.com) - [Express](https://expressjs.com/) -- [morgan](https://www.npmjs.com/package/morgan) -- [body-parser](https://www.npmjs.com/package/body-parser) \ No newline at end of file +- [morgan](https://www.npmjs.com/package/morgan) +- [body-parser](https://www.npmjs.com/package/body-parser) From ca7f32eef116243260f6db06e598e319ed1ca1d6 Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Tue, 2 Jul 2019 22:07:06 -0500 Subject: [PATCH 02/10] Update last answer --- readme.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index c6e104d..636fcff 100644 --- a/readme.md +++ b/readme.md @@ -172,7 +172,16 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What is `req.params`? What else will you need to change if you change the path to `/my/name/is/:username`? * **Your Answer:** - `req.params` is an object and gives you access to any properties available on the named route. For example, in `/my/name/is/:username`, I would need to change `/:username` for something like `/q=examplename`. + `req.params` is an object and gives you access to any properties available on the named route. You would need to change any `params` based off of what you define, so: + +```js +app.get("/my/name/is/:username", (req, res, next) => { + console.log(req.params); + res.json({ + message: `Hello, ${req.params.username}!` + }); +}); +``` --- From c5f73e185407ab0900471d52cfc10060e704f22c Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Tue, 2 Jul 2019 22:44:49 -0500 Subject: [PATCH 03/10] commit answers --- app.js | 37 +++++++++++++++++++++++++++++++++---- readme.md | 3 +++ 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index a927230..ce4d0ae 100644 --- a/app.js +++ b/app.js @@ -18,10 +18,16 @@ app.use((req, res, next) => { next(); }); -app.get("/pizza", (req, res, next) => { - res.status(418).json({ - message: "Give me some zaaaa please!" - }); +app.get("/pizza", (request, response, next) => { + if (request.query.secret === "SECRETPASSCODE") { + response.status(200).json({ + message: "Mmmm pizza" + }); + } else { + response.status(401).json({ + message: "No pizza for you" + }); + } }); app.get("/my/name/is/:name", (req, res, next) => { @@ -31,6 +37,29 @@ app.get("/my/name/is/:name", (req, res, next) => { }); }); +app.get("/ping", (req, res, next) => { + res.status(200).json({ + message: "pong" + }); +}); + +app.post("/message", (req, res, next) => { + const message = "Message received!"; + const { content } = req.query; + res.status(201).json({ + message, + content + }); +}); + +app.delete("/messages/:id", (req, res, next) => { + const { id } = req.params; + const message = `Delete message ${id}`; + res.status(200).json({ + message + }); +}); + app.get("/", (req, res, next) => { console.log(req.headers); console.log(req.query); diff --git a/readme.md b/readme.md index 636fcff..c3fde02 100644 --- a/readme.md +++ b/readme.md @@ -215,6 +215,8 @@ app.get("/my/name/is/:username", (req, res, next) => { * **Your Answer:** +### I'm still fuzzy on this topic, but it seems like middlewares are functions that give you the ability to layer in conditional logic to your app that is blocking and can make your development go easier. It's likely not someting you'd want to utilize in a production environment. + --- - [ ] Take a moment to read through the following code that is already in `app.js`. If you need, take a look at the [morgan](https://www.npmjs.com/package/morgan) and [body-parser](https://www.npmjs.com/package/body-parser) packages on NPM: @@ -228,6 +230,7 @@ app.get("/my/name/is/:username", (req, res, next) => { * **Question:** Describe the purpose of both morgan and body-parser. Why do you think morgan is only being run when the application is run in development mode? * **Your Answer:** + `morgan` is a middleware that gives you the ability to create custom logging when developing your apps. `body-parser` is a middleware that gives you the ability to parse JSON data being submitted via HTTP `POST` request. --- From 7a03ea2f38b97dac85198cc563da83fa3fc7c63f Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Sun, 7 Jul 2019 15:17:23 -0500 Subject: [PATCH 04/10] Update readme --- readme.md | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index c3fde02..17c6fb8 100644 --- a/readme.md +++ b/readme.md @@ -29,6 +29,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Why do you think `node_modules/` is included in there? * **Your Answer:** + Because we don't need git to keep track of all of the changes that are going on with any `node_modules` that we might have installed in our project. --- @@ -38,6 +39,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Take a minute to look through the installed packages and describe the purpose of each one. Don't just copy and paste from something online! * **Your Answer:** + We have only one `devDependency`, `nodemon`, which is a required package during development. Nodemon will track any changes that are done in our project and then hot reload or auto restart your server, so that you can see those changes. Eliminates the need to manually restart your server when developing. `dependencies` are only required at runtime. We have three packages listed there, `express`, `body-parser`, and `morgan`. These are frameworks that give us some things that may solve problems, give us the ability to create features, or maybe give us some styling and layout for an app. @@ -49,6 +51,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Why do we get a response when we go to `/` but not `/notfound`? * **Your Answer:** + Because we have not yet defined a path for the `/notfound` endpoint/route. `/` currently works, becuase we currently have the server setup to return a response `{"message":"Hello, Express!"}`. --- @@ -62,6 +65,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What are headers? What values do you recognize? * **Your Answer:** + Expresss is powering it, the `Content-Type` looks familiar, and the `Date` information. --- @@ -74,6 +78,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Where can you find this `console.log()` statement? How can you change the headers that are sent in Postman? * **Your Answer:** + You will find it in your terminal. --- @@ -86,6 +91,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What are query parameters? Try going to a couple of your favorite websites and paste an example of query parameters being used. * **Your Answer:** + It's a way to define additional information when you make a `GET` request. They are often used to define or specify information in a request. --- @@ -101,7 +107,8 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** When does `app.use()` get called? * **Your Answer:** - It gets called when there is a match??? + +### It gets called when there is a match??? --- @@ -118,43 +125,49 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What type of thing is `app` and what is its purpose? * **Your Answer:** - `app` is a middleware function. It's job is to parse incoming requests with JSON payloads. -### it's a function and has many different methods on it, one of which is `.get()`. + `app` is a middleware function. It's job is to parse incoming requests with JSON payloads and has many different methods on it, one of which is `.get()`. - **Question:** What type of thing is `app.get()` and what is its purpose? - **Your Answer:** + `app.get()` it's a function and will return the HTTP request header. It will look to see if there is a match with the input. - **Question:** What type of thing is `/` and what is its purpose? - **Your Answer:** + `/` is the root or index path/route. It's purpose is to return content that has been requested when `app.get()` has found a match for it. - **Question:** What type of thing is `req` and what does it represent in the callback? - **Your Answer:** + `req` is an object representing the HTTP request. - **Question:** What type of thing is `res` and what does it represent in the callback? - **Your Answer:** - `res` is an object representing the HTTP response that Express app sends. + + `res` is an object and it represents the HTTP response that Express app sends. - **Question:** What type of thing is `next` and what does it represent in the callback? - **Your Answer:** - `next()` is a callback function and will represent the next matching route. + + `next()` is a callback function and tells the app to continue forward and will represent the next matching route. - **Question:** Instead of a `GET` request, lets say we want to listen in for a `POST` request. What do you think you needs to change? - **Your Answer:** + We can just swap out the `app.get()` to be `app.post()`. - **Question:** Right now all of our requests will return a "Status Code" of 200. Define what a status code is and research how you could change it. - **Your Answer:** + Status codes help convey whether or not a HTTP request was successfully completed. We can chain on the `status()` method like the following `res.status(418)`. --- @@ -172,7 +185,8 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What is `req.params`? What else will you need to change if you change the path to `/my/name/is/:username`? * **Your Answer:** - `req.params` is an object and gives you access to any properties available on the named route. You would need to change any `params` based off of what you define, so: + + `req.params` is an object and gives you access to any properties available on the named route. You would need to change any `params` based off of what you define, so for example: ```js app.get("/my/name/is/:username", (req, res, next) => { @@ -230,6 +244,7 @@ app.get("/my/name/is/:username", (req, res, next) => { * **Question:** Describe the purpose of both morgan and body-parser. Why do you think morgan is only being run when the application is run in development mode? * **Your Answer:** + `morgan` is a middleware that gives you the ability to create custom logging when developing your apps. `body-parser` is a middleware that gives you the ability to parse JSON data being submitted via HTTP `POST` request. --- @@ -259,10 +274,15 @@ app.get("/my/name/is/:username", (req, res, next) => { * **Your Answer:** +- `/vegetables` +- `/vegetables/:id` + * **Question:** Look for `helpers.validate` in the `app.js` file. What is this and how does it work? * **Your Answer:** + `helpers.validate` seems like it is giving us the ability to check for the validity of the `POST` request. + * **Question:** Try creating a new vegetable. Then, try restarting your server. What happens to the data you posted and why? * **Your Answer:** From 27924316dfee1749b2c419fe929289cccd7c85c9 Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Sun, 7 Jul 2019 15:42:36 -0500 Subject: [PATCH 05/10] Change answers for app.use and middleware --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 17c6fb8..c82c92c 100644 --- a/readme.md +++ b/readme.md @@ -108,7 +108,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Your Answer:** -### It gets called when there is a match??? +`app.use()` is a general function for every request to go through and is called when it finds a match for a specified path. --- @@ -229,7 +229,7 @@ app.get("/my/name/is/:username", (req, res, next) => { * **Your Answer:** -### I'm still fuzzy on this topic, but it seems like middlewares are functions that give you the ability to layer in conditional logic to your app that is blocking and can make your development go easier. It's likely not someting you'd want to utilize in a production environment. +Middlewares are functions that give you the ability to access the HTTP request and response objects. It can also access any next middleware functions that are part of an Express app's request-response cycle. It differs from building a route by telling the app to perform certain tasks programmatically before/after it finds a matching route. --- From 7b9ac544ad36cb998c416611ba2f97d6d8ba7c90 Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Sun, 7 Jul 2019 16:09:05 -0500 Subject: [PATCH 06/10] Answer body-parser question --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index c82c92c..79e340f 100644 --- a/readme.md +++ b/readme.md @@ -258,6 +258,8 @@ Middlewares are functions that give you the ability to access the HTTP request a * **Your Answer:** +We get an error stating `Cannot destructure property 'content' of 'undefind' or 'null'`. This happens because `body-parser` gives us access to `req.body`. By commenting it out, `body-parser` doesn't know what to assume about the request coming in, in this example, a JSON object and so `content` comes back as `undefined`. + --- - [ ] Visit the [Exercise: Express](https://github.com/pce-uw-jscript400/exercise-express) repository on GitHub. Follow the setup instructions and open the code in a code editor. Then, answer the following questions: From 28f64826c870baff0e00fc238e3a297830231456 Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Sun, 7 Jul 2019 16:12:15 -0500 Subject: [PATCH 07/10] Answer short id question --- readme.md | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/readme.md b/readme.md index 79e340f..25ba482 100644 --- a/readme.md +++ b/readme.md @@ -272,30 +272,32 @@ We get an error stating `Cannot destructure property 'content' of 'undefind' or * **Your Answer:** -* **Question:** What routes are currently available to you as part of this application? +ShortId generates unique and short ids that are URL friendly and that's how we seem to be using it inside the app. -* **Your Answer:** +- **Question:** What routes are currently available to you as part of this application? -- `/vegetables` -- `/vegetables/:id` +- **Your Answer:** -* **Question:** Look for `helpers.validate` in the `app.js` file. What is this and how does it work? +* `/vegetables` +* `/vegetables/:id` -* **Your Answer:** +- **Question:** Look for `helpers.validate` in the `app.js` file. What is this and how does it work? + +- **Your Answer:** `helpers.validate` seems like it is giving us the ability to check for the validity of the `POST` request. -* **Question:** Try creating a new vegetable. Then, try restarting your server. What happens to the data you posted and why? +- **Question:** Try creating a new vegetable. Then, try restarting your server. What happens to the data you posted and why? -* **Your Answer:** +- **Your Answer:** -* **Question:** Take a look at the last two `app.use()` methods at the end of the file. Describe how both work and what `err` is refers to. +- **Question:** Take a look at the last two `app.use()` methods at the end of the file. Describe how both work and what `err` is refers to. -* **Your Answer:** +- **Your Answer:** -* **Question:** Take a look at the `package.json` file. What is [standardjs](https://standardjs.com/) and what will it do for you? +- **Question:** Take a look at the `package.json` file. What is [standardjs](https://standardjs.com/) and what will it do for you? -* **Your Answer:** +- **Your Answer:** #### Resources From 5f03dd4459efa4916737e95facbfdb8330eeb2ba Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Sun, 7 Jul 2019 21:27:13 -0500 Subject: [PATCH 08/10] Finishes questions section of assignment --- readme.md | 92 ++++++++++++++++--------------------------------------- 1 file changed, 26 insertions(+), 66 deletions(-) diff --git a/readme.md b/readme.md index 25ba482..273406b 100644 --- a/readme.md +++ b/readme.md @@ -28,9 +28,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Why do you think `node_modules/` is included in there? -* **Your Answer:** - - Because we don't need git to keep track of all of the changes that are going on with any `node_modules` that we might have installed in our project. +* **Your Answer:** Because we don't need git to keep track of all of the changes that are going on with any `node_modules` that we might have installed in our project. --- @@ -38,9 +36,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Take a minute to look through the installed packages and describe the purpose of each one. Don't just copy and paste from something online! -* **Your Answer:** - - We have only one `devDependency`, `nodemon`, which is a required package during development. Nodemon will track any changes that are done in our project and then hot reload or auto restart your server, so that you can see those changes. Eliminates the need to manually restart your server when developing. +* **Your Answer:** We have only one `devDependency`, `nodemon`, which is a required package during development. Nodemon will track any changes that are done in our project and then hot reload or auto restart your server, so that you can see those changes. Eliminates the need to manually restart your server when developing. `dependencies` are only required at runtime. We have three packages listed there, `express`, `body-parser`, and `morgan`. These are frameworks that give us some things that may solve problems, give us the ability to create features, or maybe give us some styling and layout for an app. @@ -50,9 +46,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Why do we get a response when we go to `/` but not `/notfound`? -* **Your Answer:** - - Because we have not yet defined a path for the `/notfound` endpoint/route. `/` currently works, becuase we currently have the server setup to return a response `{"message":"Hello, Express!"}`. +* **Your Answer:** Because we have not yet defined a path for the `/notfound` endpoint/route. `/` currently works, becuase we currently have the server setup to return a response `{"message":"Hello, Express!"}`. --- @@ -64,9 +58,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What are headers? What values do you recognize? -* **Your Answer:** - - Expresss is powering it, the `Content-Type` looks familiar, and the `Date` information. +* **Your Answer:** Expresss is powering it, the `Content-Type` looks familiar, and the `Date` information. --- @@ -77,9 +69,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Where can you find this `console.log()` statement? How can you change the headers that are sent in Postman? -* **Your Answer:** - - You will find it in your terminal. +* **Your Answer:** You will find it in your terminal. --- @@ -90,9 +80,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What are query parameters? Try going to a couple of your favorite websites and paste an example of query parameters being used. -* **Your Answer:** - - It's a way to define additional information when you make a `GET` request. They are often used to define or specify information in a request. +* **Your Answer:** It's a way to define additional information when you make a `GET` request. They are often used to define or specify information in a request. --- @@ -106,9 +94,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** When does `app.use()` get called? -* **Your Answer:** - -`app.use()` is a general function for every request to go through and is called when it finds a match for a specified path. +* **Your Answer:** `app.use()` is a general function for every request to go through and is called when it finds a match for a specified path. --- @@ -124,51 +110,35 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What type of thing is `app` and what is its purpose? -* **Your Answer:** - - `app` is a middleware function. It's job is to parse incoming requests with JSON payloads and has many different methods on it, one of which is `.get()`. +* **Your Answer:** `app` is a middleware function. It's job is to parse incoming requests with JSON payloads and has many different methods on it, one of which is `.get()`. - **Question:** What type of thing is `app.get()` and what is its purpose? -- **Your Answer:** - - `app.get()` it's a function and will return the HTTP request header. It will look to see if there is a match with the input. +- **Your Answer:** `app.get()` it's a function and will return the HTTP request header. It will look to see if there is a match with the input. - **Question:** What type of thing is `/` and what is its purpose? -- **Your Answer:** - - `/` is the root or index path/route. It's purpose is to return content that has been requested when `app.get()` has found a match for it. +- **Your Answer:** `/` is the root or index path/route. It's purpose is to return content that has been requested when `app.get()` has found a match for it. - **Question:** What type of thing is `req` and what does it represent in the callback? -- **Your Answer:** - - `req` is an object representing the HTTP request. +- **Your Answer:** `req` is an object representing the HTTP request. - **Question:** What type of thing is `res` and what does it represent in the callback? -- **Your Answer:** - - `res` is an object and it represents the HTTP response that Express app sends. +- **Your Answer:** `res` is an object and it represents the HTTP response that Express app sends. - **Question:** What type of thing is `next` and what does it represent in the callback? -- **Your Answer:** - - `next()` is a callback function and tells the app to continue forward and will represent the next matching route. +- **Your Answer:** `next()` is a callback function and tells the app to continue forward and will represent the next matching route. - **Question:** Instead of a `GET` request, lets say we want to listen in for a `POST` request. What do you think you needs to change? -- **Your Answer:** - - We can just swap out the `app.get()` to be `app.post()`. +- **Your Answer:** We can just swap out the `app.get()` to be `app.post()`. - **Question:** Right now all of our requests will return a "Status Code" of 200. Define what a status code is and research how you could change it. -- **Your Answer:** - - Status codes help convey whether or not a HTTP request was successfully completed. We can chain on the `status()` method like the following `res.status(418)`. +- **Your Answer:** Status codes help convey whether or not a HTTP request was successfully completed. We can chain on the `status()` method like the following `res.status(418)`. --- @@ -184,9 +154,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** What is `req.params`? What else will you need to change if you change the path to `/my/name/is/:username`? -* **Your Answer:** - - `req.params` is an object and gives you access to any properties available on the named route. You would need to change any `params` based off of what you define, so for example: +* **Your Answer:** `req.params` is an object and gives you access to any properties available on the named route. You would need to change any `params` based off of what you define, so for example: ```js app.get("/my/name/is/:username", (req, res, next) => { @@ -227,9 +195,7 @@ app.get("/my/name/is/:username", (req, res, next) => { * **Question:** The above can be described as middleware. Describe what middleware is in your own words and how it differs from building a route. -* **Your Answer:** - -Middlewares are functions that give you the ability to access the HTTP request and response objects. It can also access any next middleware functions that are part of an Express app's request-response cycle. It differs from building a route by telling the app to perform certain tasks programmatically before/after it finds a matching route. +* **Your Answer:** Middlewares are functions that give you the ability to access the HTTP request and response objects. It can also access any next middleware functions that are part of an Express app's request-response cycle. It differs from building a route by telling the app to perform certain tasks programmatically before/after it finds a matching route. --- @@ -243,9 +209,7 @@ Middlewares are functions that give you the ability to access the HTTP request a * **Question:** Describe the purpose of both morgan and body-parser. Why do you think morgan is only being run when the application is run in development mode? -* **Your Answer:** - - `morgan` is a middleware that gives you the ability to create custom logging when developing your apps. `body-parser` is a middleware that gives you the ability to parse JSON data being submitted via HTTP `POST` request. +* **Your Answer:** `morgan` is a middleware that gives you the ability to create custom logging when developing your apps. `body-parser` is a middleware that gives you the ability to parse JSON data being submitted via HTTP `POST` request. --- @@ -256,9 +220,7 @@ Middlewares are functions that give you the ability to access the HTTP request a * **Question:** Try commenting out `body-parser` in your application. What happens and why? -* **Your Answer:** - -We get an error stating `Cannot destructure property 'content' of 'undefind' or 'null'`. This happens because `body-parser` gives us access to `req.body`. By commenting it out, `body-parser` doesn't know what to assume about the request coming in, in this example, a JSON object and so `content` comes back as `undefined`. +* **Your Answer:** We get an error stating `Cannot destructure property 'content' of 'undefind' or 'null'`. This happens because `body-parser` gives us access to `req.body`. By commenting it out, `body-parser` doesn't know what to assume about the request coming in, in this example, a JSON object and so `content` comes back as `undefined`. --- @@ -270,9 +232,7 @@ We get an error stating `Cannot destructure property 'content' of 'undefind' or const { generate: generateId } = require("shortid"); ``` -* **Your Answer:** - -ShortId generates unique and short ids that are URL friendly and that's how we seem to be using it inside the app. +* **Your Answer:** ShortId generates unique and short ids that are URL friendly and that's how we seem to be using it inside the app. - **Question:** What routes are currently available to you as part of this application? @@ -283,21 +243,21 @@ ShortId generates unique and short ids that are URL friendly and that's how we s - **Question:** Look for `helpers.validate` in the `app.js` file. What is this and how does it work? -- **Your Answer:** - - `helpers.validate` seems like it is giving us the ability to check for the validity of the `POST` request. +- **Your Answer:** `helpers.validate` is a custom middleware that seems to be checking to make sure that the `req.body` contains valid information on the `POST` request. If the `req.body` is empty, it returns an error. If the `req.body` does not have all the required keys for `name` and `price`, then it will return an error. It also checks to make sure that there are no extra keys, in which case it returns an error. - **Question:** Try creating a new vegetable. Then, try restarting your server. What happens to the data you posted and why? -- **Your Answer:** +- **Your Answer:** My data did not persist. This happened because as of now, it's just using the HTTP `POST` method to send data to a route and we are not using a database or a JSON file to store the contents that are being created. - **Question:** Take a look at the last two `app.use()` methods at the end of the file. Describe how both work and what `err` is refers to. -- **Your Answer:** +- **Your Answer:** The first `app.use()` is a general purpse function that uses the `next()` middleware function to check for a valid route. It is using the `404 status code` which indicates the server was unable to find a matching route. It's also storing a template literal string in the message and inserting the type of HTTP method and pathame that it's receiving from the `request object`. + +The second `app.use()` is an error handler that is processing the `status` and the `message` off of the `response object` if there's an error. If there is, it uses destructuring, to unpack the values from `err` and stores them in `status` and `message`. These values are then used in `res.status()` and `res.json()` to store the status code and turns the `message` into a readable string. - **Question:** Take a look at the `package.json` file. What is [standardjs](https://standardjs.com/) and what will it do for you? -- **Your Answer:** +- **Your Answer:** StandardJS gives us some power to be lazy and write clean code :) There's no setup or configuration, it automatically formats your code and helps enforce a consistent style for your JS code, which can help cut down on review time and any potential back-and-forth between engineering team members. #### Resources From b4aa3e439e9fca77b2c855fc27bf08f4916afee0 Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Sun, 7 Jul 2019 21:30:44 -0500 Subject: [PATCH 09/10] Reformat two answers --- readme.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index 273406b..bf12941 100644 --- a/readme.md +++ b/readme.md @@ -36,9 +36,7 @@ Then, go to [http://localhost:5000/](http://localhost:5000) and you should see a * **Question:** Take a minute to look through the installed packages and describe the purpose of each one. Don't just copy and paste from something online! -* **Your Answer:** We have only one `devDependency`, `nodemon`, which is a required package during development. Nodemon will track any changes that are done in our project and then hot reload or auto restart your server, so that you can see those changes. Eliminates the need to manually restart your server when developing. - -`dependencies` are only required at runtime. We have three packages listed there, `express`, `body-parser`, and `morgan`. These are frameworks that give us some things that may solve problems, give us the ability to create features, or maybe give us some styling and layout for an app. +* **Your Answer:** We have only one `devDependency`, `nodemon`, which is a required package during development. Nodemon will track any changes that are done in our project and then hot reload or auto restart your server, so that you can see those changes. Eliminates the need to manually restart your server when developing. `dependencies` are only required at runtime. We have three packages listed there, `express`, `body-parser`, and `morgan`. These are frameworks that give us some things that may solve problems, give us the ability to create features, or maybe give us some styling and layout for an app. --- @@ -251,13 +249,15 @@ app.get("/my/name/is/:username", (req, res, next) => { - **Question:** Take a look at the last two `app.use()` methods at the end of the file. Describe how both work and what `err` is refers to. -- **Your Answer:** The first `app.use()` is a general purpse function that uses the `next()` middleware function to check for a valid route. It is using the `404 status code` which indicates the server was unable to find a matching route. It's also storing a template literal string in the message and inserting the type of HTTP method and pathame that it's receiving from the `request object`. +- **Your Answer:** -The second `app.use()` is an error handler that is processing the `status` and the `message` off of the `response object` if there's an error. If there is, it uses destructuring, to unpack the values from `err` and stores them in `status` and `message`. These values are then used in `res.status()` and `res.json()` to store the status code and turns the `message` into a readable string. +The first `app.use()` is a general purpse function that uses the `next()` middleware function to check for a valid route. It is using the `404 status code` which indicates the server was unable to find a matching route. It's also storing a template literal string in the message and inserting the type of HTTP method and pathame that it's receiving from the `request object`. The second `app.use()` is an error handler that is processing the `status` and the `message` off of the `response object` if there's an error. If there is, it uses destructuring, to unpack the values from `err` and stores them in `status` and `message`. These values are then used in `res.status()` and `res.json()` to store the status code and turns the `message` into a readable string. - **Question:** Take a look at the `package.json` file. What is [standardjs](https://standardjs.com/) and what will it do for you? -- **Your Answer:** StandardJS gives us some power to be lazy and write clean code :) There's no setup or configuration, it automatically formats your code and helps enforce a consistent style for your JS code, which can help cut down on review time and any potential back-and-forth between engineering team members. +- **Your Answer:** + +StandardJS gives us some power to be lazy and write clean code :) There's no setup or configuration, it automatically formats your code and helps enforce a consistent style for your JS code, which can help cut down on review time and any potential back-and-forth between engineering team members. #### Resources From 43f9935f5e739b26d49555fa45c29e248ebd9183 Mon Sep 17 00:00:00 2001 From: Tom Workman Date: Sun, 7 Jul 2019 21:32:41 -0500 Subject: [PATCH 10/10] Refortmat answers...again --- readme.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index bf12941..c3bb64e 100644 --- a/readme.md +++ b/readme.md @@ -249,15 +249,11 @@ app.get("/my/name/is/:username", (req, res, next) => { - **Question:** Take a look at the last two `app.use()` methods at the end of the file. Describe how both work and what `err` is refers to. -- **Your Answer:** - -The first `app.use()` is a general purpse function that uses the `next()` middleware function to check for a valid route. It is using the `404 status code` which indicates the server was unable to find a matching route. It's also storing a template literal string in the message and inserting the type of HTTP method and pathame that it's receiving from the `request object`. The second `app.use()` is an error handler that is processing the `status` and the `message` off of the `response object` if there's an error. If there is, it uses destructuring, to unpack the values from `err` and stores them in `status` and `message`. These values are then used in `res.status()` and `res.json()` to store the status code and turns the `message` into a readable string. +- **Your Answer:** The first `app.use()` is a general purpse function that uses the `next()` middleware function to check for a valid route. It is using the `404 status code` which indicates the server was unable to find a matching route. It's also storing a template literal string in the message and inserting the type of HTTP method and pathame that it's receiving from the `request object`. The second `app.use()` is an error handler that is processing the `status` and the `message` off of the `response object` if there's an error. If there is, it uses destructuring, to unpack the values from `err` and stores them in `status` and `message`. These values are then used in `res.status()` and `res.json()` to store the status code and turns the `message` into a readable string. - **Question:** Take a look at the `package.json` file. What is [standardjs](https://standardjs.com/) and what will it do for you? -- **Your Answer:** - -StandardJS gives us some power to be lazy and write clean code :) There's no setup or configuration, it automatically formats your code and helps enforce a consistent style for your JS code, which can help cut down on review time and any potential back-and-forth between engineering team members. +- **Your Answer:** StandardJS gives us some power to be lazy and write clean code :) There's no setup or configuration, it automatically formats your code and helps enforce a consistent style for your JS code, which can help cut down on review time and any potential back-and-forth between engineering team members. #### Resources