Skip to content

A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

License

Notifications You must be signed in to change notification settings

marcduiker/staticwebapp-vue-vite

Repository files navigation

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:


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.

Using the default title

Using the title from the API

Live version running in Azure.


Running Azure Static Web Apps locally

  1. To install the dependencies run:
npm run init
  1. 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.

  1. 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.

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

About

A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Topics

Resources

License

Stars

Watchers

Forks