The distribution files you need

The folders and files that need to be in the wwwroot folder:

• .nuxt/ - The .nuxt folder generated by running nuxt build.
• static/
• server/
• nuxt.config.js
• package.json
• web.config - The config file for Azure web app for Nuxt to work. Azure will create one if it's not supplied but the default one won't work for Nuxt. I used
  this one
  .

Set up continuous deployment using Kudu

Kudu is the engine behind git/hg deployments, WebJobs, and various other features in Azure Web Sites.

It connects to a particular branch in your repository and watches changes to it. Upon detecting a change, it will fetche the code from your repository into the "repository" folder on the server. It'll then looks for a .deployment file which can trigger a custom deployment script deploy.md.

The two additional files are:

• .deployment - Deployment configuration files let you override the default heuristics of deployment by allowing you to specify a project or folder to be deployed. It has to be at the root of the repository and it's in .ini format. For example, it can be,

  [config]
  command = deploy.cmd
  

• deploy.cmd - The custom script that builds your project and copy the distribution files to the webroot. The file I used can be downloaded

  here
  .

Set node and npm version in Azure web app

1. Check the supported runtime environments by,
   • Using the Kudu service in your web app, or
   • going directly to https://_your-app-name_.scm.azurewebsites.net/
2. Set the version of node by,
   • adding WEBSITE_NODE_DEFAULT_VERSION to the application settings in the Azure portal. See https://github.com/projectkudu/kudu/wiki/Configurable-settings#change-the-node-version
3. Verify the node version and npm version by,
   1. going to Kudu > console
   2. run node -v and npm -v

Set up environment variables in Azure

Nuxt uses webpack's definePlugin to define the environmental variable. According to webpack website

The `DefinePlugin` allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and production builds. If you perform logging in your development build but not in the production build you might use a global constant to determine whether logging takes place. That's where DefinePlugin shines, set it and forget it rules for development and production builds.

This means that the actual process or process.env from Node.js is neither available nor defined. Each of the env properties defined in nuxt.config.js is individually mapped to process.env.xxxx and converted during compilation.

As an example,

export default {
  env: {
    apiuri: process.env.API_KEY || 'default value'
  }
}

Here we use the API_KEY environment variable defined as part of the Azure application settings, if it's available, and assign that to apiuri.

These will be processed at build time and then made available using the name you give them, e.g.

module.exports = {
  fireConfig: {
    apiKey: process.env.firebaseApiKey,  # Not API_KEY
    // ...
};

You can asscess the defined api variable,

• via process.env.apiKey, or
• via context.env.apiKey, see context API.

Please note: the implication is that once you have deinfed a property in Azure, changes to it will not take effect unless you re-build the application.

References

1. "How to deploy on Azure Portal" - https://nuxtjs.org/faq/deployment-azure-portal
2. Kudu - https://github.com/projectkudu/kudu/wiki
3. Nuxt env property - https://nuxtjs.org/api/configuration-env/
4. DefinePlugin - https://webpack.js.org/plugins/define-plugin/
5. How to access Heroku environment variables with Nuxt.JS app - https://stackoverflow.com/questions/55704031/how-to-access-heroku-environment-variables-with-nuxt-js-app?answertab=votes#tab-top