Nuxt Universal on Azure

instructions.md

Installing Nuxt on Azure Web App for Linux

This assumes that you have a Git repo created with create-nuxt-app and are ready to test your site on the web. I won’t go into the steps as to do this, but there’s a lovely guide to getting started on Nuxt. This also assumes that you know how to set up an App Service instance on the Azure console or via CLI.

Local

1. Test run launching locally by running npm run dev and checking out http://localhost:3000
2. If that works, end the process by pressing Ctrl+C back in the terminal.
3. Create an initial commit for your Nuxt repo.
4. Congrats! You’re done here.

Azure

After you’ve created your app instance, on you app service page:

1. Go to your Configuration. Here, you’ll set up some environment variables that are important for Nuxt to operate.
2. Under Application Settings, set these variables:
   • HOST to 0.0.0.0
   • NODE_ENV to production
   • PORT to 3000.
3. Click save.
4. Go to General settings.
5. Here, you’re looking for the ‌Startup Command setting. You’ll want to enter node_modules/nuxt/bin/nuxt.js start in the box. This is incredibly important as the App Service won’t start Nuxt it doesn’t recognize the default npm command.
6. Click save again and deploy as you wish. My preference is to do it via the Github and Azure Pipeline. The YAML on this Gist should replace the Pipeline YAML if you choose to do so.

pipeline.yml

pool:
  name: Azure Pipelines
steps:
- task: NodeTool@0
  displayName: 'Use Node version'
  inputs:
    versionSpec: 12.x

- task: Npm@0
  displayName: 'npm install'
  inputs:
    arguments: '--force'

- task: Npm@1
  displayName: 'npm build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build'

- task: ArchiveFiles@1
  displayName: 'Archive files '
  inputs:
    rootFolder: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false

- task: CopyFiles@2
  displayName: 'Copy File to: $(TargetFolder)'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)'
    Contents: '$(Build.BuildId).zip'
    TargetFolder: '$(Build.ArtifactStagingDirectory)\ArtifactsToBePublished'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: drop'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)\ArtifactsToBePublished'