Azure Static Web App Template with Node.js API

This is a template repository for creating Azure Static Web Apps that comes pre-configured with:

• Vue.js v3
• Vue Router v4
• Vuex v4
• A Node.js Azure Function
• Vite.js

---

Template

This template contains a minimal Vue.js based application with a component that displays an h1 element, two buttons and a paragraph. The text for the h1 is retrieved from the Vuex store. It's either a default value or a value retrieved via the getTitleFromApi function, located in the api folder.

Live version running in Azure.

---

Running Azure Static Web Apps locally

1. To install the dependencies run:

npm run init

2. Navigate to the api folder and add a file named local.settings.json with this content:

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node"
  }
}

This file is .gitignored since it is used to store connection strings and secrets.

3. To run everything type:

npm run all

This starts the Vue app on localhost:3000, the Node Azure Function on localhost:7071, and the Static Web App on localhost:4280.

If you need to change the port numbers, please edit them in the package.json scripts section.

4. View the Static Web App on http://localhost:4280.