App service vs Static web app

Question

Hi,

What is the difference between App Service and Static Web app. Can I deploy a Angular web app which connects to an API as a static web app?

Thank you!

Answer 1

Hi @Ugendran M

Short answer:

Yes, you can deploy an Angular web app using Azure Static Web App. Static Web Apps automatically builds and deploys dozens of frontend frameworks. You can follow this Quickstart to build your first static site with Static Web Apps.

Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it .NET, .NET Core, Java, Ruby, Node.js, PHP, or Python. Static Web App is an offering under Azure App Service

Long answser:

"Azure Static Web Apps is a service that automatically builds and deploys full-stack web apps to Azure from a code repository. 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 is automatically run and your app and API is deployed to Azure.

Static web apps are commonly built using libraries and frameworks like Angular, React, Svelte, Vue, or Blazor where server-side rendering is not 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." You can learn more from this documentation.

Here are some key features:

• Web hosting for static content like HTML, CSS, JavaScript, and images.
• Integrated API support provided by Azure Functions with the option to link an existing Azure Functions app using a standard account.
• First-class GitHub and Azure DevOps integration where repository changes 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.

Hope that was helpful. If you have additional questions please let us know.

Thanks,
Grace