Deploy a Vue application to Azure App service through VS code not success #51639

yejiyang · 2020-04-03T11:32:41Z

I followed this tutorial this tutorial to deploy to Azure App Service using Visual Studio Code. It works nice.
When I try to deploy a Vue application (I create a HelloWorld Vue application from Vue-Cli ), all seems work until I open the final website. I see a page said "Hey, Node developers! Your app service is up and running. Time to take the next step and deploy your code".

Any suggestions how I can move forward?

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

ID: 116d6e28-471b-2cf4-3eb8-6249b4ef3016
Version Independent ID: f199d3a2-0c11-e2d6-18f0-d081c76d511d
Content: Quickstart: Create a Linux Node.js app - Azure App Service
Content Source: articles/app-service/containers/quickstart-nodejs.md
Service: app-service
GitHub Login: @msangapu-msft
Microsoft Alias: msangapu

RyanHill-MSFT · 2020-04-03T16:06:33Z

Thanks for the feedback @yejiyang! We are currently investigating and will update you shortly.

kfolkes · 2020-04-03T20:24:00Z

https://docs.microsoft.com/en-us/visualstudio/javascript/publish-nodejs-app-azure?view=vs-2019. I would makes sure ssh into the container and check the container logs to see if your npm install - package.json is loaded as well as FTP into the site and check the components of the /wwwroot folder. If need more help I suggest support ticket the App Service OSS team will be glad to help you.

yejiyang · 2020-04-05T12:54:22Z

@kfolkes Hey, thanks for the reply.
I checked the /wwwroot folder, which has the source code.

root@xxx:/home/site/wwwroot# ls -h
README.md
hostingstart.html
oryx-manifest.toml public
babel.config.js
node_modules
package-lock.json
src
dist
node_modules.tar.gz
package.json

And inside the dist folder, the generate files from build exists.
root@cdb3d23a2b95:/home/site/wwwroot/dist# ls
css
favicon.ico
img
index.html
js

It looks like this issue has been reported before. See this stack question
I followed the accepted answer there via Local Git Deployment. It does not help.

How I can get help from App Service OSS team?

RyanHill-MSFT · 2020-04-08T02:26:16Z

I definitely ran into issues myself @yejiyang when following the tutorial. I'll reach out to the doc author to see about updating. I was able to workaround by not using VS Code to create the app. In the terminal, I ran az --% webapp create -n myappname -g myresourcegroup -p mywindowsplan -r "node|10.14". After the app was created, I ran npm run build to create the dist folder. I right-clicked on this folder and deployed to myappname. These steps got the my vuejs page to show correclty. I not 100% sure but I think when creating the web app from the VS Code Azure extension, it doesn't properly configure the app to run node.

cephalin · 2020-04-30T10:42:22Z

@kraigb FYI

kraigb · 2020-04-30T15:48:40Z

