From cb1c3b200117445b4a9f579933e7fa678dabbba6 Mon Sep 17 00:00:00 2001 From: Shaun Hamilton <51722130+Sky020@users.noreply.github.com> Date: Thu, 15 Oct 2020 15:37:29 +0100 Subject: [PATCH] feat(learn): migrate instructions from adnode boilerplate (#39791) * feat(learn): clarify instructions for boilerplate * add how-to-put-a-profile-together * add pug as language * rephrase sentence for clarity Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> --- .../how-to-put-a-profile-together.md | 22 +++++++++++++++---- .../set-up-a-template-engine.md | 12 +++++----- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md b/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md index 6e3ed55ae2..c9fc181e8b 100644 --- a/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md +++ b/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md @@ -6,41 +6,55 @@ forumTopicId: 301554 --- ## Description +
-Now that we can ensure the user accessing the /profile is authenticated, we can use the information contained in 'req.user' on our page! +Now that we can ensure the user accessing the `/profile` is authenticated, we can use the information contained in `req.user` on our page! -Go ahead and pass the object containing the variable username equaling req.user.username into the render method of the profile view. Then go to your profile.pug view and add the line h2.center#welcome Welcome, #{username}! creating the h2 element with the class 'center' and id 'welcome' containing the text 'Welcome, ' and the username! +Pass an object containing the property `username` and value of `req.user.username` as the second argument for the render method of the profile view. Then, go to your `profile.pug` view, and add the following line below the existing `h1` element, and at the same level of indentation: -Also in the profile, add a link to /logout. That route will host the logic to unauthenticate a user. a(href='/logout') Logout +```pug +h2.center#welcome Welcome, #{username}! +``` + +This creates an `h2` element with the class '`center`' and id '`welcome`' containing the text '`Welcome, `' followed by the username. + +Also, in `profile.pug`, add a link referring to the `/logout` route, which will host the logic to unauthenticate a user. + +```pug +a(href='/logout') Logout +``` Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point here.
## Instructions +
## Tests +
```yml tests: - text: You should correctly add a Pug render variable to /profile. testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js') .then(data => { assert.match(data, /username:( |)req.user.username/gi, 'You should be passing the variable username with req.user.username into the render function of the profile page'); }, xhr => { throw new Error(xhr.statusText); }) - ```
## Challenge Seed +
## Solution +
```js diff --git a/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md index 9d95efa05e..01fe1b43e3 100644 --- a/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md +++ b/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -11,17 +11,17 @@ forumTopicId: 301564 As a reminder, this project is built upon the following starter project on Repl.it, or clone from GitHub. -A template engine enables you to use static template files (such as those written in Pug) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client. +A template engine enables you to use static template files (such as those written in _Pug_) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client. -To set up Pug for use in your project, you will need to add it as a dependency in your package.json. Don't forget to add the name of the package and the version. Use the package.json for some examples of the correct syntax. +Add `pug@~3.0.0` as a dependency in your `package.json` file. -Express needs to know which template engine you are using. We will use the set method to assign pug as the view engine property's value: app.set('view engine', 'pug') +Express needs to know which template engine you are using. We will use the `set` method to assign `pug` as the `view engine` property's value: `app.set('view engine', 'pug')` -Your page will not load until you correctly render the index file in the views/pug directory. +Your page will not load until you correctly render the index file in the `views/pug` directory. -You should change the response for the / route to use res.render(). This method takes a string of a file path as an argument. The path can be a relative path (relative to views), or an absolute path, and does not require a file extension. +Change the argument of the `res.render()` declaration in the `/` route to be the file path to the `views/pug` directory. The path can be a relative path (relative to views), or an absolute path, and does not require a file extension. -If all went as planned, your app home page will stop showing the message "Pug template is not defined." and will now display a message indicating you've successfully rendered the Pug template! +If all went as planned, your app home page will stop showing the message "`Pug template is not defined.`" and will now display a message indicating you've successfully rendered the Pug template! Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point here.