Jaswanth Remielblog.

A Simple Guide to Deploy a Static Web App on Azure

Cover Image for A Simple Guide to Deploy a Static Web App on Azure

Step 1: Prerequisites

Before we dive into deployment, make sure you have the following in place:

  • An Azure account (you can sign up for a free trial if you don’t have one).

  • Your static web app (HTML, CSS, JavaScript, or frameworks like React, Angular, or Vue).

  • A GitHub repository where your app's code is hosted.

If you're missing any of these, take a moment to get them ready. I’ll wait.

Step 2: Navigate to Azure Portal

  1. Log in to the Azure Portal.

  2. In the search bar at the top, type “Static Web Apps” and select it from the results.

Step 3: Create a New Static Web App

  1. Click Create to start the setup process.

  2. Fill in the necessary details:

    • Subscription: Select your Azure subscription.

    • Resource Group: Either select an existing one or create a new one (think of it as a folder to organize your projects).

    • Name: Give your app a unique name (like “FancyPortfolio123”).

    • Hosting Plan: Choose between Free (great for testing) or Standard (if you're feeling ambitious).

    • Region: Select the closest region to your users for better performance.

Step 4: Connect Your App to GitHub

  1. Under the Deployment Details, click Sign in with GitHub and authenticate.

  2. Select your repository and the branch you want to deploy (e.g., main or master).

  3. If you're using a framework, choose the correct build presets (like React, Vue, or Angular). For vanilla HTML/CSS/JS, select Custom and specify the location of your app files (e.g., /).

Step 5: Review and Deploy

  1. Double-check your configurations (we don’t want typos here).

  2. Hit the Review + Create button. Azure will validate your setup.

  3. Once validation is successful, click Create.

Step 6: Watch the Magic Happen

Azure will spin up your static web app. Once deployment is complete, you’ll see a link to your live app. It might take a few minutes, so grab a coffee (or pretend to look busy).

Step 7: Celebrate! 🎉

Congratulations, your app is now live on the internet! Share the URL with your friends, colleagues, or that one skeptical cousin who said you couldn’t do it.

Optional: Fine-Tune Your App

  • Use the Azure Static Web Apps CLI for local testing.

  • Set up custom domains if you want a professional URL (no offense, “azurewebsites.net”).

  • Enable authentication for user logins or CI/CD for automatic deployments when you push to GitHub.

Why Azure Static Web Apps?

Azure makes hosting static web apps painless with:

  • Free SSL certificates (goodbye, "Not Secure" warnings).

  • Custom domain support.

  • Built-in API integration (using Azure Functions).

So there you have it—a static web app deployed in just a few simple steps. Azure makes the process straightforward, and you now have a professional-looking app live on the internet. Next up? Taking over the world, one web app at a time!