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.
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
- GitHub account
- Azure account
- Visual Studio Code
- Azure Static Web App extension for Visual Studio Code
- Git
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.
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.
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.
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.
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.
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.
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.
In the next option we need to define a name for the GitHub Repository.
The next step is to define the region where the resource will be created.
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.
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.
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.
Press enter to start creating the resource.
Now let's go to the Azure portal to check the resource that was created.
Selecting the resource, let's copy the url and paste it in our browser.
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.
Note that this pipeline was triggered automatically on GitHub.
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.
Now, let's commit and push the new code
In the next step, we'll open a Pull Request and wait for the pipeline to finish executing.
To get the temporary URL, click the Actions tab and select the run based on your new branch.
Click Build and Deploy Job in the left menu and then select Build and Deploy.
Scroll down to the bottom to see the URL.
Now, copy and paste into your browser to see the change.
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)