DEV Community

Cover image for Static Web Apps - First Look
John Papa for Microsoft Azure

Posted on • Updated on • Originally published at johnpapa.net

Static Web Apps - First Look

Let's start with a story that many of you are familiar with … you're building a web app. You chose your favorite framework. Maybe React or Angular or Vue or even Svelte. Your company wants to deploy the web app and reach millions of people.

So you start making a checklist of everything you need to do:

Yes/No What you need
yes Develop your app
yes Code in GitHub
? Pull Requests that create staging sites
? CI/CD to build and deploy the app
? APIs that scale
? Reverse proxy to connect app to API
? SSL certificate
? Custom domain
? Authentication
? Authorization
? Server side route control
? Global scale of your static web assets

Wow, you just wanted to build your app!

What if you could lean on a service to provide all of this?

Rather than build up several servers and pipelines to handle these concerns, you start looking for a service that "just works". Point the service to your app and go.

You can visit the documentation to learn more. Or you can try one of our hands-on tutorials at Microsoft Learn today!

Azure Static Web Apps

Released at Microsoft Build, Azure Static Web Apps (SWA) takes your source code to global availability. So you can develop your app while Azure Static Web Apps automatically builds and hosts it.

Static web apps are commonly built using libraries and frameworks like Angular, React, Svelte, or Vue. These apps include HTML, CSS, JavaScript, and image assets that make up the application. Under a traditional web server architecture, these files are served from a single server along side any required API endpoints. SWA helps host your static assets in an optimized server and makes them available in multiple servers around the world. SWA also optionally hosts your APIs using Azure Functions. Then it sets up a single URL for your users to visit.

You'll get everything in the checklist above!

Publishing a Web App involves a lot of work

Getting started

The first step is to create an app!

If you need one to try this service out you can follow these steps. If you have your own app, you can skip these steps entirely and proceed to the next section.

  1. Click on https://github.com/johnpapa/shopathome/generate to create a new repo
  2. Give your repo a name and create the repo
  3. Click the folder .github/workflows in the GitHub web interface
  4. Click on the file with the pattern azure-static-web-apps.****.yml
  5. Delete this file

It is important to delete the workflow file because you'll be creating your own very soon!

Now you have four apps! This is a monorepo with the same app written in Angular, React, Svelte and Vue, each in their respective folders.

The starter code includes the four apps and the starting point for an API that you'll use.

β”œ angular-app  πŸ‘ˆ The Angular client app
β”œ api          πŸ‘ˆ The API (Azure Functions)
β”œ react-app    πŸ‘ˆ The React client app
β”œ svelte-app   πŸ‘ˆ The Svelte client app
β”” vue-app      πŸ‘ˆ The Vue client app
Enter fullscreen mode Exit fullscreen mode

Free Azure Trial

Next, you'll need an Azure account. Don't worry if you don't have one, you can use the free Azure trial. Did I say it was free? Good, because it's free.

Get your free trial here

Go to the Azure Portal

So you have your code and an Azure account, now you can create a SWA resource for your app!

  1. Go to the Azure Portal here
  2. Select your Azure subscription
  3. Create a resource group (this is just like a folder to collect all of your Azure "stuff")
  4. Name your SWA (ex: shopathome-sample)
  5. Choose the region closest to you
  6. Sign in with GitHub
  7. Select your GitHub organization
  8. Select your GitHub repository (ex: shopathome)
  9. Select your branch (ex: main)

    Create a Static Web Apps resource

    Set your folder locations

  10. Set your App location to the javascript framework you prefer

    • Angular - angular-app
    • React - react-app
    • Svelte - svelte-app
    • Vue - vue-app
  11. Set the Api location to api

  12. Set the App artifact location to one of the following, based on the framework you chose:

    • Angular - dist/angular-app
    • React - build
    • Svelte - public
    • Vue - dist
  13. Click the Review + create button

  14. Click the Create button

    Set your folder locations

Go to your web site

Azure is now creating your resources. SWA will create a GitHub Action workflow file and commit it to your repository in the .github/workflows folder. This file will watch the branch you selected for changes. When you push changes to the branch they will trigger the GitHub Action workflow to build and deploy your app to SWA!

  1. Soon, you'll be presented with a button to Go to Resource. Click this
  2. At the top of the page you'll see several links. Click the GitHub Action Runs link

Create a Static Web Apps resource

  1. You'll be brought to your GitHub Action. When it is complete, you'll see green arrows everywhere.

GitHub Action

  1. Once the action has completed the build and deploy, you can go back to the portal and click the URL link to open your web app

Depending on which framework you chose to build, you should see one of the following apps!

GitHub Action

Beyond the first look

Oh there is so much more you can do! You can add a custom domain with an SSL certificate, authentication, and authorization. You can make a changes in a new branch, make a pull request, and then have the GitHub Action build and deploy your changes to a staging/preview URL!

This may be your first look, but if you want to learn more you can try one of our hands-on tutorials at Microsoft Learn today!

Top comments (13)

Collapse
 
shaijut profile image
Shaiju T • Edited

Microsoft Build is LIVE now and at same time you published a article on Static Web Apps . Cool πŸ˜„

Collapse
 
john_papa profile image
John Papa

πŸ‘

Collapse
 
vacom profile image
Vitor Amaral

Hey, John thank you for the first look, is this similar to Vercel?

Collapse
 
john_papa profile image
John Papa

You can publish web apps with both.

Collapse
 
danpetitt profile image
Dan Petitt

How much do these Type of apps cost as I couldn’t find any options on Pricing Calculator

Collapse
 
john_papa profile image
John Papa

Free for preview. We'll be evaluating the needs of the customers and feedback we get to determine what a free level will look like when it goes full release.

Collapse
 
triptych profile image
Andrew Wooldridge

This is really intriguing and I wonder how far you can take this in terms of having a pre set application that you can unfold into a static site.

Collapse
 
john_papa profile image
John Papa

Give it a try and let us know how it goes!

Collapse
 
minhbk profile image
Nguyα»…n TrΓ­ Minh

Can you explain what is different between host a website by Static Web Apps and host by Azure Storage?

Collapse
 
john_papa profile image
John Papa

From Daria, our PM ...

"Azure Storage based hosting is also a great option for customers who prefer to assemble their own solution and are primarily focused on hosting static content."

"Static Web Apps is not a competitor for Azure Storage. It is a fully managed offer with a unified workflow from source code to cloud and streamlined management. This encompasses both static content and dynamic content (serverless APIs)."

Collapse
 
jwp profile image
John Peters

@john_papa Any guidance in getting Authorization and Authentication up and running?

Collapse
 
john_papa profile image
John Papa

Please refer to these docs aka.ms/swadocs specifically here for Auth docs.microsoft.com/en-us/azure/sta...

Collapse
 
jchlu profile image
Johnny C-L

I suspect your direct competition here will be Netlify, so at least matching their free tier allowance and simplicity / ease of use would be a good starting point when assessing pricing.