Building An Vue.js App With Azure Static Web Apps Service

A Complete example with NodeJS Azure Functions API

Bhargav Bachina
Aug 28, 2020 · 11 min read
Azure Static Web Apps

Nowadays there are so many ways to build and deploy Vue.js apps such as Vue.js with Java, Vue.js with Nodejs, serverless, etc. Building with Azure Static Web apps service is one of them and it is recently released by Microsoft Azure and it’s in the preview mode. With this service, you can develop modern apps fast with global reach and scale.

You can accelerate your app development with a static front end and dynamic back end powered by serverless APIs. Experience high productivity with tailored local development experience, GitHub native workflows to build and deploy your app, and unified hosting and management in the cloud.

In this post, We will see how we can develop a Vue.js app with this service with an example of frontend and backend NodeJS API calls.

  • Benefits of Azure Static Web Apps
  • With Other Frameworks
  • Prerequisites
  • Example Project
  • Create a GitHub Project
  • Configure an Azure Static Webapp In Azure
  • Folder Structure and Configuration
  • Vue.js Development
  • Azure Functions Development
  • How To Run the Whole Setup Locally
  • Publish the App to Azure
  • Demo
  • Summary
  • Conclusion

Benefits of Azure Static Web Apps

There are a lot of benefits to using Azure static web apps. If you are looking for a faster development and deployment process with just a git commit you would definitely check this out. Here are some of the benefits according to their website.

  • Productivity from local development to GitHub native workflows for CI/CD
  • Managed global availability for static content
  • Dynamic scale for serverless APIs
  • Streamlined management including custom domain configuration and authentication and authorization

With Other Frameworks

You can build Azure static web apps with any frontend framework. Check out the same article with other frameworks.

Prerequisites

You need to know a lot of things as prerequisites if you want to understand the Azure Static web apps service. First, you need to create two accounts: a Github account to store the source code and Microsoft Account to deploy that code using Azure static web app service. Let’s create these accounts by following the below links. You can start both for free.

Since we are building a Vue.js application you need to be familiar with Vue CLI, nodejs, and typescript. First, you need to install NodeJS, Vue CLI and then you can create an application with the CLI.

All the API code that you develop for the application will be converted to Azure functions at the time of deployment. You need to be familiar with the following. When you make API calls from your app you need to proxy those calls to API you need a Live Server extension for that.

Example Project

Here is an example of a simple todo application that creates, retrieves, edits, and deletes tasks. In a normal way, we actually run the API on the NodeJS server and you can use MongoDB to save all these tasks.

Example Project

When it comes to Azure Static web apps you have to run the API with Azure Functions. We need to go through a series of steps to set it up. Let’s dive into those steps in the following sections.

Create a GitHub Project

Azure Static Web Apps publishes websites to a production environment by building apps from a GitHub repository. If you don’t have a Github account it's time to create one. I created a repository for the project called vue-azure-static-web-app.

Github Repo

Configure an Azure Static Webapp In Azure

You need to create a Microsoft Azure account before you do anything. Once you log in and you can click on create a resource and select Static Web App

Static Web App

You can go to this below page gives all the necessary details such as Resource Group, name, region, etc. You should log in to your Github account under the source Control Details section and select appropriate details such as the repo, branch to trigger the action, etc.

Static Web App Setup

You can notice that I gave the same project that I created above in the Github Account. You need to give the details such as App location, API location, and artifact location. All the API code is under the folder api, and when I build the Vue.js application all the built files are placed under the folder dist.

build details
Review and Create

Once the deployment is completed you can go to the overview page of the resource.

Resource Overview Page

After the deployment is completed the deployment automatically creates the workflow action and CI/CD pipeline like below.

git workflow

Here is the complete YAML file generated by the Azure static web app service. You can notice all the details which are given in the resource creation process.

Build Details
https://github.com/bbachi/vue-azure-static-web-app/blob/master/.github/workflows/azure-static-web-apps-brave-ocean-0a8755b0f.yml

Folder Structure and Configuration

The App’s folder structure is very important, and I would recommend you maintain a separate folder for Vue.js and Azure Functions as below.

Folder Structure

Once you decide on the folder structure you need to configure and let the workflow knows where are the App code and API code in the Azure static web apps YAML file like below. Notice the app_location, api_location, and app_artifact_location in the below YAML file. Since when I build the Angular code it will be in the folder called /dist/ so we need to give this location as app_artifact_location.

azure-static-web-app.yaml

Vue.js Development

Once you create the separate folder for the UI code you need to start with the following command to scaffold the Vue structure with the help of Vue CLI Service. We will not build the entire app here instead we will go through important points here. You can clone the entire GitHub Repo and check the whole app.

vue create todo-app

Here are the main.js and App.vue files for the app as the bootstrap components that means this is the first component that loads in the browser. You can import all the CSS related files in the App.vue file.

Vue files

The App.vue component is the first component that loads since it is defined in the main.js file. This is a simple application where you add, update, delete tasks. You can go through the GitHub repo to check the rest of the files.

