Headless on Umbraco .NET Core Part 1: Setup Headless Front-end with Gridsome and Vue.js

Headless on Umbraco .NET Core Part 1: Setup Headless Front-end with Gridsome and Vue.js

Welcome to the first part of our series on "How To Setup An Umbraco .NET Core Headless CMS Using Gridsome and Vue.js With Automated Deployment"!

This first post is focused on the front-end of the Headless architecture.  This piece is what will render the data from Umbraco into HTML.  We will not only get the front-end setup and ready to connect to Umbraco, but we will setup the hosting in Azure Blog Storage as a static site AND setup an AppVeyor build to update the site when code or (eventually) content changes are made.

Ready?  Let's go!

Create Azure Resources

The steps below assume that you have an Azure Portal account setup and a Resource Group ready that you can add Resources to.  If you don't have an Azure Account, you can sign up for a free 12 month trial here: Create your Azure free account today.

Create BLOB Containers

  1. Before proceeding, create a file on your local machine called index.html with the following contents:
    <!DOCTYPE html>
    <html><head><title>Static Website Setup</title></head><body><h1>Static Website Working</h1><p>The Static Website is setup and working correctly</p></body></html>
  2. Then create a file called 404.html with these contents:
    <!DOCTYPE html>
    <html><head><title>Missing</title></head><body><h1>No such page</h1><p>We couldn't find the requested page</p></body></html>
  3. Head into the Azure Portal and add a new Azure resource
  4. Select Storage Account as the resource type
  5. Fill out the basic information (generally you can leave the defaults if you aren't sure), then click "Review + create", then click "Create"
  6. Once the resource is created, click on the "Go to resource" button
  7. Click on "Access keys" on the left, and click the "Show keys" button
  8. Note the "Storage account name" value and the "Key" and "Connection String" values for "key1", as you will need these three values later
  9. Click Containers on the left side, then click the "+ Container" button at the top
  10. Set the name to "media", set the access level to "Blob", then click "Create"
  11. Click on "Static website" on the left
  12. Choose "Enabled", set the index document name to index.html, set the error path to 404.html, then click Save
  13. Note the "Primary endpoint" value, as you will navigate to this multiple times in this tutorial. We will refer to this URL throughout the document as the "Frontend URL".
  14. Click on "Containers" on the left side under "Blob service"
  15. Click on the "$web" container
  16. Click the Upload button, and upload both the index.html file and the 404.html file
  17. Navigate to the Frontend URL (from step 13 above) and verify that you see the "Static Website Working" page

Setup Frontend

Create Gridsome Project

Follow these instructions, taken from https://gridsome.org/docs/, to setup a new Gridsome project on your local machine

  1. Open a command prompt in a local folder (e.g. C:\src\UnicoreGridsome) and execute the following commands to install the Gridsome CLI
    npm install --global @gridsome/cli
  2. Create the Gridsome project by executing:
    gridsome create Frontend

Create Git Repository

  1. Add a new Git repository in your service provider of choice (GitHub, Bitbucket, Azure DevOps, etc.)
  2. Initialize C:\src\UnicoreGridsome\Frontend as a new Git repository, and add your remote repo as a remote named origin
  3. Commit and push the local changes into your remote repository

Publish and Review

  1. Open a command prompt in the C:\src\UnicoreGridsome\Frontend directory
  2. Execute npm run build to compile all the Gridsome assets
    npm run build
  3. Use Azure Storage Explorer, or the Azure Portal interface, to upload the contents of the "dist" directory into the $web container created above, replacing the existing files in that folder
  4. Navigate to your Frontend URL, you should see a Gridsome "Hello, world!" page

Setup AppVeyor Builds

We are going to use AppVeyor here because we already have an account setup. Feel free to use Azure DevOps, TeamCity/Octopus, or some other CI/CD tool to setup automated builds and deploys. To ease translation between tools, I will be using scripts to perform the builds and deploys rather than using the built-in widgets. Feel free to adapt for your tool. In addition, we will only be setting up the frontend build because that is all that is needed for this tutorial series, but feel free to setup a backend build for yourself if you like. AppVeyor offers a free trial if you would like to try it out to get this working.

Setup the Frontend Build

  1. Add a new project, and choose your front-end repository
  2. Go to Settings, Build, choose Script at the top, and enter this PS Core script before saving:
    npm install
    npm run build
    cd dist
    Compress-Archive -Path * -DestinationPath ..\website.zip
  3. Go to Environment, and change the "Build worker image" to "Visual Studio 2019" and Save
  4. Go to Artifacts, add an artifact with a path of website.zip, and deployment name of website.zip, and a type of Auto, then Save
  5. Go to Deployment, click Add Deployment, and choose the "Azure Blob Storage" deployment provider
  6. Set the "Storage account name" and "Storage access key" to the values you noted down when setting up the storage account
  7. Set the "Container name" to $web
  8. Set the artifact to website.zip
  9. Check the boxes next to "Unpack zip artifacts...", "Remove all...", and "Set blobs Content-Type header..."
  10. In the "gzip blobs on upload..." field, set the value to **/*.html, **/*.js, **/*.css, **/*.json
  11. Click Save
  12. Click on the "Current Build" tab at the top, and click "New Build"
  13. Verify the build succeeds and your Gridsome page still displays properly

With this setup, you have everything you need for the front-end rendering of the headless website.  In addition, you have it hosted on Azure and a way to deploy updates to the site!

Next up will be:

Headless on Umbraco .NET Core Part 2: Setup Unicore Back-end


Let us know if you have any questions or issues in the comments below!


Benjamin and Jason

comments powered by Disqus
back to top