How To Host a Vue.js Static Website on Azure
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
- Host Static Website With Azure Blob Storage
- Deliver With Azure CDN
- Uploading With Azure CLI
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 run serve
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
- Microsoft Azure Account
- Create a subscription
- Create a Storage Account
You can see the below dashboard once you create your account.
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
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.
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.
Once you review and create you can see the following screens.
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.
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.
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.
Copy the primary endpoint and hit it in the browser once the upload is complete.
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.
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.
If it’s successful you can see newly created endpoints under the Endpoints section.
You can see all the details about this endpoint when you click on it such as the resource group, location, subscription, endpoint, origin, etc.
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.
Make sure you go through this troubleshooting page. If you set up everything correct wait for 10 minutes or so, it will start working.
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.
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 \
Step5: Enable static web hosting on that storage account
az storage blob service-properties update \
--account-name staticvueweb \
--404-document error.html \
Step6: Upload all the documents to the blob storage
az storage blob upload-batch -s ./dist/ -d \$web \
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>
- 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.
Static website hosting on the Azure is pretty straight forward. Try this if you are building static web apps.