Building a Shopify Powered Blog with Contentful Webhooks and Micro

Kevin Green
Dec 11, 2017 · 9 min read

What we’re using

Micro — Microservice framework that will be listening to webhooks
Now — Hosting platform for our microservice
Contentful Webhooks — sending data to our Micro service
Contentful NPM Package — Cleaning and parsing our data
Shopify Node API — Sending our cleaned up data back to Shopify
Ngork — For mapping localhost to an accessible web endpoint


'/blogs/passport/:slug': ({ slug }) => {
const cached = stories.get(slug)
if (cached) {
return true
}
return api.getEntries({
content_type: 'passports',
'fields.slug': slug,
include: 8
}).then(({ items }) => {
stories.set(slug, items[0].fields)
stories.emit('updated')
return true
})
}

The Basics

Before we go too deep let’s do some initial setup, and talk about some conventions we’ll be following to make this all work.

  • In that model define the basics, Title, Published At, Featured Image, Author, Article Id (this one is really important and should be required), and then also create a field called Content Modules and make it a reference type with many:
Image for post
Image for post
  • Once you create your modules (you can create more than 2 if you want go nuts) you’ll need to go back to the content model for the actual articles and edit the Content Modules we created. Hit Settings → Validations. Check off the accept only specific entry type and select the modules you just created, this will allow us to build out really robust blog posts that the client can manage without needing to be a developer :).

Setting up our Microservice

I have a repo already set up that you guys can reference, but it’s actually a full working example of a blog I’m using now which I will get into later. For now we can start with building the foundation.

Image for post
Image for post
Basic configuration for webhooks and contentful
  • We built a Content type in Contentful for handling our advanced blogging needs
  • We set up a micro server for accepting webhooks from Contentful
  • We set up ngrok for handling local webhook development (we’ll switch this to a now endpoint when we’re production ready)
  • We’re listening to webhook data from Contentful in our Micro instance and logging it to the console

Time to get Jazzy — Cleaning the data and pushing to Shopify

So that initial parsed data we just console logged is a really good step in the right direction. However the way Contenful provides data from the Webhook isn’t as robust as we’ll need. One of the most powerful things about Contentful is it’s ability to nest content models, which is exactly what we did for our referenced Content Modules. In order to retrieve nested data structures we have to use the Content Delivery NPM package which we already installed above. So let’s extend how we’re fetching our data.

Image for post
Image for post
URL structure in Shopify Admin


Hosting your service

One last thing, we don’t want this to run locally forever so we have to set up some hosting, I find now to be one of the easiest ways to handle this, make sure you switch the node instance to at least 1 so that the server doesn’t spin down and don’t forget to switch your webhook endpoint in contentful. You can of course roll your own EC2 or use another service like Heroku.

Taking it even further

The above example is pretty basic, you could modify it to handle all your content within your Shopify site, things like home/about/simple pages. This would allow you to create a more robust and engaging web experience within your Shopify build.

Enjoy ~

The Couch

This isn't where I left my website