diff --git a/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/set-up-a-template-engine.english.md b/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/set-up-a-template-engine.english.md index 24cfd4a5b6..f4ca7ce313 100644 --- a/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/set-up-a-template-engine.english.md +++ b/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/set-up-a-template-engine.english.md @@ -6,21 +6,30 @@ forumTopicId: 301564 --- ## Description +
-As a reminder, this project is being built upon the following starter project on Glitch, or cloned 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, and transforms the template into a static HTML file that is then sent to the client. This approach makes it easier to design an HTML page and allows for displaying of 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 first in your package.json. "pug": "^0.1.0" -Now to tell Node/Express to use the templating engine you will have to tell your express app to set 'pug' as the 'view-engine'. app.set('view engine', 'pug') -Lastly, you should change your response to the request for the index route to res.render with the path to the view views/pug/index.pug. -If all went as planned, you should refresh your apps home page and see a small message saying you're successfully rending the Pug from our Pug file! Submit your page when you think you've got it right. +As a reminder, this project is built upon the following starter project on Glitch, 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. +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. + +Express needs to know which template engine you are using. We will use the set method to assign 'pug' as the 'view-engine'. app.set('view engine', 'pug') + +Your page will not load until you correctly render the index file in our '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. + +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. +
## Instructions +
## Tests +
```yml @@ -29,19 +38,22 @@ tests: testString: getUserInput => $.get(getUserInput('url')+ '/_api/package.json') .then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'pug', 'Your project should list "pug" as a dependency'); }, xhr => { throw new Error(xhr.statusText); }) - text: View engine should be Pug. testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js') .then(data => { assert.match(data, /('|")view engine('|"),( |)('|")pug('|")/gi, 'Your project should set Pug as a view engine'); }, xhr => { throw new Error(xhr.statusText); }) + - text: Use the correct ExpressJS method to render the index page from the response. + testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js') .then(data => { assert.match(data, /res(\s+)?\.(r\w{5})\(('|")((\.{2})?)\/?(\w{3})\/(\w{5})('|")\)(;)?/gi, 'You successfully rendered the Pug template!'); }, xhr => { throw new Error(xhr.statusText); }) - text: Pug should be working. testString: getUserInput => $.get(getUserInput('url')+ '/') .then(data => { assert.match(data, /pug-success-message/gi, 'Your projects home page should now be rendered by pug with the projects .pug file unaltered'); }, xhr => { throw new Error(xhr.statusText); }) - ```
## Challenge Seed +
## Solution +
```js