Everyone loves a makeover!

So, what about a makeover for your collection of janky outdated web sites?

What is Azure Static Web Apps?

It's a service that builds and deploys full-stack web apps to Microsoft Azure from Github. Your static assets are separated from a web server and are instead served in storage where they can be globally distributed and faster to access.

Need an API? Great. Because Static Web Apps automatically creates API endpoints that are hosted using a serverless architecture.

Azure Static Webb Apps is currently in public preview and right now it's free.

How do you get started?

• Azure SWA Quickstart
• Microsoft Learn Module

But what if you don't need a new app and you have a bunch of old ones sitting in your Github repositories?

You can update them to deploy as static web apps on Azure!

Updating existing applications

Choose a web app in your Github account:
https://github.com/lynnaloo/mullet

Some things to consider with your old web application:

• It has to be a JavaScript or TypeScript application
• You need to know where your build artifact folder is, i.e. "public" or "dist."
• Remove any pins to old Node versions in your package.json:

"engines": {    
    "node": "8.12"  
  }

• Your build should be able to run npm run build:

"scripts": {
    "build": "webpack",
    "start": "node walmart.js"
  },

• If you want to create serverless APIs, add a folder for your functions, i.e. "api" and add a routes.json file in the root of your build artifact folder.

Create an Azure Static Web App in the Azure Portal:

• Click Create a Resource
• Search for Static Web Apps
• Click Static Web Apps (Preview)
• Click Create
• Enter your application information, sign-in to your Github account, and select the repository for your old application
• Review and Create
• Create

A Github Actions workflow file has magically been added to your old application's Github repository. Once the action finishes running, you should be able to access your application from the provided URL.

Now, your previously outdated and janky application is now made-over into something beautiful!