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.1 Open your Visual Studio Code and navigate to the “Extensions” tab.

2.2 Look for “Azure App Service” then click “Install”.

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.

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.

3.3.b 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 👇 :)

About the author

Mark Deanil Vicente is passionate in sharing to the community by means of writing article & speaking about development technologies especially for web, cloud and mobile. He's also an active Microsoft Most Value Professional (MVP). Read more...