Deploying a Static Nuxt App to Azure

Sponsored by the Kendo UI for Vue team

Want to learn more about creating great Vue web apps? It all starts out with Kendo UI for Vue - a complete UI component library that allows you to quickly build high-quality, responsive apps. It includes everything you need, from grids and charts to dropdowns and gauges.

We on the Kendo UI for Vue team are committed to bringing you the latest tips and tricks in the world of Vue development. We hope you enjoy the post!

Nuxt.js is a universal framework for developing Vue apps. Learn about Nuxt and how to easily deploy a static Nuxt application to Azure with Azure App Services.

Nuxt.js is a universal framework for creating Vue.js applications. The goal behind having a universal framework is so that it is flexible enough to be used as a server-side rendered app, a static generated site or a single page application. In this tutorial, we’ll walk through how to deploy a Nuxt application to Azure using Azure App Services.

Prerequisite

In order to follow through with this tutorial, the knowledge of the following technologies is necessary.

• Knowledge of JavaScript
• Knowledge of Vue.js

Scaffolding a Nuxt App

To get started, we will need to create a Nuxt project. Nuxt.js is really easy to get started with, coupled with the fact that the Nuxt team has created a scaffolding tool that will enable you to create a Nuxt app in seconds called create-nuxt-app. Let’s go ahead and run one of the following commands.

$ npx create-nuxt-app telerik-nuxt or
$ yarn create nuxt-app telerik-nuxt

After running the command, you’ll be prompted to choose from different options ranging from a server-side framework, testing framework, or UI framework. You can select any one that suits your needs, but for this tutorial, we’ll be opting out of all those options and picking only Bulma for styling. Go ahead and pick Bulma from UI framework, and the next step will be to run the Nuxt app we just created. We can do that using the following commands.

$ yarn run dev or 
$ npm run dev

After running that command, your Nuxt app will be running on localhost:3000, and when you navigate to the browser, the above image is what you’ll see — a sample page running with Nuxt.js.

Now let’s go ahead and build out a portfolio page and then proceed to deploy it.

Build out the Portfolio Page

In order to get the project running, we’ll be building a simple portfolio site for a developer with potential details and links. Now, let’s go ahead and create this.

In Nuxt.js any Vue files within the page’s directory translate to a page. For example, index.vue will render the homepage and about.vue will render the about page. In this project, we’ll be working with a single page displaying the information required. Now within the pages/index.vue file we can update the code and add the following:

<template>
  <div class="container is-fluid">
    <div class="columns">
      <div class="column">
        <h1 class="title">John Manuel</h1>
        <h2 class="subtitle">
          UI/UX designer and Frontend Engineer at Gofort.com
        </h2>
        <div class="links">
          <a href="/" target="_blank" class="button--blue">Resume</a>
          <a href="/" target="_blank" class="button--blue">GitHub</a>
          <a href="/" target="_blank" class="button--blue">Projects</a>
        </div>
      </div>
      <div class="column is-three-fifths">
        <img src="../assets/dev.svg" alt="dev" width="750" />
      </div>
    </div>
  </div>
</template>

<style>
.columns {
  margin-top: 6em;
}
</style>

We’ve updated with the portfolio details, and we can now see the homepage is also updated, and it looks exactly like this. Here you can find the GitHub Repo for this project.

Deploying to Azure

Great! We just created a portfolio site using Nuxt.js. Now for the next step, we will deploy the portfolio as a static site using Azure.

Step 1

We currently have our site running in a local environment, but in order to deploy to production, we’ll need to build our app and to build a static site with Nuxt. We need to use the yarn generate command, which builds your project and generates the HTML for every one of your routes and stores it in a file kept in the dist directory. With this, you can then host the generated files on any static web host service. Go ahead and run the command:

yarn generate

Step 2

Now that we have our files prebuilt, the next step is to deploy to Azure. Head over to the Azure web app and sign in or create an account.

• Click on the portal of Azure and begin creating an environment for your app
• On the right-hand side, click on “Create a resource” and select “Web App”
• Then within the basics tab add a subscription which you should have already created in the portal
• Add a resource group and add app name, select a region as well as an operating system
• Follow the steps as outlined in the image below, and, lastly, click “Review and create”
  

  

Step 3

The next step is to connect the Azure app we created to our codebase. We should already have our codebase on GitHub, so we can go ahead and connect the GitHub repo to Azure. On the Azure portal, click on “Deployment Center” as illustrated in the image below.

Then go ahead and select “App Service build service.” This is the engine that builds and deploys your codebase. Lastly, select the repo on Github and click “Finish.”

Step 4

And for the final step, we’ll need to configure the server to allow Azure to deploy our codebase. If you check the logs, you’ll see an error message indicating that there is a missing server/app.js and web.config is not generated. Let’s generate a web.config file. Go ahead and copy the following block of code into the root folder of our project.

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:
     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <rewrite>
      <rules>
        <!-- First we consider whether the incoming URL matches a physical file in the /dist folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="dist{REQUEST_URI}"/>
        </rule>
      </rules>
    </rewrite>
    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>
    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />
  </system.webServer>
</configuration>

After adding this file, make sure your dist folder is ignored by the .gitignore file in your directory because we want Azure to be able to find the dist/index.html file. Now commit the changes to git, and we can see it is updated in the deployment center in Azure portal. Finally, we can test that our site has successfully deployed by visiting the overview tab and clicking the browse button.

Conclusion

In this article, we have seen how to build and deploy a static Nuxt app using Azure web services. Now we know the possibilities of Nuxt.js and that it is not limited and it can be deployed anywhere. You can go ahead and explore more on Nuxt official documentation and also check out the GitHub Repository for this project and the demo.