fix(guide): restructure curriculum guide articles (#36501)
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
This commit is contained in:
@@ -1,41 +1,61 @@
|
||||
---
|
||||
title: Chain Middleware to Create a Time Server
|
||||
---
|
||||
## Chain Middleware to Create a Time Server
|
||||
# Chain Middleware to Create a Time Server
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
Similar to the last challenge, but now we are chaining 2 functions together. It seems complicated, but it's just JavaScript.
|
||||
|
||||
### Hint
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Instead of responding with the time we can also add any arbitrary property to the request object and pass it to the next function by calling the `next()` method. This is trivial, but it makes for a decent example. The code will looks like this:
|
||||
|
||||
```javascript
|
||||
app.get("/now", (req, res, next) => {
|
||||
// adding a new property to req object
|
||||
// in the middleware function
|
||||
req.string = "example";
|
||||
next();
|
||||
}, (req, res) => {
|
||||
// accessing the newly added property
|
||||
// in the main function
|
||||
res.send(req.string);
|
||||
});
|
||||
app.get(
|
||||
"/now",
|
||||
(req, res, next) => {
|
||||
// adding a new property to req object
|
||||
// in the middleware function
|
||||
req.string = "example";
|
||||
next();
|
||||
},
|
||||
(req, res) => {
|
||||
// accessing the newly added property
|
||||
// in the main function
|
||||
res.send(req.string);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### Solution
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
app.get("/now", (req, res, next) => {
|
||||
req.time = new Date().toString();
|
||||
next();
|
||||
}, (req, res) => {
|
||||
res.send({
|
||||
time: req.time
|
||||
});
|
||||
});
|
||||
app.get(
|
||||
"/now",
|
||||
(req, res, next) => {
|
||||
req.time = new Date().toString();
|
||||
next();
|
||||
},
|
||||
(req, res) => {
|
||||
res.send({
|
||||
time: req.time
|
||||
});
|
||||
}
|
||||
);
|
||||
```
|
||||
</details>
|
||||
|
||||
<details><summary>Solution 2 (Click to Show/Hide)</summary>
|
||||
|
||||
You can also declare the middleware beforehand to use in multiple routes as shown below:
|
||||
|
||||
@@ -51,3 +71,5 @@ app.get("/now", middleware, (req, res) => {
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,31 +1,35 @@
|
||||
---
|
||||
title: Get Data from POST Requests
|
||||
---
|
||||
## Get Data from POST Requests
|
||||
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Get Data from POST Requests
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
Just like using req.query we can do req.body to get our data. This challenge is very similar to "Get Query Parameter Input from the Client."
|
||||
|
||||
In order to get data from a post request a general format is:
|
||||
|
||||
## Hint
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
```javascript
|
||||
app.post(PATH, function(req, res) {
|
||||
// Handle the data in the request
|
||||
});
|
||||
```
|
||||
|
||||
## Solution
|
||||
|
||||
---
|
||||
## Solutions
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
app.post('/name', function(req, res) {
|
||||
app.post("/name", function(req, res) {
|
||||
// Handle the data in the request
|
||||
var string = req.body.first+ ' '+req.body.last;
|
||||
res.json({"name": string});
|
||||
var string = req.body.first + " " + req.body.last;
|
||||
res.json({ name: string });
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md' target='_blank' rel='nofollow'>Help our community expand these hints and guides</a>.
|
||||
</details>
|
||||
|
@@ -1,13 +1,18 @@
|
||||
---
|
||||
title: Get Query Parameter Input from the Client
|
||||
---
|
||||
## Get Query Parameter Input from the Client
|
||||
# Get Query Parameter Input from the Client
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
Given the endpoint URL, `/name?first=firstname&last=lastname`, we can extract the query parameters (`first` and `last`) and their corresponding values from the `req.query` object and send a custom JSON response containing values derived from the query parameters to the client.
|
||||
|
||||
### Solution
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
app.get("/name", function(req, res) {
|
||||
@@ -21,3 +26,4 @@ app.get("/name", function(req, res) {
|
||||
});
|
||||
});
|
||||
```
|
||||
</details>
|
||||
|
@@ -1,13 +1,17 @@
|
||||
---
|
||||
title: Get Route Parameter Input from the Client
|
||||
---
|
||||
## Get Route Parameter Input from the Client
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Get Route Parameter Input from the Client
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
If someone tells you to build a GET or POST endpoint you would achieve the same using `app.get(...)` or `app.post(...)` accordingly.
|
||||
|
||||
## Hint
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
## Hint #1
|
||||
|
||||
In order to get route parameters from a POST request, the general format is as follows:
|
||||
|
||||
@@ -23,7 +27,11 @@ app.post("/:param1/:param2", (req, res) => {
|
||||
});
|
||||
```
|
||||
|
||||
## Solution
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
app.get("/:word/echo", (req, res) => {
|
||||
@@ -33,3 +41,4 @@ app.get("/:word/echo", (req, res) => {
|
||||
});
|
||||
});
|
||||
```
|
||||
</details>
|
||||
|
@@ -1,12 +1,19 @@
|
||||
---
|
||||
title: Implement a Root-Level Request Logger Middleware
|
||||
---
|
||||
## Implement a Root-Level Request Logger Middleware
|
||||
# Implement a Root-Level Request Logger Middleware
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
It is easier to write this challenge all at the top (there is already a stub for it). This is because middleware must be placed the function calls you want it to be used for.
|
||||
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
To set up your own middleware you can do it like so:
|
||||
|
||||
```javascript
|
||||
@@ -15,14 +22,13 @@ app.use(function middleware(req, res, next) {
|
||||
// Call the next function in line:
|
||||
next();
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
If you have trouble formatting the string correctly, one way to do it looks like:
|
||||
|
||||
```javascript
|
||||
var string = req.method + ' ' + req.path + ' - ' + req.ip;
|
||||
var string = req.method + " " + req.path + " - " + req.ip;
|
||||
```
|
||||
|
||||
### Resources
|
||||
#### Relevant Links
|
||||
- [Express Middleware](https://expressjs.com/en/guide/using-middleware.html)
|
||||
|
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Basic Node and Express
|
||||
---
|
||||
## Basic Node and Express
|
||||
# Basic Node and Express
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
|
@@ -1,21 +1,20 @@
|
||||
---
|
||||
title: Meet the Node console
|
||||
---
|
||||
## Meet the Node console
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Meet the Node console
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
Make sure you have cloned the correct repository/glitch project and are writing your code in myapp.js.
|
||||
|
||||
There are many methods available from the node console. You can find a list of these methods with Node.js documentation
|
||||
<a href='https://nodejs.org/dist/latest-v10.x/docs/api/console.html' target='_blank' rel='nofollow'>here</a>. A common use would be to log errors such as:
|
||||
|
||||
```javascript
|
||||
|
||||
console.log("An error happened");
|
||||
console.log("An error happened");
|
||||
```
|
||||
|
||||
### If you use Glitch
|
||||
**Note:** If you use Glitch
|
||||
- Glitch had changed the 'Logs' button to 'Status' button, still on the top-left, under the app name
|
||||
- Don't submit the 'Edit' page directly. Click the 'Show' button (on top) and submit the application show page's url (url format is like https://appname.glitch.me/)
|
||||
|
||||
|
@@ -1,18 +1,18 @@
|
||||
---
|
||||
title: Serve an HTML File
|
||||
---
|
||||
## Serve an HTML File
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Serve an HTML File
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
You probably need to comment out the last challenge. If you have a website and want to serve an index.html file you probably want to put this in a public folder. This is to ensure the public doesn't see something you dont want them to, and it sometimes is called "public" or "views," but you can technically call it whatever you want.
|
||||
|
||||
To serve an index.html in a folder called "public" at the root domain you would do so like this:
|
||||
|
||||
```javascript
|
||||
app.get("/", function(req, res) {
|
||||
res.sendFile( __dirname + "/public/index.html");
|
||||
});
|
||||
app.get("/", function(req, res) {
|
||||
res.sendFile(__dirname + "/public/index.html");
|
||||
});
|
||||
```
|
||||
|
||||
Note: __dirname returns the root directory is a best practice for node developers.
|
||||
**Note:** __dirname returns the root directory is a best practice for node developers.
|
||||
|
@@ -1,16 +1,17 @@
|
||||
---
|
||||
title: Serve JSON on a Specific Route
|
||||
---
|
||||
## Serve JSON on a Specific Route
|
||||
# Serve JSON on a Specific Route
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
It is rather simple to serve a JSON object with Node (at the `/json` route), if we want to deliver an object containing a key `message` and with the value `"Hello json"` we can do so as indicated:
|
||||
|
||||
```javascript
|
||||
app.get("/json", (req, res) => {
|
||||
res.json({
|
||||
"message": "Hello json"
|
||||
});
|
||||
res.json({
|
||||
message: "Hello json"
|
||||
});
|
||||
});
|
||||
```
|
||||
|
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Serve Static Assets
|
||||
---
|
||||
## Serve Static Assets
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Serve Static Assets
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
Serving static webpages and assets is fairly simple with `express`. This could be useful for building your own portfolio website or blog, single-page web applications etc.
|
||||
|
||||
To serve static assets from the `public` folder in the you can use the `express.static()` method as the middleware. This method takes the endpoint and the absolute path to the directory containing the static assets as arguments and exposes the files in that folder at the given endpoint. By default, if the endpoint is not passed to the method, the folder is exposed at the root endpoint i.e. `/` for the application.
|
||||
|
@@ -1,9 +1,13 @@
|
||||
---
|
||||
title: Start a Working Express Server
|
||||
---
|
||||
## Start a Working Express Server
|
||||
# Start a Working Express Server
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
If you had a website at "example.com/" and wanted to serve a string such as "Hello Express" to whoever visits the root domain you could do so easily using Node and/or express:
|
||||
|
||||
|
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Use body-parser to Parse POST Requests
|
||||
---
|
||||
## Use body-parser to Parse POST Requests
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Use body-parser to Parse POST Requests
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
The body-parser should already be added to your project if you used the provided boilerplate, but if not it should be there as:
|
||||
|
||||
```json
|
||||
"dependencies": {
|
||||
"body-parser": "^1.19.0",
|
||||
...
|
||||
|
||||
"express": "^4.17.1"
|
||||
}
|
||||
```
|
||||
@@ -22,7 +22,7 @@ This guide assumes you have imported the `body-parser` module into your file as
|
||||
In order to import the same, you just need to add the following line at the top of your file:
|
||||
|
||||
```javascript
|
||||
var bodyParser = require('body-parser');
|
||||
var bodyParser = require("body-parser");
|
||||
```
|
||||
|
||||
All you need to do for this challenge is pass the middleware to `app.use()`. Make sure it comes before the paths it needs to be used on. Remember that body-parser returns with `bodyParser.urlencoded({extended: false})`. Use the following as a template:
|
||||
|
@@ -1,24 +1,22 @@
|
||||
---
|
||||
title: Use the .env File
|
||||
---
|
||||
## Use the .env File
|
||||
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Use the .env File
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
We can use the .toUpperCase() method to make a string all caps, such as:
|
||||
|
||||
```javascript
|
||||
var response = "Hello World".toUpperCase(); // now becomes "HELLO WORLD"
|
||||
var response = "Hello World".toUpperCase(); // now becomes "HELLO WORLD"
|
||||
```
|
||||
|
||||
All we need to do now is check what the value of the environment variable is, which you can do like:
|
||||
|
||||
```javascript
|
||||
if (process.env.VAR_NAME === "allCaps") {
|
||||
response = "Hello World".toUpperCase();
|
||||
} else {
|
||||
response = "Hello World";
|
||||
}
|
||||
});
|
||||
if (process.env.VAR_NAME === "allCaps") {
|
||||
response = "Hello World".toUpperCase();
|
||||
} else {
|
||||
response = "Hello World";
|
||||
}
|
||||
```
|
||||
|
Reference in New Issue
Block a user