Building An Vue.js App With Azure Static Web Apps Service
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
- 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
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.
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.
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.
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.
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
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.
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.
Once the deployment is completed you can go to the overview page of the resource.
After the deployment is completed the deployment automatically creates the workflow action and CI/CD pipeline like below.
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.
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.
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.
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.
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.
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.
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.
npm run serve
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
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
This is a package.json file where the start command is defined in the scripts section.
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.
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.
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.
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
Here are the helper files that act as a database and can be used with all the functions.
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
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.
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.
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.
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.
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.
All the API functions are converted into Azure functions you can see that on the below screen.
- 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.
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.