Makeover your old web sites with Azure Static Web Apps
Tags: azure, react, webdev, javascript
Published: 2020-07-08 18:15:17

**Everyone loves a makeover!**

*So, what about a makeover for your collection of janky outdated web sites?*
<br/>

![Princess Diaries Makeover](https://dev-to-uploads.s3.amazonaws.com/i/gybwxe04hcegqjs0ph8e.gif)
<br/>

# 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. 

<p> 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](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=angular#create-a-static-web-app)
* [Microsoft Learn Module](https://docs.microsoft.com/en-us/learn/modules/publish-app-service-static-web-app-api/)

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

<br/>

![Before Makeover](https://dev-to-uploads.s3.amazonaws.com/i/p7vi8lxe3lt8i1ptpe1q.gif)

<br/>

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

<br/>

# Updating existing applications



![Clueless Makeover](https://dev-to-uploads.s3.amazonaws.com/i/6uyq9yt3gas8lt0x5xzc.gif) <br/><br/>


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





<br/><br/>

**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. 


<br/>
<br/> 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` 

<br/><br/>


<br/> ![First screen](https://dev-to-uploads.s3.amazonaws.com/i/htjrdvzd0kandlr377ow.png)
![Second screen](https://dev-to-uploads.s3.amazonaws.com/i/ro9zqke96x87nylqhq6f.png)

<br/><br/>
**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.

<br/><br/>
![Final screen](https://dev-to-uploads.s3.amazonaws.com/i/3qphrk12eq4rpq4p79nl.png)

<br/><br/>
**Now, your previously outdated and janky application is now made-over into something beautiful!**

<br/>
![After](https://dev-to-uploads.s3.amazonaws.com/i/nzfywdmkiby78tg0pydk.gif)