Umbraco Heartcore Vue Boilerplate for Azure Static Web Apps (Preview)

A boilerplate for running a Vue app backed by Umbraco Heartcore on Azure Static Web Apps (Preview).

All API calls are being proixed through Azure Functions avoiding leaking the project alias and API keys.

Features

Prerequisites

To run this sample you will need the following tools installed

Node.js 10 or newer
Azure Functions for your IDE or CLI
An Umbraco Heartcore project.

In order to use the sample you will need an Umbraco Heartcore project with content, media and document types that correspond to those setup in the views and templates of the sample website. You can use demo-headless as the project alias to get started with the sample. The Project behind this alias has been used as the source of the sample, so its a good place to start.

Running on Azure Static Web Apps (Preview)

First you need to create a Static Web App in the Azure Portal, you can use this guide to help you getting started.

On the build tab add the following configuration

Enter / in the App location box
Enter api in the Api location box
Enter dist in the App artifact location box

After the web app has been deployed, you'll need to add the Umbraco Heartcore project alias (the project alias can be found in the Umbraco Cloud Portal) and optionally an API key.

Open the configuration page for your Static Web App in the Azure portal and add UMBRACO__PROJECT_ALIAS and UMBRACO__DELIVERY_API_KEY with their corresponding values.

Running locally

Before running the application, you need to copy .env to .env.local and update it with an url to the local Azure Functions, this will typically be http://localhost:7071/api.

VUE_APP_UMBRACO__API=http://localhost:7071/api

Next you need to add a new file in the api folder named local.setting.json with the following content

{
  "IsEncrypted": false,
  "Values": {
    "UMBRACO__DELIVERY_API_KEY": "<api-key>",
    "UMBRACO__PROJECT_ALIAS": "<project-alias>"
  }
}

<project-alias> should be replaced with your Umbraco Heartcore project alias.

<api-key> should be replaced with an API key, if API protection is not enabled then the line can be removed.

Installation

To install dependencies, run the following command

> npm install

Usage

Run the following command to start the site

> npm run serve

This will start a dev webserver listening on http://localhost:8081

Start the API

If you've installed the Azure Functions Core Tools then run the following command in the api folder to start the API

> func start

borgestj / Umbraco.Headless.StaticWebApp.Vue