Makeover Your Website

with Azure Static Web Apps

Linda Nichols

@lynnaloo

Because "modernization" is just another way to say "makeover"

And everyone loves a makeover!

So, how about your janky old websites?

Make them sparkle with Azure Static Web Apps

• Public Preview since Microsoft Build

• Easier setup

• Free*

• Everything JavaScript (or TypeScript)

• Serverless APIs*

• Authentication Integrations

• CI/CD with Github Actions

But first, what is a static web app and why do we care?

• Plain ol' HTML, JavaScript, CSS

• Decoupled architecture

• Cheaper

• Faster

• High availability

• Easier deployments

• JAMStack is cool

Standard Serverless Web App

Super-complicated Static Web Apps Diagram Ahead

WARNING:

But, some constraints

• Still in Preview

• *Free

• Everything JavaScript (or TypeScript)

• Coupled to Github/Github Actions

• Only supports HTTP Trigger (Functions)

• No API Management support (yet), routing via routes.json

Example Time

Janky Web App

www.github.com/lynnaloo/mullet

• Outdated version of React

• Old version of Webpack

• Soon to be deprecated Hapi.js

Janky Web App

www.github.com/lynnaloo/mullet-with-jam

"Modernize"

• Define your build artifact folder

• Update your package.json (and Node version)

• *Update your build script

• Add "serverless" APIs with Azure Functions

* https://docs.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks

Create App

Create App

A new Github Action has been magically committed to your repository to deploy your application.  

And once it's done building...

Demo Time

Linda's 80s Site

www.github.com/lynnaloo/lindas80ssite

• circa 1996

• http://lindas80ssite.freeservers.com

• static before it was cool

• only parts of the site could be recovered

Questions?

@lynnaloo