Create Your First Microsoft Azure Static Web App

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 and search for "Azure web service". Choose App Services.

Step 2: Click on Create app service.

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

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.

Step 5: Authorize from Github.

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.

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

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

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

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.

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.

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

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

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

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

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!