How I built and deployed Azure static web app with GitHub

Azure Static Web App

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

Most popular features

• Web hosting for static content like HTML, CSS, JavaScript, and images.
• First-class GitHub and Azure DevOps integration that allows repository changes to trigger builds and deployments.
• Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

Prerequisites

• GitHub account
• Install Git
• Azure account
• Visual Studio Code
• Azure Static Web Apps extension for Visual Studio Code

Create a repository

1. On GitHub.com, navigate to the static-web-app repository.
2. In the top-right corner of the page, click Fork.
3. Under "Owner," select the dropdown menu and click an owner for the forked repository.
4. Click Create fork.

Clone the repository

With the repository created in your GitHub account, clone the project to your local machine using the following command.

1. Open Command Line or terminal
2. Type git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/Static-Web-App.git replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub username
3. Next, open Visual Studio Code and go to File > Open Folder to open the cloned repository in the editor.

Install Azure Static Web Apps extension

1. Select View > Extensions.
2. In the Search Extensions in Marketplace, type Azure Static Web Apps.
3. Select Install for Azure Static Web Apps.
4. The extension installs into Visual Studio Code.

Create a static web app

1. Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.

   The extension will prompts you to sign in to Azure and GitHub in Visual Studio Code to continue. If you are not already authenticated.

2. Press F1 to open the Visual Studio Code command palette.

3. Enter Create static web app in the command box.
   

4. Select Azure Static Web Apps: Create static web app and select Enter.
   
   
   

5. Once the app is created, a confirmation notification is shown in Visual Studio Code.
   Once the deployment is complete, you can navigate directly to your website.

6. To view the website in the browser, right-click the project in the Static Web Apps extension, and select Browse Site.
   

Azure Portal overview

To view full details about your static web app you just deployed:

• Go to Azure portal
• Select Static Web Apps
• Select Overview

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance through the extension.

In the Visual Studio Code Explorer window, return to the Resources section and under Static Web Apps, right-click Static-Web-App and select Delete.

Congratulations you have built and deployed your first Azure Static Web App.

Thank you for reading🤝. Feel free to leave your questions and/or comments (if any). LinkedIn Dev.to