Skip to content

Commit c3d9712

Browse files
committed
update tutorial content
1 parent 9d7ac8c commit c3d9712

File tree

2 files changed

+188
-272
lines changed

2 files changed

+188
-272
lines changed

‎CODEROAD.md renamed to ‎TUTORIAL.md

Lines changed: 1 addition & 272 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,6 @@
11
# Basic Node & Express
22

3-
> Build a server with Node & Express
4-
5-
```config
6-
config:
7-
testRunner:
8-
command: ./node_modules/.bin/mocha
9-
args:
10-
filter: --grep
11-
tap: --reporter=mocha-tap-reporter
12-
repo:
13-
uri: https://github.com/coderoad/fcc-basic-node-and-express
14-
branch: v0.3.1
15-
dependencies:
16-
- name: node
17-
version: >=10
18-
```
3+
Build a server with Node & Express
194

205
## Meet the Node Console
216

@@ -35,46 +20,10 @@ We recommend to keep the log panel open while working at these challenges. By re
3520

3621
### Step 1.1
3722

38-
```config
39-
setup:
40-
files:
41-
- package.json
42-
commits:
43-
- 'a974aea'
44-
- 'bee383e'
45-
watchers:
46-
- package.json
47-
- node_modules/express
48-
commands:
49-
- npm install
50-
solution:
51-
files:
52-
- package.json
53-
commits:
54-
- '63e304f'
55-
commands:
56-
- npm install
57-
```
58-
5923
NPM install the "express" library module version. Use version 4.x.
6024

6125
### Step 1.2
6226

63-
```config
64-
setup:
65-
files:
66-
- src/server.js
67-
commits:
68-
- 'd9bf5f3'
69-
commands:
70-
- npm install
71-
solution:
72-
files:
73-
- src/server.js
74-
commits:
75-
- 'ad7af42'
76-
```
77-
7827
Modify the `server.js` file to log "Hello World" to the console.
7928

8029
## Start a Working Server
@@ -97,21 +46,6 @@ will serve the string 'Response String'.
9746

9847
### Step 2.1
9948

100-
```config
101-
setup:
102-
files:
103-
- src/server.js
104-
commits:
105-
- '7462d28'
106-
commands:
107-
- npm install
108-
solution:
109-
files:
110-
- src/server.js
111-
commits:
112-
- '331bdfc'
113-
```
114-
11549
Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path.
11650

11751
**Note:** Be sure that your code works by looking at the logs, then see the results in your browser by running `npm start`.
@@ -128,19 +62,6 @@ absolutePath = __dirname + relativePath / file.ext;
12862

12963
### Step 3.1
13064

131-
```config
132-
setup:
133-
files:
134-
- src/views/index.html
135-
commits:
136-
- 'd806cc5'
137-
solution:
138-
files:
139-
- src/server.js
140-
commits:
141-
- '1b04cf8'
142-
```
143-
14465
Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that we will use later…), with no style applied.
14566

14667
**Note:** You can edit the solution of the previous challenge or create a new one. If you create a new solution, keep in mind that Express evaluates routes from top to bottom, and executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string.
@@ -153,19 +74,6 @@ An HTML server usually has one or more directories that are accessible by the us
15374

15475
### Step 4.1
15576

156-
```config
157-
setup:
158-
files:
159-
- src/public/style.css
160-
commits:
161-
- 'c2c1b90'
162-
solution:
163-
files:
164-
- src/server.js
165-
commits:
166-
- 'bf27ac1'
167-
```
168-
16977
Mount the `express.static()` middleware for all requests with `app.use()`. The absolute path to the assets folder is `\_\_dirname + /public`.
17078
Now your app should be able to serve a CSS stylesheet. From outside, the public folder will appear mounted to the root directory. Your front-page should look a little better now!
17179

@@ -179,19 +87,6 @@ Let's create a simple API by creating a route that responds with JSON at the pat
17987

18088
### Step 1
18189