@yejiyang @cephalin I saw a similar issue with a Python app (https://github.com/MicrosoftDocs/azure-dev-docs/issues/124). Try this: in App Service, go to Settings > Configuration (or in VS Code right click the "Application Settings" node in the Azure App Service explorer) and look for SCM_DO_BUILD_DURING_DEPLOYMENT. There should be a setting by this name with the value of true, which forces an npm install during deployment.

yejiyang · 2020-05-02T09:22:46Z

@kraigb I tried to set SCM_DO_BUILD_DURING_DEPLOYMENT both in App Service or VS Code (Linux version).
By default, the variable SCM_DO_BUILD_DURING_DEPLOYMENT does not exist. I manually add one through App Service.
This does not help. It still got the same page "Hey, Node developers! Your app service is up and running. Time to take the next step and deploy your code".

kraigb · 2020-05-07T18:45:15Z

@msangapu-msft have you been able to test this process again?

higoorc · 2020-05-18T15:36:33Z

Same happening to me. Not with VS Code, but doing all the deploy process with Azure CLI I have the same situation. The source code is in wwwroot, but still with the "Hey node developers" homepage.

RyanHill-MSFT · 2020-05-18T15:38:37Z

@higoorc do you have npm start command set in your startup for your app service?

higoorc · 2020-05-18T15:57:45Z

@higoorc do you have npm start command set in your startup for your app service?

Still the same.
There is my wwwroot and wwwroot/dist folder.

RyanHill-MSFT · 2020-05-18T16:19:46Z

For you app service, do you have npm start set as the startup command?

guillobits · 2020-05-27T17:16:29Z

I'm facing the same problem, I tried the npm start command as describe in you screenshot but, VueJS don't need a start command and work only with the index.html and js files.
On my own I deployed my (Linux) web application through Azure DevOps, all deployments tasks succeed, I have my dist folder inside the /home/site/wwwroot, but the default landing page is still display.

datocrats-org · 2020-10-23T19:02:29Z

In the Configuration Startup Command field I added npm run build as this is what I would use to run the production build of the Vue app locally. The scripts section of default Vue application built using the vue-cli is below, it does not include npm start

{ //...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
/...}

When making this change the page now loads as
:( Application Error
If you are the application administrator, you can access the diagnostic resources.

The actions log suggests this change was informational only. It does not prompt any rebuild.

{ //...
    "eventTimestamp": "2020-10-23T18:50:02.4336596Z",
    "id": "/subscriptions/a946d5b7-8c5a-4a26-b689-f42cbf70ec50/resourceGroups/appsvc_linux_centralus/providers/Microsoft.Web/sites/0f4ea263-66f7-4798-833f-828b74d2f536/config/slotconfignames/events/82839ad2-bd2b-4cf4-95d1-957d08bb593b/ticks/637390758024336596",
    "level": "Informational",
    "operationId": "1597108f-6a0b-4f9d-b31d-66c9a45251af",
    "operationName": {
        "value": "Microsoft.Web/sites/config/write",
        "localizedValue": "Update web sites config" /...
    }

I can try to trigger the build again to see what happens. Wouldn't this affect all node.js apps? What's the test plan for different commands, what is this Kudu build thing, can we create any local tests to try and test whether using Azure Web App will fail before trying to deploy there?

adrianklein · 2021-01-13T20:54:06Z

In the Configuration Startup Command field I added npm run build as this is what I would use to run the production build of the Vue app locally. The scripts section of default Vue application built using the vue-cli is below, it does not include npm start
{ //...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
/...}
When making this change the page now loads as
:( Application Error
If you are the application administrator, you can access the diagnostic resources.

The actions log suggests this change was informational only. It does not prompt any rebuild.
{ //...
    "eventTimestamp": "2020-10-23T18:50:02.4336596Z",
    "id": "/subscriptions/a946d5b7-8c5a-4a26-b689-f42cbf70ec50/resourceGroups/appsvc_linux_centralus/providers/Microsoft.Web/sites/0f4ea263-66f7-4798-833f-828b74d2f536/config/slotconfignames/events/82839ad2-bd2b-4cf4-95d1-957d08bb593b/ticks/637390758024336596",
    "level": "Informational",
    "operationId": "1597108f-6a0b-4f9d-b31d-66c9a45251af",
    "operationName": {
        "value": "Microsoft.Web/sites/config/write",
        "localizedValue": "Update web sites config" /...
    }
I can try to trigger the build again to see what happens. Wouldn't this affect all node.js apps? What's the test plan for different commands, what is this Kudu build thing, can we create any local tests to try and test whether using Azure Web App will fail before trying to deploy there?

This worked for me: https://azureossd.github.io/2020/04/30/run-production-build-on-app-service-linux/

Add the following start up command under general settings in the portal:

pm2 serve /home/site/wwwroot/dist --no-daemon

After this I restarted my site, and after 5 mins the vue page displayed. It DID take a few minutes for the change to take place, I almost wrote it off.

sy-huss · 2021-03-11T19:34:25Z

Is there an official solution to this? I'm struggling to deploy anything other than a static Vue site.

Update: I managed to correct the issue by adding: npx serve -s in the startup command.

mrutherford2 · 2021-04-21T01:35:47Z

In the Configuration Startup Command field I added npm run build as this is what I would use to run the production build of the Vue app locally. The scripts section of default Vue application built using the vue-cli is below, it does not include npm start
{ //...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
/...}
When making this change the page now loads as
:( Application Error
If you are the application administrator, you can access the diagnostic resources.
The actions log suggests this change was informational only. It does not prompt any rebuild.
{ //...
    "eventTimestamp": "2020-10-23T18:50:02.4336596Z",
    "id": "/subscriptions/a946d5b7-8c5a-4a26-b689-f42cbf70ec50/resourceGroups/appsvc_linux_centralus/providers/Microsoft.Web/sites/0f4ea263-66f7-4798-833f-828b74d2f536/config/slotconfignames/events/82839ad2-bd2b-4cf4-95d1-957d08bb593b/ticks/637390758024336596",
    "level": "Informational",
    "operationId": "1597108f-6a0b-4f9d-b31d-66c9a45251af",
    "operationName": {
        "value": "Microsoft.Web/sites/config/write",
        "localizedValue": "Update web sites config" /...
    }
I can try to trigger the build again to see what happens. Wouldn't this affect all node.js apps? What's the test plan for different commands, what is this Kudu build thing, can we create any local tests to try and test whether using Azure Web App will fail before trying to deploy there?
This worked for me: https://azureossd.github.io/2020/04/30/run-production-build-on-app-service-linux/

Add the following start up command under general settings in the portal:

pm2 serve /home/site/wwwroot/dist --no-daemon

After this I restarted my site, and after 5 mins the vue page displayed. It DID take a few minutes for the change to take place, I almost wrote it off.

I'm deploying my Vue app via Azure Dev Ops to an Azure App Service running Linux and adding this start up command fixed my issue immediately. Thanks so much for sharing this, I've been struggling to get it to show anything other than the standard welcome page for a day now. I haven't seen this mentioned anywhere in MSFT docs so it should probably be referenced in some of the documentation surrounding building and publishing a Vue app to Azure App Service whether its from VS Code or from Azure Dev Ops.

If it helps here is my yml file for the pipeline I have setup to build and package my Vue app.

# Node.js with Vue
# Build a Node.js project that uses Vue.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'
  workingDirectory: $(Build.SourcesDirectory)

- task: CopyFiles@2
  inputs:
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
    Contents: 'dist/**'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true
    verbose: true

- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'Azure subscription 1 (f719f76c-c23e-4160-aa93-914eb7851fdb)'
    appType: 'webAppLinux'
    WebAppName: 'trashbot'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

weiyx16 · 2021-06-03T06:39:29Z

Spent lots of time on it..... New to frontend, just to finish a course design.
In my case:

1. npm run build
2. change path in index.html in dist folder to relative path, e.g. from /static to ./static
3. deploy the dist folder only

it works for me. hope it can save time for anyone who needed.

msangapu-msft · 2021-06-24T15:57:40Z

Hi all, we have a new product called Static web apps that may simplify some of this: https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vue

FaridAhamat · 2021-11-25T07:21:31Z

Hi all, we have a new product called Static web apps that may simplify some of this: https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vue

This requires a Github account. Some company don't have Github accounts, so I can't simply use my personal Github account just to deploy.

Please fix Azure App Service and not force people to use the Azure Static Web App (or at least remove the Github account requirement!)

msangapu-msft · 2021-12-30T16:21:15Z

Hi @yejiyang Are you still having this issue? The tutorial you linked was updated recently: https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial/deploy-nodejs-azure-app-service-with-visual-studio-code?tabs=bash

If you're still having issues, which steps do you need help with?

msangapu-msft · 2022-03-03T21:54:20Z

Hi @yejiyang Are you still having issues? Can you please clarify which step?

cephalin · 2022-03-21T14:45:04Z

#please-close as the issue is old and also not directly related to the content issues but a specific JS framework (Vue.js).

PRMerger14 added app-service/svc Pri1 labels Apr 3, 2020

RyanHill-MSFT added triaged cxp labels Apr 3, 2020

RyanHill-MSFT self-assigned this Apr 3, 2020

RyanHill-MSFT added assigned-to-author and removed cxp labels Apr 8, 2020

RyanHill-MSFT assigned msangapu-msft Apr 8, 2020

AjayKumar-MSFT added the product-issue label Apr 13, 2020

RyanHill-MSFT removed their assignment Apr 13, 2020

datocrats-org mentioned this issue Oct 23, 2020

Deployment: Azure vuejs/vue-cli#2186

Open

PRMerger3 closed this as completed Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deploy a Vue application to Azure App service through VS code not success #51639

Deploy a Vue application to Azure App service through VS code not success #51639

yejiyang commented Apr 3, 2020

RyanHill-MSFT commented Apr 3, 2020

kfolkes commented Apr 3, 2020

yejiyang commented Apr 5, 2020

RyanHill-MSFT commented Apr 8, 2020 •

edited

Loading

cephalin commented Apr 30, 2020

kraigb commented Apr 30, 2020

yejiyang commented May 2, 2020

kraigb commented May 7, 2020

higoorc commented May 18, 2020

RyanHill-MSFT commented May 18, 2020

higoorc commented May 18, 2020 •

edited

Loading

RyanHill-MSFT commented May 18, 2020

guillobits commented May 27, 2020

datocrats-org commented Oct 23, 2020

adrianklein commented Jan 13, 2021 •

edited

Loading

sy-huss commented Mar 11, 2021 •

edited

Loading

mrutherford2 commented Apr 21, 2021

weiyx16 commented Jun 3, 2021

msangapu-msft commented Jun 24, 2021 •

edited

Loading

FaridAhamat commented Nov 25, 2021

msangapu-msft commented Dec 30, 2021

msangapu-msft commented Mar 3, 2022

cephalin commented Mar 21, 2022

Deploy a Vue application to Azure App service through VS code not success #51639

Deploy a Vue application to Azure App service through VS code not success #51639

Comments

yejiyang commented Apr 3, 2020

Document Details

RyanHill-MSFT commented Apr 3, 2020

kfolkes commented Apr 3, 2020

yejiyang commented Apr 5, 2020

RyanHill-MSFT commented Apr 8, 2020 • edited Loading

cephalin commented Apr 30, 2020

kraigb commented Apr 30, 2020

yejiyang commented May 2, 2020

kraigb commented May 7, 2020

higoorc commented May 18, 2020

RyanHill-MSFT commented May 18, 2020

higoorc commented May 18, 2020 • edited Loading

RyanHill-MSFT commented May 18, 2020

guillobits commented May 27, 2020

datocrats-org commented Oct 23, 2020

adrianklein commented Jan 13, 2021 • edited Loading

sy-huss commented Mar 11, 2021 • edited Loading

mrutherford2 commented Apr 21, 2021

weiyx16 commented Jun 3, 2021

msangapu-msft commented Jun 24, 2021 • edited Loading

FaridAhamat commented Nov 25, 2021

msangapu-msft commented Dec 30, 2021

msangapu-msft commented Mar 3, 2022

cephalin commented Mar 21, 2022

RyanHill-MSFT commented Apr 8, 2020 •

edited

Loading

higoorc commented May 18, 2020 •

edited

Loading

adrianklein commented Jan 13, 2021 •

edited

Loading

sy-huss commented Mar 11, 2021 •

edited

Loading

msangapu-msft commented Jun 24, 2021 •

edited

Loading