Building Your First Static Web App on Azure: A Step-by-Step Guide

Azure Static Web Apps is a powerful platform that helps you host static websites and this comes with scalability, security and reliability advantages. I will walk you through the process of building a static web app on Azure, from creating a new app and connecting it to your code repository, to configuring your build and deployment settings.

Whether you're a seasoned developer or just starting out, this step-by-step guide will provide you with everything you need to know to get up and running on Azure Static Web Apps.

Table of Contents

• Introduction

• Create static web app

• Configuration

• Deployment

• Conclusion

Introduction.

Why Azure static web app?
Azure Static Web Apps is a cloud service from Microsoft Azure that allows you to easily deploy and host static web applications. It supports a variety of static site generators, frameworks, and front-end libraries such as Angular, React, Vue.js, and more.

Advantages of Azure static web app

1. Simplified deployment and hosting of static web applications. You get to focus on developing your web application rather than worrying about infrastructure, servers, or scalability. It provides automatic scaling to handle high traffic, so you don't need to worry about scaling your application up or down manually.

2. Highly secure. It provides built-in security features such as SSL certificates and support for custom domains, as well as integrated authentication and authorization options. This means that your web application is protected against attacks and unauthorized access.

3. Cost-effective. The service is available on a consumption-based pricing model, which means that you only pay for the resources that you use. This makes it ideal for small to medium-sized web applications, as you can keep costs low while still benefiting from the scalability and security features of Azure.

Create static web app.

• Sign in to the Azure Portal and create a new resource(you can use an existing resource if you have one). You can either use the search bar at the top of the portal or go to the resource group that you want to create the web app in.

• Select the "Static Web App" option from the list of available resources.

• Click on the Create button to proceed

use image for reference

Configuration.

Once you have clicked on the create button:

i). Select your desired subscription and the resource group to use.
ii). Give your static web app a unique name and select your desired hosting plan.
iii). Choose the source code repository for your web app. Azure Static Web Apps support a variety of repositories, including GitHub, Azure DevOps, and Bitbucket.

use image for reference

• Sign in to your GitHub account using the button on step 3 above (this will take you to another page)

iv). Select your Organization name which will be the account which you have linked in the previous step.

• Choose the repository that you would want the app to be from.
• Select a branch from the repository.

v). Under Build Details choose the language that your static website is built(I am working with HTML)

• Choose the app location.

The App location field refers to the location of your web application's build output, which is the directory that contains the files that should be served by your web server.

By default, Azure Static Web Apps will look for a build output directory named dist, but this may vary depending on your project configuration.

Here's how you can find the build output directory for your project:

• Clone your GitHub repository to your local machine.

• Navigate to your project directory and look for the directory that contains the built files. This may be named dist, build, public, or something else depending on your project configuration.

• Once you have found the directory, copy the path to the directory. This is the path that you'll enter in the App location field.

If your project is a pure HTML project like mine, set the "App location" field to the root directory of your project, which is where your index.html file is located. To do this, you can simply enter.(a period) as the value for the "App location" field.

• Specify the API location if you are working with one.
• The output location specifies where the built files will be stored after the build process is complete. The output location must be a directory that exists in your repository. The output location can be the same as the "App location" field or a different directory in your repository.

vi). Preview Workflow:

• It allows you to see the generated YAML file for the GitHub Actions workflow that will be used to build and deploy your static web application.

• It can be helpful if you want to see the details of the GitHub Actions workflow before it is created, or if you want to customize the workflow file to meet your specific needs.

• After previewing the workflow file, you can choose to save your build settings and create your Azure Static Web App, or you can choose to make changes to the workflow file before creating the app. If you choose to make changes, you will need to update the YAML file in your GitHub repository and commit the changes before creating your Azure Static Web App.

Use Image for reference

Deployment to Azure.

• Once you are sure of your configurations you can click on the Create + Review button Then be sure to click on Create once all the tests have passed.

• Click on the just created static web app to check on it's details.

• The URL provided is used to access your application from any web browser.

Use Image for reference

• You can open the URL provided, if your page is like the image below don't worry because the first time you deploy your app, it may take a few moments for the deployment process to complete and for the app to be accessible via the URL.

• Once the the deployment is complete you should be able to see your just deployed website.

Conclusion

• Congratulations, you've successfully built and deployed your first static web app on Azure! By following the steps outlined in this article, you've learned how to leverage the power of Azure Static Web Apps to easily host and manage your static websites. From connecting your code repository and configuring your build settings, to deploying and monitoring your app, you now have a solid understanding of the entire process. Keep in mind the many benefits Azure provides,with Azure Static Web Apps, you can focus on developing and delivering great content to your users, while Azure takes care of the rest.

Thank you for reading this article, and I hope you found it helpful. Happy coding!