Application Service: Static Web Apps

  • Author: Ronald Fung

  • Creation Date: May 9, 2023

  • Next Modified Date: May 9, 2024

A. Introduction

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

The workflow of Azure Static Web Apps is tailored to a developer’s daily workflow. Apps are built and deployed based on code changes.

When you create an Azure Static Web Apps resource, Azure interacts directly with GitHub or Azure DevOps, to monitor a branch of your choice. Every time you push commits or accept pull requests into the watched branch, a build automatically runs and your app and API deploys to Azure.

Static web apps are commonly built using libraries and web frameworks like Angular, React, Svelte, Vue, or Blazor where server side rendering isn’t required. These apps include HTML, CSS, JavaScript, and image assets that make up the application. With a traditional web server, these assets are served from a single server alongside any required API endpoints.

With Static Web Apps, static assets are separated from a traditional web server and are instead served from points geographically distributed around the world. This distribution makes serving files much faster as files are physically closer to end users. In addition, API endpoints are hosted using a serverless architecture, which avoids the need for a full back-end server altogether.

B. How is it used at Seagen

As a biopharma research company using Microsoft Azure, you can use Azure App Service Static Web Apps to easily build and deploy static web applications. Here are some ways you can use Azure App Service Static Web Apps:

  1. Build static web applications quickly: Azure App Service Static Web Apps provides a quick and easy way to build and deploy static web applications. You can use popular web frameworks such as React, Angular, and Vue to build your applications.

  2. Secure your web applications: Azure App Service Static Web Apps provides built-in security features such as authentication and authorization, HTTPS support, and IP whitelisting. This helps to ensure that your web applications are secure and protected from unauthorized access.

  3. Scale your web applications: Azure App Service Static Web Apps provides automatic scaling capabilities that allow you to scale your web applications up or down based on demand. This helps to ensure that resources are used efficiently and costs are kept under control.

  4. Integrate with other Azure services: Azure App Service Static Web Apps can be integrated with other Azure services such as Azure Functions, Azure Logic Apps, and Azure Event Grid. This allows you to easily integrate your web applications with other Azure services and applications.

  5. Continuous deployment: Azure App Service Static Web Apps provides built-in continuous deployment features that allow you to automatically deploy changes to your web applications when you push changes to your source code repository.

Overall, Azure App Service Static Web Apps can help your biopharma research company quickly and easily build and deploy static web applications. With built-in security features, automatic scaling capabilities, and the ability to integrate with other Azure services, Azure App Service Static Web Apps can help you streamline your application development and improve your overall agility and efficiency.

C. Features

  • Web hosting for static content like HTML, CSS, JavaScript, and images.

  • Integrated API support provided by managed Azure Functions, with the option to link an existing function app, web app, container app, or API Management instance using a standard account. If you need your API in a region that doesn’t support managed functions, you can bring your own functions to your app.

  • First-class GitHub and Azure DevOps integration that allows repository changes to trigger builds and deployments.

  • Globally distributed static content, putting content closer to your users.

  • Free SSL certificates, which are automatically renewed.

  • Custom domains to provide branded customizations to your app.

  • Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.

  • Authentication provider integrations with Azure Active Directory, GitHub, and Twitter.

  • Customizable authorization role definition and assignments.

  • Back-end routing rules enabling full control over the content and routes you serve.

  • Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

  • CLI support through the Azure CLI to create cloud resources, and via the Azure Static Web Apps CLI for local development.

D. Where implemented

LeanIX

E. How it is tested

Testing Azure Application Service: Static Web Apps involves ensuring that the static web app is functioning correctly, securely, and meeting the needs of all stakeholders involved in the project. Here are some steps to follow to test Azure Application Service: Static Web Apps:

  1. Define the scope and requirements: Define the scope of the project and the requirements of all stakeholders involved in the project. This will help ensure that the static web app is designed to meet the needs of all stakeholders.

  2. Create test plans: Develop test plans that cover all aspects of the static web app functionality, including input validation, authentication and authorization, error handling, and performance testing. The test plans should be designed to meet the needs of the organization, including scalability and resilience.

  3. Conduct unit testing: Test the static web app’s individual features and modules to ensure that they are functioning correctly. This may involve using tools like Jest or Mocha for automated testing.

  4. Conduct integration testing: Test the static web app in an integrated environment to ensure that it works correctly with other systems and applications. This may involve testing the static web app with different operating systems, browsers, and devices.

  5. Conduct user acceptance testing: Test the static web app with end-users to ensure that it meets their needs and is easy to use. This may involve conducting surveys, interviews, or focus groups to gather feedback from users.

  6. Automate testing: Automate testing of the static web app to ensure that it is functioning correctly and meeting the needs of all stakeholders. This may involve using tools like Azure DevOps to set up automated testing pipelines.

  7. Monitor performance: Monitor the performance of the static web app in production to ensure that it is meeting the needs of all stakeholders. This may involve setting up monitoring tools, such as Azure Application Insights, to track static web app usage and identify performance issues.

  8. Address issues: Address any issues that are identified during testing and make necessary changes to ensure that the static web app is functioning correctly and meeting the needs of all stakeholders.

By following these steps, you can ensure that Azure Application Service: Static Web Apps is tested thoroughly and meets the needs of all stakeholders involved in the project. This can help improve the quality of the static web app and ensure that it functions correctly in a production environment.

F. 2023 Roadmap

????

G. 2024 Roadmap

????

H. Known Issues

There are several known issues that can impact Azure Application Service: Static Web Apps. Here are some of the most common issues to be aware of:

  1. Performance issues: Performance is a critical concern when it comes to static web apps. If the app is not performing well, it can impact the user experience and cause delays in processing requests. This can impact the overall performance of the application.

  2. Security issues: Security is another critical concern when it comes to static web apps. If the app is not properly secured, it may be vulnerable to attacks or data breaches. This can impact the confidentiality and integrity of the data being transmitted through the app.

  3. Compatibility issues: Compatibility issues can arise when different teams are using different tools or technologies. This can cause issues when integrating the static web app with other systems and applications. It is important to ensure that all stakeholders are using compatible tools and technologies to avoid compatibility issues.

  4. Integration issues: Integration issues can arise when integrating the static web app with other systems and applications. It is important to ensure that the static web app is designed to work seamlessly with other systems and applications to avoid integration issues.

  5. Scalability issues: Scalability is an important concern when it comes to static web apps. If the static web app is not designed to scale, it may not be able to handle the increased traffic and user demands that come with organizational growth.

  6. Cache-related issues: Static web apps can sometimes have issues with caching, which can cause outdated or incorrect information to be displayed to users. It is important to ensure that the app is properly configured to handle caching issues.

Overall, Azure Application Service: Static Web Apps requires careful planning and management to ensure that the static web app is functioning correctly and meeting the needs of all stakeholders involved in the project. By being aware of these known issues and taking steps to address them, you can improve the quality of the static web app and ensure the success of your project.

[x] Reviewed by Enterprise Architecture

[x] Reviewed by Application Development

[x] Reviewed by Data Architecture