Umbraco Gridsome

Question! Can Umbraco and Gridsome work together?

A little search on Twitter for Umbraco Gridsome reveals that the usual suspects, Matt Brailsford and Pete Duncanson, figured this out in like 2018.
So the answer is yeah. There's not been much chatter around the integration since then though and I don't think there are many Umbraco powered Gridsome sites running in the wild. I thought it would be fun to make one.

Was it easy? Yeaaaaahhhh, not like super though. I had to do a bit of tinkering to get media working the way I wanted.
More about that under the Azure Blob section below. I also added a little extra complexity because I was reading about the deployment process on the Gridsome website, specifically the Netlify integration. Netlify have a free tier which, who doesn't like free?  Shortly after reading that though I also read a blog post, called "How to host a simple Umbraco site in Azure as cheap as possible" and that was it, I set myself the added challange to run this blog as cheaply as possible.

So what is involved?

• Umbraco
• GraphQL
• Azure Webapp (Free plan)
• Azure Blob/CDN (Pay as go)
• Gridsome
• Netlify (Free plan)

Umbraco

I am using Umbraco 8. The main thing is setting Umbraco up so that it can be queried by Gridsome. Gridsome uses GraphQL. Umbraco has two GraphQL options. The Official version which is Umbraco Heartcore (not free) or the community package (free) built by the scarey clever Mr Rasmus J Pedersen. Guess which one I used. 

I set up a simple Umbraco Blog. I decided to use the Content Grid Data Type as the main content field because I wanted that flexibility for the frontend Vuejs components. The Umbraco GraphQL package serializes that Grid Data Type using the Our.Umbraco.GraphQL.Adapters.Types.JsonGraphType. I had to hack about with that to get it to return in a format I could use via Gridsome. Being a Content Grid also meant I had to resolve the Umbraco {localLinks} at that point too. I'm not entirely sure that is the correct way to do it but the GraphQL package is like 10% code and 90% magic.

This is an example of how to call an Umbraco content page using GraphQL

Azure Webapp

I created a new Azure Webapp using the free service plan. The free Webapp comes with quotas. You can only use so much of each resource. It means I can't have the Webapp running 24/7. That's not as big a problem as it sounds though as Gridsome will produce a static version of the site and that will be hosted by Netlify. I basically switch the Azure Webapp on when I want to publish something and then turn it off after it is live. It is an extra step when publishing, but that's where the majority of the cost saving is applied.

This is a view of the resources used after one publish.

Azure Blob/CDN

Media is obviously a problem when cheaping out of proper web hosting. That's where Umbraco shines though. There is a package that will off load the media to Blob Storage. Umbraco also has Imageprocessor which allows for some great image manipulation. The blog gets rendered as a static site so I needed the media to resolve to the cached versions instead of the relative paths. Luckly, there are also packages for that. I used Imageprocessor - Azure Blob Cache and I took a copy of the Azure CDN Toolkit and updated it to use Umbraco 8. I also liked Niels Swimberghes' article about Implementing Responsive Images in Umbraco. I turned images off in TinyMCE and replaced them with his Macro version. This allows all images to be converted to WebP and then cached. Seems the best fit for Gridsome.

Gridsome

If you read the Gridsome introduction, it's hard not to be seduced by the features.

• Vue.js for frontend
• Local development with hot-reloading
• File-based page routing
• Dynamic routing
• Static file generation
• Data sourcing
• GraphQL data layer
• Automatic Code Splitting
• Plugin ecosystem

And then there's the overall, Fast by Default claim. It ticks a lot of boxes.

I followed the instructions on the Gridsome site and setting up the intial project was pretty straight forward. I work on a Mac with Parallels so I can tab between Visual Studio and Visual Studio Code simply enough.
The main bit of functionality, getting access to the Umbraco content, is as simple as pointing to the Umbraco GraphQL end point in the gridsome.config.js file.

module.exports = {
  siteName: 'Bodenko',
  plugins: [{
    use: '@gridsome/source-graphql',
    options: {
    url: `https://[azurewebapp].azurewebsites.net/umbraco/graphql`,
    fieldName: 'cms',
    typeName: 'cmsTypes',
    json: {},
    headers: {
     Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
    }
  }
}]};

The only other bit from there is to tell Gridsome what pages you want to generate. I did that by using the createPages api call in the gridsome.server.js file. This is the code to create the blog posts.

api.createPages(async({graphql, createPage}) => {
  const { data } = await graphql('query {cms {umbraco {content {byType {blogPage {items { _id _url title _name _writerName metaDescription contentGrid }}}}}}}')
  data.cms.umbraco.content.byType.blogPage.items.forEach(function(node, index) {
    createPage({
      path: `/${node._url.slice(1,-1)}`,
      component: './src/templates/BlogPage.vue',
      context: {
        id: node._id,
        path: node._url.slice(1, -1),
        title: node.title ? node.title : node._name,
        metaAuthor: node._writerName,
        metaDescription: node.metaDescription
        content: node.contentGrid
      }
    })
  })
})

Netlify

To initally deploy my Gridsome site to Netlify, I created a new site page, selected my project repo from GitHub and added the following build settings:

Build Command:gridsome build
Publish directory:dist

Conclusion

The final publishing process (cheapass solution) goes like this...

• Create a blog post (locally)
• Upload the Umbraco.sdf to the Azure Webapp -> App_Data Folder
• Turn the Azure Webapp on via the Azure Portal
• Trigger a Deploy via Netlify portal (Will looking into doing this programatically though via Umbraco Events)
• Turn the Webapp off via the Azure Portal

The only cost so far is the domain name registration and blob storage and I suppose the time building it.
I'll try remember to update this with more precise figures when I get a few more months hosting.

I enjoyed building this site, it's been a fun exercise. I particularly like using Vuejs as the frontend. I've dabbbled with Vuejs and Umbraco in the past but this just feels like a more holistic approuch. Like, I'm all in on Vuejs and I'm okay with that :)