How To Host a Vue.js Static Website on Azure

A step by step guide with an example project

Bhargav Bachina
Sep 23, 2020 · 7 min read
Photo by William Iven on Unsplash

There are a number of ways you can build a website with Vue.js such as Java with Vue, NodeJS with Vue, NGINX serving Vue, etc. For the single-page applications, all you need to do is to load the initial index.html. Once you load the index.html the Vue library kicks in and do the rest of the job like loading components, calling API calls, etc. What if there are no backend calls and you want to build a static website with Vue.js?

Azure CDN with blob storage is one of the options which provides a low cost and highly reliable static website hosting solution. These static sites have only CCS, HTML, JS files, fonts, etc. In this post, we can see how we can build a static website with Vue and host that on Azure.

  • Example Project
  • Prerequisites
  • Host Static Website With Azure Blob Storage
  • Deliver With Azure CDN
  • Uploading With Azure CLI
  • Summary
  • Conclusion

Example Project

Here is an example project which we can put in the Azure blob storage for static website hosting. This is a simple profile page with a header and some sections.

// clone the project
git clone https://github.com/bbachi/my-profile-vuejs.git
// install dependencies and start the project
npm install
npm run serve
Example Project

Prerequisites

You should be familiar with Vue and how Vue CLI Service builds stuff. If you are not familiar with Vue check out this link or go to their official website here.

Once you install the necessary components and run the above project on your local machine. It’s time to create Microsoft Azure Account checkout this link

You can see the below dashboard once you create your account.

Azure Dashboard

Create a subscription

You need to create a subscription that’s how It serves as a single billing unit for Azure resources in that services used in Azure are billed to a subscription

Pay-As-You-Go Subscription

Create a Storage Account

An Azure storage account contains all of your Azure Storage data objects: blobs, files, queues, tables, and disks. The storage account provides a unique namespace for your Azure Storage data that is accessible from anywhere in the world over HTTP or HTTPS. Let’s create a storage account under this subscription.

Storage Account

If you don’t have resource groups under subscription you need to create one. Resource groups are the ones that groups all your resources under the subscription. You can create multiple resource groups.

Create a Storage Account

Once you review and create you can see the following screens.

deployment is underway
deployment complete

Host Static Website With Azure Blob Storage

Now we have a subscription, resource groups, and storage accounts created on our Azure account. It’s time to build our app with this command npm run build. When you do that all the built assets can be found in the dist folder.

npm run build

Now, go to your storage account on Azure and click on the static website on the left navigation and give the required index and error pages.

static website

Once you enabled Azure creates we container called $web in which you can upload all your build files as below and it creates the primary endpoint as well.

upload all your build files

Copy the primary endpoint and hit it in the browser once the upload is complete.

Copy the endpoint
static website

If you want to create a folder and upload it into that folder you can do that by selecting advanced and name the folder. I named it my-profile here.

Upload to a folder

In this case, you have to change the context path on the Vue app as well to my-profile

Deliver With Azure CDN

You can enable Azure Content Delivery Network (CDN) to cache content from a static website that is hosted in an Azure storage account that provides consistent low latencies to your website from anywhere in the world.

Let’s select an Azure CDN under blob service and give CDN endpoint name and you need to select your Azure blob storage URL as the origin hostname. Make sure you remove protocol identifier https and trailing slash at the end.

Creating an Azure CDN

If it’s successful you can see newly created endpoints under the Endpoints section.

Endpoints

You can see all the details about this endpoint when you click on it such as the resource group, location, subscription, endpoint, origin, etc.

Endpoint Details

After creating a CDN endpoint, it will not immediately be available for use, as it takes time for the registration to propagate through the CDN. You might get this following error page.

404 Page

Make sure you go through this troubleshooting page. If you set up everything correct wait for 10 minutes or so, it will start working.

Distribute With Azure CDN

Uploading With Azure CLI

We have done everything manually. We can actually do the same thing with Azure CLI commands Let’s see how we can do that.

Step1: The first step would be logging in with Azure CLI. This configures the CLI with the user account. It will open the browser and takes your credentials and gives you a JSON response.

az login

Step2: Let’s create a subscription or set the subscription that you are using for the next commands.

// list subscriptions
az account list --output table
// ses the subscription
az account set --subscription bc5fbeca-2e67-4bfb-85bb-58480ab3bb30

Step3: Create a resource group

az group create --name staticwebhosting --location westcentralus

Step4: Let’s create a storage account with resource group name staticwebhosting and location eastus

az storage account create \
--name staticvueweb \
--resource-group staticwebhosting \
--location eastus \
--sku Standard_ZRS \
--encryption-services blob

Step5: Enable static web hosting on that storage account

az storage blob service-properties update \
--account-name staticvueweb \
--static-website \
--404-document error.html \
--index-document index.html

Step6: Upload all the documents to the blob storage

az storage blob upload-batch -s ./dist/ -d \$web \
--account-name staticvueweb

Step7: Create a CDN endpoint with the following command

az cdn endpoint create -g staticwebhosting \
-n endpointName \
--profile-name profileName \
--origin <endpoint of your blob service>

Summary

  • Azure CDN with blob storage is one of the options which provides a low cost and highly reliable static website hosting solution.
  • You need to create an Azure account, subscription, resource groups, and storage account before you create static website hosting.
  • You need to create a subscription that’s how It serves as a single billing unit for Azure resources.
  • An Azure storage account contains all of your Azure Storage data objects: blobs, files, queues, tables, and disks.
  • Resource groups are the ones that groups all your resources under the subscription.
  • You can just upload all the built files to the $web container that the storage account created for you when you enable a static website.
  • You can upload all the files into a folder as well. In that case, you have to build the app with that particular context path.
  • You can set up an Azure CDN endpoint for your static website on the Azure blob storage.
  • After creating a CDN endpoint, it will not immediately be available for use, as it takes time for the registration to propagate through the CDN.
  • Here is the troubleshooting page if something goes wrong.
  • You can map to a custom domain as well if you have one.

Conclusion

Static website hosting on the Azure is pretty straight forward. Try this if you are building static web apps.

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