How to Deploy Vue.JS App on Azure using Visual Studio Code

Deploying Vue.JS App made easy using an extension available on Visual Studio Code. In this blog, I’ll guide you on how to create your app service on Azure where you will be able to deploy your Vue.JS app in that instance.

FTF (First Things First)

• Make sure you have an Azure Subscription to continue. If you don’t have a subscription, you can register your own free trial here https://azure.microsoft.com/en-us/free/
• Visual Studio Code installed, of course amigo.
• Vue.JS Application
• A cup of coffee or tea ☕ (Optional)

1. Create Your Azure App Service

1.1 Go to the https://portal.azure.com and search for “App Services” on the search box. Choose the “Create app service” or click the “Add” button.

1.2 Configure the app service based on your preferences.

In this sample, I’m using Free F1 but, you can choose other plans depending on your preferred machine specifications.

1.3 Review and click “Create” when you’re done. Wait until it’s done then you can view your app service overview like the image below.

2. Install Extension on your Visual Studio Code

2.1 Open your Visual Studio Code and navigate to the “Extensions” tab. 2.2 Look for “Azure App Service” then click “Install”

3. Deploying your Vue.JS App

3.1 Build first your app using npm run build command and wait until it finishes. 3.2 Click the Azure Extension logo on the left side and Sign In your Azure Account. This will open a browser tab where you should login your microsoft account with Azure Subscription.

After you successfully login your azure account, you’ll be able to see this.

Option #1

3.3.a Right click your app service, in my case, it’s the “myvuejsapp” then choose the “Deploy to Web App…” 3.4.b Browse the “dist” folder then select it.

Option #2

3.3.a Just simply right click the “dist” folder then choose the “Deploy to Web App…” and choose the app service you want to target. In my case, it’s the “myvuejsapp”

Wait until it finishes deploying then you’re done.

Lastly, visit your site.

Voila! You have now vue.js running and hosted on Azure App Service.

You can also visit this wiki to learn more about this extension.

If you have some questions or comments, please drop it below 👇 :)