Headless on Umbraco .NET Core Part 1: Setup Headless Front-end with Gridsome and Vue.js - ProWorks Web Design, Development, and Umbraco Blog

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

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>

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>

Head into the Azure Portal and add a new Azure resource
Select Storage Account as the resource type
Fill out the basic information (generally you can leave the defaults if you aren't sure), then click "Review + create", then click "Create"
Once the resource is created, click on the "Go to resource" button
Click on "Access keys" on the left, and click the "Show keys" button
Note the "Storage account name" value and the "Key" and "Connection String" values for "key1", as you will need these three values later
Click Containers on the left side, then click the "+ Container" button at the top
Set the name to "media", set the access level to "Blob", then click "Create"
Click on "Static website" on the left
Choose "Enabled", set the index document name to index.html, set the error path to 404.html, then click Save
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".
Click on "Containers" on the left side under "Blob service"
Click on the "$web" container
Click the Upload button, and upload both the index.html file and the 404.html file
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

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
```
Create the Gridsome project by executing:
```
gridsome create Frontend
```

Create Git Repository

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

Publish and Review

Open a command prompt in the C:\src\UnicoreGridsome\Frontend directory
Execute npm run build to compile all the Gridsome assets
```
npm run build
```
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
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

Add a new project, and choose your front-end repository
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
```
Go to Environment, and change the "Build worker image" to "Visual Studio 2019" and Save
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
Go to Deployment, click Add Deployment, and choose the "Azure Blob Storage" deployment provider
Set the "Storage account name" and "Storage access key" to the values you noted down when setting up the storage account
Set the "Container name" to $web
Set the artifact to website.zip
Check the boxes next to "Unpack zip artifacts...", "Remove all...", and "Set blobs Content-Type header..."
In the "gzip blobs on upload..." field, set the value to **/*.html, **/*.js, **/*.css, **/*.json
Click Save
Click on the "Current Build" tab at the top, and click "New Build"
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!