182-
```config
183-
setup:
184-
files:
185-
- src/server.js
186-
commits:
187-
- 'ead9fcb'
188-
solution:
189-
files:
190-
- src/server.js
191-
commits:
192-
- '31fd254'
193-
```
194-
19590
Serve the object `{"message": "Hello json"}` as a response, in JSON format, to GET requests to the `/json` route. Then point your browser to `your-app-url/json`, you should see the message on the screen.
19691

19792
## Use the .env File
@@ -204,93 +99,23 @@ The environment variables are accessible from the app as `process.env.VAR_NAME`.
20499

205100
### Step 6.1
206101

207-
```config
208-
setup:
209-
commits:
210-
- 'da2dfbc'
211-
watchers:
212-
- .env
213-
solution:
214-
files:
215-
- .env
216-
commits:
217-
- '3037600'
218-
```
219-
220102
Create a .env file in the root of your project.
221103

222104
### Step 6.2
223105

224-
```config
225-
setup:
226-
files:
227-
- .gitignore
228-
commits:
229-
- '66a5a9e'
230-
solution:
231-
files:
232-
- .gitignore
233-
commits:
234-
- 'b21bbf7'
235-
```
236-
237106
Add the .env file to your .gitignore file. It should be kept a secret.
238107

239108
### Step 6.3
240109

241-
```config
242-
setup:
243-
files:
244-
- .env
245-
commits:
246-
- 'b5a291a'
247-
solution:
248-
files:
249-
- .env
250-
commits:
251-
- '508520c'
252-
```
253-
254110
Let's add an environment variable as a configuration option.
255111
Store the variable `MESSAGE_STYLE=uppercase` in the `.env` file.
256112

257113
### Step 6.4
258114

259-
```config
260-
setup:
261-
files:
262-
- package.json
263-
commits:
264-
- '45eafdc'
265-
watchers:
266-
- package.json
267-
- node_modules/dotenv
268-
solution:
269-
files:
270-
- package.json
271-
commits:
272-
- 'd400723'
273-
commands:
274-
- npm install
275-
```
276-
277115
Install the dependency for the package "dotenv" as a devDependency (`npm install --save-dev module`). The package helps make variables from the .env file available in your code.
278116

279117
### Step 6.5
280118

281-
```config
282-
setup:
283-
files:
284-
- src/server.js
285-
commits:
286-
- '7652103'
287-
solution:
288-
files:
289-
- src/server.js
290-
commits:
291-
- 'f11096f'
292-
```
293-
294119
Load dependencies into your server.js by adding the following line to the top of your file:
295120

