Creating a Static Web App with Microsoft Azure
Published: 2023-04-15 21:27:53

Are you looking to build a website or web application that doesn't require a server-side language like PHP or Node.js? A static web app may be the perfect solution for you. A static web app is a website or web application that consists of HTML, CSS, and JavaScript files that are served directly to the user's browser without requiring server-side processing. In this article, we'll walk through the process of creating a static web app using Microsoft Azure.

## Step 1: Create an Azure Account
To create a static web app using Microsoft Azure, you'll first need to create an Azure account. You can sign up for a free trial account, which will give you access to a limited set of Azure services for 12 months.

## Step 2: Create a Resource Group & Create a Static Web App
After creating an Azure account, the next step is to create a resource group. A resource group is a container for Azure resources, such as virtual machines, databases, and web apps. 
To create a resource group, navigate to the Azure portal and click on "Resource groups" in the left-hand menu. Then click "Add" and follow the prompts to create a new resource group.

+ In the left-hand menu, click on "Create a resource".

+ In the search bar, type "Static Web App" and select the option from the list.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jd5ogig96gktux2yxyy.png)
+ Click on the "Create" button to start the creation process.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk9zpqpzjy3744ic6m1r.png)
+ In the "Basics" tab, provide a name for your web app and select the subscription, resource group, and region.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e24bizsifiy9rrckzzfr.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1710ziwbonne0rbv6jfv.png)

## Step 3: Deploy Your Static Web App
+ In the "Build" tab, connect your app to a code repository (GitHub, Azure DevOps, Bitbucket), select a branch, and configure the build settings.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8kjvh7o9b07vqsgudfo.png)
+ In the "Review + create" tab, review your settings and click on the "Create" button to create your app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhnik94a7wjvyv5jxfhg.png)

After creating your static web app, the next step is to deploy your website or web application files. You can deploy your files using either GitHub or Azure DevOps. To deploy using GitHub, you'll need to connect your GitHub account to your static web app and select the repository that contains your website or web application files. To deploy using Azure DevOps, you'll need to create a pipeline that deploys your website or web application files.

## Step 4: Test Your Static Web App
After deploying your website or web application files, you can test your static web app by navigating to the URL of the app, which should be displayed in the Azure portal. If everything is working correctly, you should see your website or web application displayed in your browser.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmvwxkyhrmtxj1ytfbxx.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulm3koenhee6nkoquyqk.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbziab185o0ebud38y36.png)

## Step 5: Delete Your Static Web App (very Important)
To avoid running up costs, it's important to delete your static web app when you no longer need it. To delete your static web app, navigate to the Azure portal and select the app you want to delete. Then click on "Delete" and follow the prompts to delete the app and associated resources.

Creating a static web app using Microsoft Azure is a quick and easy way to build a website or web application without requiring server-side processing. By following these simple steps, you can create, deploy, and test your own static web app in no time.