NUXT seems to be dominating the Server Side rendering scene in the VueJS ecosystem, it’s the hottest new buzzword in the framework. But have you ever tried to deploy it? Chances are if you’ve landed here you were just as confused, lost and desperate for answers as I was.

The documentation on the site is not that great when it comes to deployment, especially for Azure. They basically just throw you a web.config and let you fend for yourself. Other resources online seemed to suggest that the easiest way to deploy to azure was using the Vs Code extension, and although that might do the job it’s not super great for continuous deployment and automated build pipelines.

What you’ll need

  1. Azure Dev Ops Project (Where your NUXT app repository will be hosted)
  2. NUXT universal app (@nuxt/2.0.0)
  3. Azure Linux App Service Plan
  4. Azure Linux Web App

In order to deploy your universal NUXT app to azure, you’ll need an Azure Linux web app service. Which means you’ll also need a Linux app service plan to put the web app on. Linux is the preferred app service kind for Node applications, and I found it to be easier than trying to configure a Windows IIS app service.

You’ll also need an Azure Dev Ops (ADO) project that holds your NUXT application repository, and within that project, we will set up our build and release pipelines that will continuously deploy our application to our app service.

Configuring your Web App

As long as you selected the Linux Web App (which is the default) when you were creating your Azure App Plan and Service, the only other configuration you need is to set some properties under your Web App Configuration section.

Add two configuration properties on your web app under Application Settings for HOST and NODE_ENV.

HOST: 0.0.0.0,
NODE_ENV: production

That’s it, those are the only two things you have to add, you should also just make sure that under General Settings you selected a stack of Node.js, and have selected the correct version of Node, likely this should just be LTS.

Configure ADO Build Pipeline

In ADO, on the left side navigation drawer, select the blue rocket and head to “Pipelines”. Go ahead and create a new pipeline. Make sure you select Use the classic editor without YAML when you click New Pipeline at the top right. On the next page, you should be able to select your source, your code will be in an ADO repository under the same project, so select the correct repository for your NUXT application, as well as, select the branch you want to deploy. On the next step, go ahead and just select the Empty job at the top, no need to use a template since we’ll only have 5 tasks.

Pipeline Tasks

The first task should be defaulted to “Agent Job 1” / Run on agent. This will just be whatever agent you want to build your application with, it shouldn’t make a huge difference, I usually just let it run on the Azure Hosted. This will likely also be inherited from the pipeline config, so you might not need to change anything.

With the “plus” icon on the left window pane list, go ahead and add a new task, in the search box type “npm” and add the “npm” task that should be the first result.

you can rename the task to whatever you like, I like to make mine a bit descriptive, so this task will be “npm install” and under the command section of your npm task, just select install. You don’t need to select anything under “working folder that contains package.json” that will be determined by ADO. Click the “plus” add icon again and add another npm task. This time the npm task name will be “npm build” and under command, select custom and in “run commands and arguments” just type run build.

The next task we want to add is a “Copy Files” and we will set the display name for this to be “Copy Files to: $(Build.ArtifactStagingDirectory)”. Your source folder should be set to $(System.DefaultWorkingDirectory), and you’ll want to set your contents section to include the following

.nuxt/**

static/**

package.json

nuxt.config.js

the target directory should be $(Build.ArtifactStagingDirectory).

Next, add an “Archive Files” task, and set the root folder to $(Build.ArtifactStagingDirectory), select an archive type of zip, and set archive file to create to $(Build.ArtifactStagingDirectory)/package.zip. Check the box for “replace existing archive”.

The last task we need is the “Publish build artifacts”. The path to publish should be $(Build.ArtifactStagingDirectory)/package.zip, the artifact name will be drop, and the publish location will be Azure pipelines.

When you’re all done your build pipeline should have these tasks configured as directed above. and we are ready to move on to the release pipeline to deploy our code on Azure.

Configure ADO Release Pipeline

On the left navigation drawer under the blue rocket, select “Releases”, then click the New dropdown and select “New release pipeline”. This will open up a panel on the right, either select or search for Azure App Service Deployment and apply.

The stage name doesn’t matter and you can rename it to whatever you like. “Stage 1” is fine, or you could name it “Deploy” up to you. On the left, click Add an artifact, keep the source type to the default “Build”, and then with the select dropdown select the build pipeline we just created above. You’ll want to leave the default version to “Latest” and you can change the source alias to whatever you want, but I just leave mine set to whatever ADO populates the field with. Be sure to also check the “Lightning Bolt” icon that will come up once you have selected your artifact, as this will be the trigger for enabling your continous deployment when the pipeline detects a new build.

After setting your artifact, click the “1 job, 1 task” under the “Stage 1” in your stages section.

All you have left to configure is the form fields for selecting your Azure subscription, and the Linux app service under that subscription that you created to deploy your NUXT app. For the “Startup command” you can leave it blank as the startup command by default on a Linux Node app is npm start, which will call our start script in the package.json to serve NUXT.

After selecting your subscription, and service, click the “Deploy Azure App Service” task, and under Post Deployment Action select inline script and in the script section just type npm install. This will ensure that once you have deployed your application files, the packages needed to serve your app will be installed on the Azure app service.

Once all of those fields have been configured, you can go ahead and deploy your NUXT app to azure with ADO CI/CD pipelines.

Save & Queue

After you’ve configured these, go ahead and manually build your project, and let the pipeline deploy your NUXT app to Azure! That’s it, you’re app should now be live for the world to see. Hopefully, this quick guide walked you through the steps needed to deploy a NUXT app to Azure as the resources I found online were not great and or incomplete.


Leave a Reply

Your email address will not be published. Required fields are marked *