Create Your First Microsoft Azure Static Web App
Published: 2023-04-14 18:20:46

Let's create our first Azure Static Web App that can allow us deploy, host or build static web applications and automatically publish to the web!

In this article, I’ll show you two things: 

The first is what happens when you create a web app without any index.html file and the second is what happens when an index.html file is contained in the web app.

**Note:** An index.html file is required to create a web app. Your web app must contain at least one index.html file to properly deploy.

**Creating Without an Index.html File**

**Step 1:** Login to your Azure account or create one [here](https://azure.microsoft.com/en-us/free/search/?ef_id=_k_CjwKCAjwitShBhA6EiwAq3RqA-PycMtvNXALBaAuV404B6e8alvAWW_j4wnOT_nuL-CzsXz4YAoipBoCovgQAvD_BwE_k_&OCID=AIDcmmfdukp5kz_SEM_k_CjwKCAjwitShBhA6EiwAq3RqA-PycMtvNXALBaAuV404B6e8alvAWW_j4wnOT_nuL-CzsXz4YAoipBoCovgQAvD_BwE_k_&gclid=CjwKCAjwitShBhA6EiwAq3RqA-PycMtvNXALBaAuV404B6e8alvAWW_j4wnOT_nuL-CzsXz4YAoipBoCovgQAvD_BwE) and search for "Azure web service". Choose App  Services.

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

**Step 2:** Click on Create app service.

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

**Step 3:** Fill in the details. Choose a unique name. Select static web app and click on create.

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

**Step 4:** Choose a unique name for your static web app and select the free plan. 
Proceed to choose a region close to you. Select any deployment source. Let's use Github.

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


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

**Step 5:** Authorize from Github.

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

**Step 6:** Your Github details would be automatically imported. Just click the spaces to select them. 
You can create a new Github repository and branch if you do not have any.


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

**Step 7:** Select custom as the build presets. App and Output location should be (/src). Leave the API blank. Review an Create.

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


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

**Step 8:** Allow the deployment process to be complete and go to resource.

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

**Step 9:** This is how your resource page should look. Click on the URL.

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

**Step 10:** Tada! Our Azure static web app is live and waiting for content. This is because there is no index.html file therefore, there is no content to be seen.


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

To enable your web app to display content, you need to add a GitHub repository with at least one index.html file.

To do this, we need to create one. Search for “Microsoft Azure documentation” on your browser. This will give you a template to create a GitHub repository containing an index.html file. Enter a repository name and create.


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


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

Here, your GitHub repository has been created and you can see an index.html file and a ccs file under the Code section.

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

Now, choose the new repository containing the index.html file you just created on Github and proceed.

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

Click on the URL or browse section as seen in the image below:

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

Our web app is now displaying content. This is what was contained in the index.html file we created.

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

You can edit your codes or deploy real websites on your static web app. This is just a demo and I hope you enjoyed every bit of this article.

Always remember to delete this resource after practicing so you don't accrue unnecessary bills. See you in the next article!