296121
```js
@@ -301,19 +126,6 @@ You can test if it works by logging `process.env.MESSAGE_STYLE`.
301126

302127
### Step 6.6
303128

304-
```config
305-
setup:
306-
files:
307-
- src/server.js
308-
commits:
309-
- 'b0e51ce'
310-
solution:
311-
files:
312-
- src/server.js
313-
commits:
314-
- '7329e59'
315-
```
316-
317129
Tell the GET `/json` route handler that you created in the last challenge to transform the response object’s message to uppercase if `process.env.MESSAGE_STYLE` equals `uppercase`. The response object should become `{"message": "HELLO JSON"}`.
318130

319131
## Implement a Root-Level Request Logger Middleware
@@ -337,19 +149,6 @@ In this exercise, you are going to build root-level middleware. As you have seen
337149

338150
### Step 7.1
339151

340-
```config
341-
setup:
342-
files:
343-
- src/server.js
344-
commits:
345-
- 'a2ec56b'
346-
solution:
347-
files:
348-
- src/server.js
349-
commits:
350-
- '3544207'
351-
```
352-
353152
Build a simple logger. For every request, it should log to the console a string taking the following format: `method path - ip`. An example would look like this: `GET /json - ::ffff:127.0.0.1`. Note that there is a space between `method` and `path` and that the dash separating `path` and `ip` is surrounded by a space on both sides. You can get the request method (http verb), the relative route path, and the caller’s ip from the request object using `req.method`, `req.path` and `req.ip`. Remember to call `next()` when you are done, or your server will be stuck forever. Be sure to have the ‘Logs’ opened, and see what happens when some request arrives.
354153

355154
**Note:** Express evaluates functions in the order they appear in the code. This is true for middleware too. If you want it to work for all the routes, it should be mounted before them.
@@ -378,19 +177,6 @@ This approach is useful to split the server operations into smaller units. That
378177

379178
### Step 8.1
380179

381-
```config
382-
setup:
383-
files:
384-
- src/server.js
385-
commits:
386-
- '413957f'
387-
solution:
388-
files:
389-
- src/server.js
390-
commits:
391-
- 'ed11423'
392-
```
393-
394180
In the route `app.get('/now', ...)` chain a middleware function and the final handler. In the middleware function you should add the current time to the request object in the `req.time` key. You can use `new Date().toString()`. In the handler, respond with a JSON object, taking the structure `{time: req.time}`.
395181
**Note:** The test will not pass if you don’t chain the middleware. If you mount the function somewhere else, the test will fail, even if the output result is correct.
396182

@@ -404,19 +190,6 @@ When building an API, we have to allow users to communicate to us what they want
404190

405191
### Step 9.1
406192

407-
```config
408-
setup:
409-
files:
410-
- src/server.js
411-
commits:
412-
- 'd586416'
413-
solution:
414-
files:
415-
- src/server.js
416-
commits:
417-
- '761db27'
418-
```
419-
420193
Build an echo server, mounted at the route `GET /echo/:word`. Respond with a JSON object, taking the structure `{echo: word}`. You can find the word to be repeated at `req.params.word`.
421194

422195
## Get Query Parameter Input from the Client
@@ -429,19 +202,6 @@ Another common way to get input from the client is by encoding the data after th
429202

430203
### Step 10.1
431204

432-
```config
433-
setup:
434-
files:
435-
- src/server.js
436-
commits:
437-
- '31c6a99'
438-
solution:
439-
files:
440-
- src/server.js
441-
commits:
442-
- '7310d93'
443-
```
444-
445205
Build an API endpoint, mounted at `GET /name`. Respond with a JSON document, taking the structure `{ name: 'firstname lastname'}`. The first and last name parameters should be encoded in a query string e.g. `?first=firstname&last=lastname`.
446206

447207
**Note:** In the following exercise you are going to receive data from a POST request, at the same `/name` route path. If you want, you can use the method `app.route(path).get(handler).post(handler)`. This syntax allows you to chain different verb handlers on the same path route. You can save a bit of typing, and have cleaner code.
@@ -467,41 +227,10 @@ In this exercise, you will use a urlencoded body. To parse the data coming from
467227

468228
### Step 11.1
469229

470-
```config
471-
setup:
472-
files:
473-
- package.json
474-
commits:
475-
- 'cbec067'
476-
watchers:
477-
- package.json
478-
- node_modules/body-parser
479-
solution:
480-
files:
481-
- package.json
482-
commits:
483-
- 'db3ea18'
484-
commands:
485-
- npm install
486-
```
487-
488230
Install the `body-parser` module in your `package.json`.
489231

490232
### Step 11.2
491233

492-
```config
493-
setup:
494-
files:
495-
- src/server.js
496-
commits:
497-
- 'd87f1b2'
498-
solution:
499-
files:
500-
- src/server.js
501-
commits:
502-
- '818aab2'
503-
```
504-
505234
Require "body-parser" at the top of the server.js file. Store it in a variable named `bodyParser`. The middleware to handle urlencoded data is returned by `bodyParser.urlencoded({extended: false})`. Pass to `app.use()` the function returned by the previous method call. As usual, the middleware must be mounted before all the routes which need it.
506235

507236
**Note:** `extended=false` is a configuration option that tells the parser to use the classic encoding. When using it, values can be only strings or arrays. The extended version allows more data flexibility, but it is outmatched by JSON.

0 commit comments

Comments
 (0)