diff --git a/extension-templating.md b/extension-templating.md new file mode 100644 index 0000000..0a318c8 --- /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` + +Let's 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.