We have another two important components here one is for the createTask Form component and another is for the Tasks table.

Create Task and Tasks Components

Here is the service file which calls the API, in this case, Azure Functions. We have four API operations to get, add, edit, and delete tasks with root path /api.

TodoService.js

Run the Vue code in local with the following command which runs on the port 8080 on localhost. Make sure you are in the root folder of Vue code which is todo-app here.

cd todo-app
npm run serve
Vue Code running on port 8080

Azure Functions Development

Make sure you install VSCode extensions as I mentioned in the prerequisites section. Let me go through the whole creation process for one function here. Once you install those extensions.

First, you need to create a project with the Azure Functions extension in the VSCode and click on the folder icon on the top to create an Azure Functions project.

Browse the folder

You can select the api folder where all the Azure Functions code goes

Select a language

You need to select the language that you need to write functions with. In our case, select the Javascript.

Select a template for your project’s first function

Select a template HTTP trigger since we are writing an API for our angular code.

The whole process creates an Azure functions project with the following structure. It contains a package.json where you can run the project with this command npm start

Azure Functions Project Structure

This is a package.json file where the start command is defined in the scripts section.

package.json

We have four functions defined for the four API routes. Let’s have a look at the todos-get function. We have two files for each function: index.js and function.json.

index.js

Every function has an index.js file as the starting point and receives HTTP requests and context objects and sends an HTTP response back. You can access the HTTP request and response through the context object. You can import other files into this for the processing, database access layer, etc.

index.js

function.json

Every function has a function.json file which defines the route, type of HTTP method, directions of the request, and response objects. For example, This is the get request and the direction is in with the req object. The object is res for the direction out.

function.json

You have the route called todos in the JSON file that means when you start the Azure Functions with this command func start you can access on http://localhost:7071/api/todos

Access the API in the browser

Here are the helper files that act as a database and can be used with all the functions.

helper files

Once you have all the functions in place and you can just start and test all the functions. You can see all the functions ready when you run the command npm start

Azure Functions start

How To Run the Whole Setup Locally

Now you have the Vue app running on port 8080 and the Azure functions running on port 7071. All you need to add a proxy to have an interaction between these.

Local Development

There should be some interaction between these two. We can proxy all the API calls to nodejs API. Vue CLI provides some inbuilt functionality and to tell the development server to proxy any unknown requests to your API server in development, we just need to add this file at the root where package.json resides and configures the appropriate API paths.

vue.config.js

With this in place, all the calls start with /api will be redirected to http://localhost:3080 where the nodejs API running.

Once this is configured, you can run the Vue app on port 8080 and nodejs API on 3080 still make them work together.

Running the entire setup locally

Publish the App to Azure

Once everything is working as expected in the local environment. It’s time to push it to Azure and test it out.

Since everything is configured already when you create the Github project all you need to push the code into your master branch. As soon as you push the code into the master branch Github actions trigger the build and deploy your Vue App into Azure Static web apps service. All the code under api will be converted into Azure Functions. Let’s see that in action.

static web app in action
Successful Deployment
Deployment Successful

Demo

As soon as your job is successfully done You can explore the recent deployment in the Azure portal. You can see the APIs are converted into Azure Functions.

Demo

All the API functions are converted into Azure functions you can see that on the below screen.

Azure Functions

Summary

  • Building with Azure Static Web apps service is one of the deployment strategies and it is recently released by Microsoft Azure and it’s in the preview mode. With this service, you can develop modern apps fast with global reach and scale.
  • You can accelerate your app development with a static front end and dynamic back end powered by serverless APIs.
  • You need to create two accounts: a Github account to store the source code and Microsoft Account to deploy that code using Azure static web app service.
  • Azure Static Web Apps publishes websites to a production environment by building apps from a GitHub repository. If you don’t have a Github account it's time to create one.
  • You need to create a Microsoft Azure account before you do anything. Azure static web apps service is in preview mode at the time of writing.
  • It’s better to create a separate folder for Vue.js and API development.
  • Once you decide on the folder structure you need to configure and let the workflow knows where are the App code and API code in the Azure static web apps YAML file especially, the app_location, api_location, and app_artifact_location.
  • We need to write the API with Azure functions. Make sure you install the Azure Functions extension for Visual Studio Code, Live Server extension for Visual Studio Code, and go through these Azure Functions if you are not familiar.
  • By default, Vue.js runs on port 8080 and Azure functions run on port 7071 in the local development.
  • You can use vue.proxy.js to facilitate communication between Vue and Azure functions in the local environment.
  • As soon as you push the code into the master branch Github actions trigger the build and deploy your Vue App into Azure Static web apps service. All the code under api will be converted into Azure Functions.

Conclusion

Azure static Web Apps service is a great service introduced by Microsoft Azure. This is in preview mode right now. If you want to build a web app and go from local development to production environment within minutes and take advantage of all the production-grade features out of the box. You should definitely try this service.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store