How to deploy a dynamic Vue.js application into Azure App Service using Visual Studio Code

Question

Hi,

I am trying to deploy my dynamic Vue.js application using Azure App Service. The issue that I am having is that when I connect my application with GitHub repo in the deployment section and then start to deploy the web app I get the error that Deployment failed, push to GitHub repo first.

What does that mean? I do not know a workaround for this. Kindly please help me in this matter.

Regards,

Asim Khan

Answer 1

Hi @Asim Mahmood Khan we are sorry to hear you're facing this issue.

you're seeing that error message because Azure App Service expects your code to be already present in the linked GitHub repository before it attempts deployment.

Follow these steps to resolve this issue:

• Make sure your Vue.js application code is committed and staged locally using Git commands like git add and git commit.
• Push your local code to your remote GitHub repository using git push origin <branch_name>. Replace <branch_name> with the actual branch you want to deploy (e.g., main or master).
• In the Azure portal, navigate to your Azure App Service deployment configuration.
• Double-check that you've correctly linked your Azure App Service to the appropriate GitHub repository.
• Ensure the deployment branch setting in Azure App Service matches the branch you pushed your code to in step 1.
• Once you've pushed your code to GitHub, Azure App Service might not automatically pick up the changes immediately.
• Consider navigating back to the deployment section in Azure App Service and manually triggering a deployment to initiate the process again.

If the issue persists, you can try clearing the Azure App Service cache to force it to fetch the latest code from your GitHub repository. However, this is usually not necessary and should be attempted after verifying the above steps.

Please let us know if you have further questions.

-Grace