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

To install the dependencies run:

npm run init

To run the web app locally:

1. Start the Vue front-end in the root:

   npm run dev

   This should run the app on http://localhost:3000/.

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. Start the Node.js API (Azure Functions) in the api folder:

   cd api
   func start

   This should run the API on http://localhost:7071/.

4. Finally, start the Azure Static Web Apps CLI in the root:

    swa start http://localhost:3000 --api-location http://localhost:7071

   This should run the Azure Static Web App on http://localhost:4280.