DEV Community

Renicius Pagotto
Renicius Pagotto

Posted on • Updated on

Azure Static Web Apps - The Big Picture

Hey everyone, today we're going to talk about Azure Static Web App and how this feature can help you improve and speed up the deployment of static web apps.

Introduction

Azure Static Web Apps is a new cloud-based service that automatically builds and deploys your web app to Azure directly from your repository. It's is fully integrated with popular source code managers like GitHub, GitLab, BitBucket and Azure DevOps.

Key Features

  • Azure Static Web Apps is a global service, so your app's static resources are distributed globally and cached.

  • Once your project is created, the CI/CD pipeline is also created with the project and runs automatically, making your project available in minutes.

  • Built-in API support provided by Azure Functions​

  • Free SSL certificates, which are automatically renewed​

  • Unique preview URLs to preview Pull Request changes

Architectural Considerations

Static web apps can be created using popular frameworks like React, Angular, Vue, Svelt or even Blazor, as they consist of a collection of static content like HTML, CSS and Javascript, which usually depend on an API to provide data.

Azure Static Web Apps supports Azure Functions, so it is possible to create an API together in the project, that is, in addition to creating a static project that will be in an app/ directory in the project, it is also possible to develop an endpoint using the Azure Functions that will be in an api/ folder within the same project, with this we can have a separation of static content and API, allowing each to be scaled using the most appropriate and cost-effective technology.

This architecture with static content servers, serverless backends (Azure Functions) and automated CI/CD workflows simplifies your development workflow, allowing you to focus your attention on application logic and user experience components of your modern web application.

Image description

When to use it?

  • In creating modern web applications with front-end structures such as Angular, React, Vue, Next and other frameworks.

  • In creating landing pages and personal websites using only HTML, Javascript and CSS.

Show me the code

For this demo, let's create a project that contains just one HTML file that will represent a very simple landing page.

Prerequisites

Once all prerequisites are installed, open Visual Studio and create a directory with the name of your choice. In this directory, we will create an HTML file and define an HTML tag with a text as shown in the image below.

Image description

With that, we basically have a code ready to carry out the deployment and the next step is exactly that.

Press F1 and search for Azure Static Web App: Create Static Web Apps and select.

Image description

In the next step, we need to select the Azure subscription, if you are not logged into your Azure account with Visual Studio Code, an option to connect will appear.

Image description

Once we select the signature, a pop-up appears on the screen informing that it is necessary to create a repository to store the code, so click on the Create button.

Image description

In the next step, we need to create a message to confirm before pushing our code to the repository. Type the message you want and press Enter.

Image description

Now the Azure Static Web Apps extension needs access to your GitHub account to store the code. Click the Allow button to be redirected to authenticate your account.

The popup below will not appear if you are already logged into your account.

Image description

In the next step, we return to the Azure Static Web Apps settings and now we need to define the name to be given to the service.

Image description

In the next option we need to define a name for the GitHub Repository.

Image description

The next step is to define the region where the resource will be created.

Image description

Now it's time to define the project type. Note that Azure Static Web Apps supports multiple frameworks and since our project is a simple index.html file, we should select the Custom option.

Image description

Here we need to define the path to reach the index.html file, but as the index is at the root of the directory, just define / for this option.

Image description

In the last step, we need to define the application build output path, however as our application is a simple HTML file, we don't need to define anything, however if the project was from some other framework, we would need to define the path to the dist folder or whatever another pattern.

Image description

Press enter to start creating the resource.

Image description

Now let's go to the Azure portal to check the resource that was created.

Image description

Selecting the resource, let's copy the url and paste it in our browser.

Image description

Image description

Github Actions

After completing all the steps, a directory called github is created in your project and inside it we can see that a yml has been created. This yml file represents the project's deployment pipeline.

Image description

Note that this pipeline was triggered automatically on GitHub.

Image description

Temporary URL

There is an amazing feature which is the possibility of having a temporary URL to analyze the changes made to the code in the Pull Request. Once the pull request is finished, the url will no longer be available for use.

To start the demo, create a new branch based on the main branch, feel free to name it whatever you like. Now, being in this new branch, let's add some new text in the code.

Image description

Now, let's commit and push the new code

Image description

In the next step, we'll open a Pull Request and wait for the pipeline to finish executing.

Image description

Image description

To get the temporary URL, click the Actions tab and select the run based on your new branch.

Image description

Click Build and Deploy Job in the left menu and then select Build and Deploy.

Image description

Scroll down to the bottom to see the URL.

Image description

Now, copy and paste into your browser to see the change.

Image description

Conclusion

Azure Static Web Apps is a powerful feature that makes it easy and fast to build and deliver a modern front-end project.

Did you like this post? Want to talk a little more about it? Leave a comment with your questions and ideas or get in touch through LinkedIn.

Top comments (0)