From f81d54db946aead84d92c7a3a1613b4e0ddfed78 Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 2 Jul 2016 13:42:35 +0100 Subject: [PATCH 1/2] URL params + templates tutorial --- extension-templating.md | 61 +++++++++++++++++++++++++++++++++++++++++ stretch-goals.md | 7 ++++- 2 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 extension-templating.md diff --git a/extension-templating.md b/extension-templating.md new file mode 100644 index 0000000..ef2f4f6 --- /dev/null +++ b/extension-templating.md @@ -0,0 +1,61 @@ +# Individual Blog Posts - extension + +Add a page for individual blog posts using express's URL parameters and templating stuff. + +## Step 1 - URL parameters + +Rather than writing an express handler for every single possible URL you want to handle, express +lets you use URL parameters - these are similar to arguments being passed into a function. + +Express's URL parameters look like this: + +- `/users/:userId` - matches `/users/123`, `/users/node-girls` +- `/users/:userId/posts/:postId` - matches `/users/node-girls/posts/node-is-best` + +Lets add a handler for serving individual blog posts: + +```js +app.get('posts/:postId', function (req, res) { + res.send('post id: ', req.params.postId); +}); +``` + +When you go to http://localhost:3000/posts/abc123, you should see 'post id: abc123' shown in your browser. + +## Step 2 - Reading from the file and sending the specific blog post + +Just like with `/create-post`, you need to read your JSON file. Try and send the post content back to +the browser: `res.send(postContentHere)` + +## Step 3 - rendering a template + +Instead of just sending your raw blog post string, you probably want to jazz up your post with some +HTML and CSS. For this, we can use express's built in templating system. You can use any template +language you want (like jade, ejs, or handlebars), but we're going to use mustache (which is similar +to handlebars) in this example. + +Run `npm install --save mustache-express`, then check the documentation for [mustache-express](https://www.npmjs.com/package/mustache-express) +and [express's templating](http://expressjs.com/en/guide/using-template-engines.html). You'll need to +create a template file in `views/post.mustache` like this: + +```mustache + + + + Blog Post + + +

yay blog post!

+
+ {{ post }} +
+ + +``` + +If you get stuck, check out the [example solution](https://github.com/node-girls/express-workshop-complete/tree/templating) :) + +## Even More Stretch Goals: +- Give your posts titles +- Add a post listing page +- Yay! diff --git a/stretch-goals.md b/stretch-goals.md index 7c1911b..c9db941 100644 --- a/stretch-goals.md +++ b/stretch-goals.md @@ -4,6 +4,11 @@ If you finish early, or want to keep working on this as a side project after the It would be a great idea to create a new branch on Git for yourself, so you can experiment and not have to worry about ruining your previous code. +### Display individual posts with URL parameters and templating + +Try some more of express's features by adding a page for individual blog posts using express's URL +parameters and templating stuff. [Tutorial here :)](extension-templating.md). + ### Display the date Edit `script.js` so that the timestamps for the previous blog posts are displayed in a human-readable way. @@ -16,7 +21,7 @@ Instead of writing to a file on your hard drive, you could save your blog posts A really simple, quick-to-setup database is Firebase, by Google. Go to their website [here](https://firebase.google.com/docs/) and check out their Web Get Started guide. ### Host your blog online! -Heroku is a what we call a *Platform as a Service*. You upload your code to them and it will live on one of their servers, meaning you can access it on the general internet from anywhere! +Heroku is a what we call a *Platform as a Service*. You upload your code to them and it will live on one of their servers, meaning you can access it on the general internet from anywhere! Heroku is good because they have a lot of free options for small-scale apps, like yours. From b58b85f788b77dc9cd8cce4d75c32d6dff0319a3 Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 2 Jul 2016 13:45:27 +0100 Subject: [PATCH 2/2] typo --- extension-templating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extension-templating.md b/extension-templating.md index ef2f4f6..0a318c8 100644 --- a/extension-templating.md +++ b/extension-templating.md @@ -12,7 +12,7 @@ Express's URL parameters look like this: - `/users/:userId` - matches `/users/123`, `/users/node-girls` - `/users/:userId/posts/:postId` - matches `/users/node-girls/posts/node-is-best` -Lets add a handler for serving individual blog posts: +Let's add a handler for serving individual blog posts: ```js app.get('posts/:postId', function (req, res) {