Adding serverless blog example #1457

jakelumetta · 2018-02-26T15:19:37Z

Looking forward to your feedback!

sdras · 2018-02-27T21:09:43Z

src/v2/cookbook/serverless-blog.md

@@ -0,0 +1,268 @@
+# Create a serverless CMS-Powered Blog Using Vue.js


You need to index this article, here's an example of how to do so:

--- title: Create a Serverless CMS-Powered Blog type: cookbook order: 5 ---

sdras · 2018-02-27T21:10:52Z

src/v2/cookbook/serverless-blog.md

@@ -0,0 +1,268 @@
+# Create a serverless CMS-Powered Blog Using Vue.js
+
+So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few  Vue.js blog components and some routes and have it all just work, right?


picky, but there's an extra space between "few" and "Vue.js"

sdras · 2018-02-27T21:12:07Z

src/v2/cookbook/serverless-blog.md

+
+So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few  Vue.js blog components and some routes and have it all just work, right?
+
+This tutorial will teach you how to do just that. We're going to quickly build a serverless CMS-powered blog with Vue.js. It uses ButterCMS, an API-first CMS that lets you manage content using the ButterCMS dashboard and integrate our content API into your Vue.js app. You can use ButterCMS for new or existing Vue.js projects.


Please link up ButterCMS, i.e.
It uses [ButterCMS](https://buttercms.com/)

sdras · 2018-02-27T21:14:22Z

src/v2/cookbook/serverless-blog.md

+This API request fetches your blog posts. Your account comes with one example post which you'll see in the response.
+
+## Display posts
+To display posts we create a simple `/blog` route (using vue-router) in our app and fetch blog posts from the Butter API, as well as a `/blog/:slug` route to handle individual posts. See our [API reference](https://buttercms.com/docs/api/?javascript#blog-posts) for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.


We try to avoid the word "simple" because, depending on the skill level of the reader, it may not be very simple for them.

sdras · 2018-02-27T21:16:37Z

src/v2/cookbook/serverless-blog.md

+</template>
+```
+
+Now our app is pulling all blog posts and we can navigate to individual posts. However, our next/previous post buttons are not working.


It might be nice to add a screenshot here so that people can visualize what you're referring to

sdras · 2018-02-27T21:20:10Z

src/v2/cookbook/serverless-blog.md

+
+Now our app is pulling all blog posts and we can navigate to individual posts. However, our next/previous post buttons are not working.
+
+One thing to note when using routes with params is that when the user navigates from /blog/foo to /blog/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.


The "however" here would be better served as a tip. Like:

<p class="tip">Be aware, that using the component this way will mean that the lifecycle hooks of the component will not be called. Visit the Vue.js docs...</p>

sdras · 2018-02-27T21:22:05Z

src/v2/cookbook/serverless-blog.md

+
+Use Butter's APIs for categories, tags, and authors to feature and filter content on your blog.
+
+See our API reference for more information about these objects:


The use of "our API" makes this sound like an ad. It's ok to use ButterCMS for an example, but the our here should refer to Vue, not ButterCMS

sdras · 2018-02-27T21:27:07Z

Overall, its a great start! I think this is a great introduction. This is also easy to follow. There are a couple of major things that need to be changed to get the PR through:

We need the initial comment to properly index the recipe (that's probably why all the checks are failing, though it might need a rebase)
This doesn't really follow the acceptable format for cookbook entries. It think it's pretty clear we can stray a bit, with the exception of when to avoid this pattern and alternative patterns, which this particular recipe needs in order to sound like documentation and not advertisement
You mention "Serverless" in the title and barely mention it in the article. It either needs to be clarified in the post or removed. At this point, I'm thinking removal makes more sense because it's not a central theme of the article, which seems more based around CMS and blog creation.

jakelumetta · 2018-03-01T20:51:30Z

@sdras Thanks for the great feedback! I've made your suggested changes but did have one question. Regarding your feedback on "when to avoid this pattern" - could you provide more detail in the context of adding a blog to an application?

I could also use a bit more direction on what you're looking for in terms of "Alternative patterns". Would this be an alternate way to add a blog to your Vue.js app?

Thanks!

sdras · 2018-03-03T22:07:20Z

@jakelumetta good question! You could probably explore such options as Nuxtent, which allow you to use Vue Component inside your markdown files, which allow you to write and process markdown files instead of using a static site generator like jekyll. That would be a good candidate for a quick compare/contrast or at least mention in case people want to know what their options are.

jakelumetta · 2018-03-07T02:57:40Z

@sdras Very cool. Wasn't aware of Nuxtent actually, thanks :)

I just added an Alternative Pattern section. Let me know your thoughts.

sdras · 2018-03-07T13:20:06Z

src/v2/cookbook/serverless-blog.md

+
+That's it! You now have a fully functional serverless blog running in your app.  We hope this tutorial was helpful and made your development experience with Vue.js even more enjoyable :)
+
+## Alternative Pattern


Kind of pedantic, but we call this section Alternative Patterns for every entry even if it's just one, for consistency :)

sdras · 2018-03-07T13:21:16Z

src/v2/cookbook/serverless-blog.md

+
+<p class="tip">Be aware, that using the component this way will mean that the lifecycle hooks of the component will not be called. Visit the Vue.js docs to learn more about [Dynamic Route Matching](https://router.vuejs.org/en/essentials/dynamic-matching.html)</p>
+
+To fix this we need to simply watch the `$route` object and call `getPost()` when the route changes.


We don't use the word "simply" because it can be offputting to beginners if a concept doesn't seem that simple to them.

sdras · 2018-03-07T13:21:58Z

src/v2/cookbook/serverless-blog.md

+
+One thing to note when using routes with params is that when the user navigates from /blog/foo to /blog/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. 
+
+<p class="tip">Be aware, that using the component this way will mean that the lifecycle hooks of the component will not be called. Visit the Vue.js docs to learn more about [Dynamic Route Matching](https://router.vuejs.org/en/essentials/dynamic-matching.html)</p>


This is a good tip to include, thanks for pointing this out to people

sdras · 2018-03-07T13:23:31Z

src/v2/cookbook/serverless-blog.md

+## Display posts
+To display posts we create a `/blog` route (using vue-router) in our app and fetch blog posts from the Butter API, as well as a `/blog/:slug` route to handle individual posts. See our [API reference](https://buttercms.com/docs/api/?javascript#blog-posts) for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.
+
+See our API reference for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.


In this section, you say "our API reference" a few times- please say "the ButterCMS API reference" as you're in the vue docs and "our API reference" should refer to Vue's API reference.

sdras · 2018-03-07T13:25:55Z

src/v2/cookbook/serverless-blog.md

+
+So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few Vue.js blog components and some routes and have it all just work, right? What you're looking for a "serverless" blog that's powered entirely by API's you can consume directly from your Vue.js application. This tutorial will teach you how to do just that, let's dive in!
+
+We're going to quickly build a serverless CMS-powered blog with Vue.js. It uses [ButterCMS](https://buttercms.com/), an API-first CMS that lets you manage content using the ButterCMS dashboard and integrate our content API into your Vue.js app. You can use ButterCMS for new or existing Vue.js projects.


You say Serverless here and at the end without any reference or explanation to what is Serverless about it, and why that's important, or how it works. I would either remove that descriptor or spend more time explaining Serverless concepts and why that matters here.

In my opinion, it has little to do with the rest of the article, so I'd just remove the reference for clarity and flow, but it's up to you.

sdras · 2018-03-07T13:27:39Z

src/v2/cookbook/serverless-blog.md

+  this.getPostsByCategory()
+}
+```
+## Wrap up


Please put the wrap up section after the alternative patterns section. I don't think you need the part about the feedback and PR, because that's kind of self explanatory, but I could go either way on it :) It's not a bad thing to include.

sdras · 2018-03-07T13:29:24Z

This is looking great! We're almost there. I left a few more comments, when we've squared those away, I think we'll be good to merge

jakelumetta · 2018-03-07T13:46:57Z

@sdras awesome - I've made all of your suggested updates. Thanks for the great editing help. 👍

sdras · 2018-03-07T14:16:10Z

Perfect! Well done.

Adding serverless blog example

2b34011

jakelumetta mentioned this pull request Feb 26, 2018

Can I contribute a blog example? #1432

Closed

sdras self-requested a review February 26, 2018 15:26

sdras reviewed Feb 27, 2018

View reviewed changes

Pull request feedback

3eff7d8

Adding Alternative Pattern section

2f5392e

sdras reviewed Mar 7, 2018

View reviewed changes

A bit more cleanup from PR feedback

da3761e

sdras merged commit ec53680 into vuejs:master Mar 7, 2018

		@@ -0,0 +1,268 @@
		# Create a serverless CMS-Powered Blog Using Vue.js

		@@ -0,0 +1,268 @@
		# Create a serverless CMS-Powered Blog Using Vue.js

		So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few Vue.js blog components and some routes and have it all just work, right?


		So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few Vue.js blog components and some routes and have it all just work, right?

		This tutorial will teach you how to do just that. We're going to quickly build a serverless CMS-powered blog with Vue.js. It uses ButterCMS, an API-first CMS that lets you manage content using the ButterCMS dashboard and integrate our content API into your Vue.js app. You can use ButterCMS for new or existing Vue.js projects.


		Now our app is pulling all blog posts and we can navigate to individual posts. However, our next/previous post buttons are not working.

		One thing to note when using routes with params is that when the user navigates from /blog/foo to /blog/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.


		Use Butter's APIs for categories, tags, and authors to feature and filter content on your blog.

		See our API reference for more information about these objects:


		That's it! You now have a fully functional serverless blog running in your app. We hope this tutorial was helpful and made your development experience with Vue.js even more enjoyable :)

		## Alternative Pattern


		<p class="tip">Be aware, that using the component this way will mean that the lifecycle hooks of the component will not be called. Visit the Vue.js docs to learn more about [Dynamic Route Matching](https://router.vuejs.org/en/essentials/dynamic-matching.html)</p>

		To fix this we need to simply watch the `$route` object and call `getPost()` when the route changes.


		So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few Vue.js blog components and some routes and have it all just work, right? What you're looking for a "serverless" blog that's powered entirely by API's you can consume directly from your Vue.js application. This tutorial will teach you how to do just that, let's dive in!

		We're going to quickly build a serverless CMS-powered blog with Vue.js. It uses [ButterCMS](https://buttercms.com/), an API-first CMS that lets you manage content using the ButterCMS dashboard and integrate our content API into your Vue.js app. You can use ButterCMS for new or existing Vue.js projects.

Adding serverless blog example #1457

Adding serverless blog example #1457

Uh oh!

Conversation

jakelumetta commented Feb 26, 2018

Uh oh!

sdras Feb 27, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sdras commented Feb 27, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jakelumetta commented Mar 1, 2018

Uh oh!

sdras commented Mar 3, 2018

Uh oh!

jakelumetta commented Mar 7, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sdras commented Mar 7, 2018

Uh oh!

jakelumetta commented Mar 7, 2018

Uh oh!

sdras commented Mar 7, 2018

Uh oh!

Uh oh!

sdras Feb 27, 2018 •

edited

Loading

sdras commented Feb 27, 2018 •

edited

Loading