Deployment: Azure

[tarazena]

What problem does this feature solve?

Providing instructions on how to deploy Vue-CLI 3.0 app to azure

What does the proposed API look like?

Since the new Vue CLI 3.0, it introduced a major changes on how the application works, providing a guide for developers to deploy the app to Azure would make sense (already documented on how to do that in AWS and Firebase)

[tommcclean]

I was looking for this too, I was able to get Vue projects deployed to Azure before, but don't seem to be able to figure it out with Vue CLI 3

[tommcclean]

Has anybody here actually managed to deploy an app using Vue CLI 3>?

Spent all day today and had absolutely no success at all. I can get NPM and everything working with a basic node site - or deploy an older Vue website. But Azure command line cannot recognise vue-cli-service at all.

Only success I have had ATM is to build it locally and copy the files up

[tarazena]

@tommcclean Yes i was able to deploy Vue CLI 3.0 app to azure, ill write step by step solution on how to do that (I'm using VSTS along with Azure to automate deployments)

[yauri-io]

I have succeed building Vue with Vue CLI 3 in Azure.

---

Sharing my build file here

Azure pipeline YAML script

resources:
- repo: self

trigger: ['staging']

pool:
  vmImage: 'Ubuntu 16.04'

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

- script: |
    npm install
    npm run build-staging
  displayName: 'npm install and build'
  env:
    NODE_ENV: staging

- task: ArchiveFiles@2
  displayName: Archive
  inputs:
    rootFolderOrFile: '$(build.sourcesDirectory)/dist'
    includeRootFolder: false
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.SourceVersion)_$(Build.BuildId).zip'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: build'
  inputs:
    ArtifactName: build

package.json

...
 "scripts": {
    "serve": "vue-cli-service serve --port 9001",
    "build": "vue-cli-service build",
    "build-staging": "NODE_ENV=production vue-cli-service build --mode staging",
    "build-production": "NODE_ENV=production vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
...

[datocrats-org]

Deploy to Azure in this case do you mean to pipeline build on custom vmImage. Microsoft should get their Vue tutorial to work, I'm not sure why it's not working for me but I have tried to reply to this issue asking for their help: https://github.com/MicrosoftDocs/azure-docs/issues/51639 Ideally the vue cli could integrate with Azure like it does with AWS

[sensedesigns]

@datocrats-org I can confirm that this solution does not work