dist folder on basic vue.js

Question

I created a basic vue.js with Visual studio 2019. I put it on a git in my private azure server. I have a windows build agent.

yml for building, no error.

trigger:
- master

pool: 'Default'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

I tried somes "copy/archive files" commands. One of them

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/VuejsApp1'
  inputs:
    TargetFolder: '$(Build.ArtifactStagingDirectory)/VuejsApp1'

Every method seems to show that the dist folder is never created.

similar question : why is azure build pipeline not generating a dist folder for an angular build

##[section]Starting: npm install and build ============================================================================== Task : Command line Description : Run a command line script using Bash on Linux and macOS and cmd.exe on Windows Version : 2.151.1 Author : Microsoft Corporation Help : https://learn.microsoft.com/azure/devops/pipelines/tasks/utility/command-line ============================================================================== Generating script. ========================== Starting Command Output =========================== ##[command]"C:\windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "C:\DevOpsAgent_work_temp\2d81f910-5c00-4330-9d13-27c8c30aa7a0.cmd""

yorkie@2.0.0 install C:\DevOpsAgent_work\171\s\node_modules\yorkie node bin/install.js

CI detected, skipping Git hooks installation

core-js@2.6.11 postinstall C:\DevOpsAgent_work\171\s\node_modules\core-js node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js (‌ https://github.com/zloirock/core-js ‌) for polyfilling JavaScript standard library!‌

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: ‌ >‌ https://opencollective.com/core-js ‌ >‌ https://www.patreon.com/zloirock ‌

Also, the author of core-js (‌ https://github.com/zloirock ‌) is looking for a good job -)‌

ejs@2.7.4 postinstall C:\DevOpsAgent_work\171\s\node_modules\ejs node ./postinstall.js

Thank you for installing ‌EJS‌: built with the ‌Jake‌ JavaScript build tool (‌https://jakejs.com/‌)‌

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1488 packages from 822 contributors and audited 1492 packages in 71.233s

44 packages are looking for funding run npm fund for details

found 6 vulnerabilities (1 low, 3 moderate, 2 high) run npm audit fix to fix them, or npm audit for details ##[section]Finishing: npm install and build

Please add logs of steps `npm install and build` and `Copy files`. Also add `- script: ls` after `npm install and build'`. — Krzysztof Madej, Dec 09 '20 at 22:25
I edit the post for logs. Is is for linux, never done dir on azure. I begins with nde, maybe I need to install node too in the yml, default microsoft script crashed so I tought I didnt need it when the build didnt crash. — forX, Dec 09 '20 at 22:52
dir command show me that i really not have dist folder. just my git things and node_modules — forX, Dec 09 '20 at 22:55
Ok. But logs look like log of `npm install` and what about `npm run build`? — Krzysztof Madej, Dec 09 '20 at 23:26
As Jane suggested check it locally, because in logs nothing indicates that `npm run build` was run. Please ensure that it works locally. — Krzysztof Madej, Dec 10 '20 at 15:28

score 1 · Accepted Answer · answered Dec 10 '20 at 15:36

1

First, you need to NOT do install and build on the same "script".

- script: 'npm install'
  displayName: 'Install dependencies'

- script: 'npm run build'
  displayName: 'Build project'

after that, you can get the dist folder

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

answered Dec 10 '20 at 15:36

forX

2,063
2
26
47

Thanks, this works, I've spent few hours trying to find answer same problem I have with build for React.JS – Nenad Bulatović Jan 29 '21 at 18:09

Jane Ma-MSFT · Answer 2 · 2020-12-11T01:25:28.653

0

There are two troubleshooting advice:

1.Try to build locally, or run the npm command using the PowerShell task of Azure DevOps to see if the same issue exists.

- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      npm install
      npm run build

2.Check if the options parameter in your json file is set to dist.

  "options": {
        "outputPath": "dist",
       }

edited Dec 11 '20 at 01:25

answered Dec 10 '20 at 09:57

Jane Ma-MSFT

4,461
1
6
12

I didn't have time to test your powershell version, If you want to add a sample for another one, could be usefull. – forX Dec 10 '20 at 15:37
I need to explore the json, I never change outputpath – forX Dec 10 '20 at 15:38

dist folder on basic vue.js

2 Answers2

Linked