|
1 | 1 | --- |
2 | | -title: What are App Service Static Apps? |
3 | | -description: #Required; article description that is displayed in search results. |
4 | | -services: #Required for articles that deal with a service; service slug assigned to your service by ACOM. |
| 2 | +title: What is Azure Static Web Apps? |
| 3 | +description: The key features and functionality of Azure Static Web Apps. |
| 4 | +services: static-web-apps |
5 | 5 | author: craigshoemaker |
6 | | -ms.service: azure-functions |
| 6 | +ms.service: static-web-apps |
7 | 7 | ms.topic: overview |
8 | 8 | ms.date: 05/08/2020 |
9 | 9 | ms.author: cshoe |
| 10 | +# Customer intent: As a developer, I want to publish a website from a GitHub repository so that the app is publicly available on the web. |
10 | 11 | --- |
11 | 12 |
|
12 | | -<!---Recommended: Remove all the comments in this template before you sign-off or merge to master.---> |
| 13 | +# What is Azure Static Web Apps (Preview)? |
13 | 14 |
|
14 | | -<!---overview articles are for new customers and explain the service from a technical point of view. |
15 | | -They are not intended to define benefits or value prop; that would be in marketing content. |
16 | | ----> |
| 15 | +Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository. |
17 | 16 |
|
18 | | -# What are App Service Static Apps? |
| 17 | +:::image type="content" source="media/overview/static-apps-overview.png" alt-text="Static Apps overview"::: |
19 | 18 |
|
20 | | -<!---Required: |
21 | | -For the H1 - that's the primary heading at the top of the article - use the format "What is <service>?" |
22 | | -You can also use this in the TOC if your service name doesn't cause the phrase to wrap. |
23 | | ----> |
| 19 | +The workflow of Azure Static Web Apps is tailored to a developer's daily workflow. Apps are built and deployed based off GitHub interactions. |
24 | 20 |
|
25 | | -Introductory paragraph. |
26 | | -<!---Required: |
27 | | -The introductory paragraph helps customers quickly determine whether an article is relevant. |
28 | | -Describe in customer-friendly terms what the service is and does, and why the customer should care. Keep it short for the intro. |
29 | | -You can go into more detail later in the article. Many services add artwork or videos below the introduction. |
30 | | ----> |
| 21 | +When you create an Azure Static Web Apps resource, Azure sets up a GitHub Actions workflow in the app's source code repository that monitors a branch of your choice. Every time you push commits or accept pull requests into the watched branch, the GitHub Action automatically builds and deploys your app and its API to Azure. |
31 | 22 |
|
32 | | -<!---Avoid notes, tips, and important boxes. Readers tend to skip over them. Better to put that info directly into the article text.---> |
| 23 | +Static web apps are commonly built using libraries and frameworks like Angular, React, Svelte, or Vue. 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. |
33 | 24 |
|
34 | | -<!---Screenshots and videos can add another way to show and tell the overview story. But don't overdo them. Make sure that they offer value for the overview. |
35 | | -If users access your product/service via a web browser, the first screenshot should always include the full browser window in Chrome or Safari. This is to show users that the portal is browser-based - OS and browser agnostic. |
36 | | ----> |
| 25 | +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](../azure-functions/functions-overview.md), which avoids the need for a full back-end server all together. |
37 | 26 |
|
38 | | -## <article body> |
| 27 | +## Key features |
39 | 28 |
|
40 | | -<!--- |
41 | | -After the intro, you can develop your overview by discussing the features that answer the "Why should I care" question with a bit more depth. |
42 | | -Be sure to call out any basic requirements and dependencies, as well as limitations or overhead. |
43 | | -Don't catalog every feature, and some may only need to be mentioned as available, without any discussion. |
44 | | ----> |
| 29 | +- **Free web hosting** for static content like HTML, CSS, JavaScript, and images. |
| 30 | +- **Integrated API** support provided by Azure Functions. |
| 31 | +- **First-party GitHub integration** where repository changes trigger builds and deployments. |
| 32 | +- **Globally distributed** static content, putting content closer to your users. |
| 33 | +- **Free SSL certificates**, which are automatically renewed. |
| 34 | +- **Custom domains**\* to provide branded customizations to your app. |
| 35 | +- **Seamless security model** with a reverse-proxy when calling APIs, which requires no CORS configuration. |
| 36 | +- **Authentication provider integrations** with Azure Active Directory, Facebook, Google, GitHub, and Twitter. |
| 37 | +- **Customizable authorization role definition** and assignments. |
| 38 | +- **Back-end routing rules** enabling full control over the content and routes you serve. |
| 39 | +- **Generated staging versions** powered by pull requests enabling preview versions of your site before publishing. |
45 | 40 |
|
46 | | -## <Top task> |
| 41 | +## What you can do with Static Web Apps |
47 | 42 |
|
48 | | -<!---Suggested: |
49 | | -An effective way to structure you overview article is to create an H2 for the top customer tasks identified in milestone one of the [Content + Learning content model](contribute-get-started-mvc.md) and describe how the product/service helps customers with that task. |
50 | | -Create a new H2 for each task you list. |
51 | | ----> |
| 43 | +- **Build modern JavaScript applications** with frameworks and libraries like [Angular](https://angular.io/), [React](https://reactjs.org/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) with an [Azure Functions](https://azure.microsoft.com/services/functions/) back-end. |
| 44 | +- **Publish static sites** with frameworks like [Gatsby](publish-gatsby.md), [Hugo](publish-hugo.md), [VuePress](publish-vuepress.md). |
| 45 | +- **Deploy web applications** with frameworks like [Next.js](deploy-nextjs.md) and [Nuxt.js](deploy-nuxtjs.md). |
52 | 46 |
|
53 | | -## Next steps |
| 47 | +\* Apex domain registrations are not supported during preview. |
54 | 48 |
|
55 | | -<!-- Uncomment this block and add the appropriate link |
| 49 | +## Next steps |
56 | 50 |
|
57 | 51 | > [!div class="nextstepaction"] |
58 | | -> [Next steps button](contribute-get-started-mvc.md) |
59 | | -
|
60 | | ---> |
61 | | - |
62 | | -<!--- Required: |
63 | | -In Overview articles, provide at least one next step and no more than three. |
64 | | -Next steps in overview articles will often link to a quickstart. |
65 | | -Use regular links; do not use a blue box link. What you link to will depend on what is really a next step for the customer. |
66 | | -Do not use a "More info section" or a "Resources section" or a "See also section". |
67 | | ----> |
| 52 | +> [Build your first static app](getting-started.md) |
0 commit comments