Publishing a Vue.js app on Azure Static Web Apps, setting up pipeline and routing.

Why Azure?

When I started writing the blog, I stated that I am going to make a serverless application running on AWS. Well, I was lying. But not intentionally.

When I stared with the front end of the page, I developed locally on my machine and was originally planning to deploy it as a static web page on a AWS S3 bucket. When I explored the idea a little more, I came to a conclusion that yes, it will work, but would require a custom pipeline that builds and deploys the code to s3, or some manual effort every time I changed something on the page - a big no no.

Then I remembered that some time ago, I published a website on Azure Static Web Apps and it was the easiest thing in the world. I immediately knew that this is the way.

How to deploy an app to Azure static web apps

I have yet to find a simpler solution for publishing a modern single site javascript application from a Github repository. In about 5 minutes you are up and running, the only thing that took a little time was my DNS record change to propagate.

  1. Start with logging into the Azure console.
  2. Search for static web apps
  3. Choose Create
  4. Choose a Subscription/resource group, name your app and choose region where you want to run the app.
  5. Choose your GitHub account or login into a new one.
  6. Choose a repository and branch that hosts the website.
  7. Choose a Build preset for your technology of choice (Vue.js in my case)
  8. Specify some more parameters - app location, … most users can keep the defaults
  9. And that is it - click create

When you click create, Azure automatically creates a suitable pipeline in your repository and in a few minutes your page is up and running. Every time you push new changes to your chosen branch, GitHub actions builds your app and publishes it.

After creation

Pointing a DNS name to the web app

The first thing that you want to do after creating your app is probably pointing a domain to it.

  1. In Azure portal, choose your Static Web App and in the left hand menu choose custom domains.

  2. Click Add New and choose Custom domain.

  3. Enter the desired domain.

  4. Click Next. Azure generates a DNS record for you.

  5. Login to your domain management and search for DNS records or similar.

  6. Once you are in your DNS management, click create new record and create a record matching the one generated by Azure.

  7. Save your changes and wait. After some time, try clicking Add in the Azure portal. Once the DNS change propagates, you should be able to validate and save the newly added domain and it is ready to use.

Setting routing for the app

The last thing that needs to be configured is routing. After my app was deployed, everything worked as expected, but when I entered a direct link to one of my articles, I was greeted by the the infamous 404: Not Found page.

Azure Static Web Apps allows routing configuration. You can have urls that use authentication, url rewriting, custom http response codes and some other nice to have stuff. You can read more about it here.

We need just simple routing setting for our single site page:

  1. Create a staticwebapp.config.json file in the same folder as your package.json.

  2. In the file, create a navigationFallback route - all request that do not match routing rules are routed here

    {
    "navigationFallback": {
        "rewrite": "/"
    }
}

  3. Optional - setup any custom routing rules that you want to use in "routes" section.

  4. Commit your code, wait for your pipeline to finish and you are done.