Home
%3CLINGO-SUB%20id%3D%22lingo-sub-1394451%22%20slang%3D%22en-US%22%3EIntroducing%20App%20Service%20Static%20Web%20Apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1394451%22%20slang%3D%22en-US%22%3E%3CP%3EModern%20web%20apps%20are%20increasingly%20adopting%20static%20front-end%20design%20patterns%20with%20client-side%20processing%20powered%20by%20JavaScript.%20This%20paradigm%20requires%20us%20to%20think%20differently%20about%20how%20we%20deploy%20and%20host%20web%20apps%20that%20don%E2%80%99t%20rely%20on%20web%20servers%20and%20consequently%20require%20a%20new%20structure%20of%20supporting%20cloud%20resources.%20This%20week%20at%20Build%2C%20our%20annual%20celebration%20of%20all%20things%20developer%2C%20we%20are%20happy%20to%20announce%20that%20Azure%20App%20Service%20has%20been%20expanded%20with%20a%20new%20hosting%20offer%20tailored%20specifically%20for%20static%20web%20apps%2C%20empowering%20developers%20to%20focus%20on%20the%20business%20logic%20that%20differentiates%20their%20apps%20rather%20than%20the%20infrastructure%20that%20hosts%20them.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Fservices%2Fapp-service%2Fstatic%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3EApp%20Service%20Static%20Web%20Apps%3C%2FA%3E%20is%20now%20available%20in%20preview%20for%20developers%20building%20modern%2C%20full%20stack%20JavaScript%20web%20apps%20with%20static%20front-ends%20and%20optional%20dynamic%20back-ends%20powered%20by%20serverless%20APIs.%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CP%3EWith%20Static%20Web%20Apps%2C%20developers%20can%20use%20modular%20and%20extensible%20patterns%20to%20deploy%20apps%20in%20minutes%20while%20taking%20advantage%20of%20the%20built-in%20scaling%20and%20cost-savings%20offered%20by%20serverless%20technologies.%20Pre-rendering%20static%20content%20(including%20HTML%2C%20CSS%2C%20JavaScript%2C%20and%20image%20files)%20and%20leveraging%20global%20content%20distribution%20to%20serve%20this%20content%20removes%20the%20need%20for%20traditional%20web%20servers%20generating%20the%20content%20with%20every%20request.%20Moving%20dynamic%20logic%20to%20serverless%20APIs%20unlocks%20dynamic%20scale%20that%20can%20adjust%20to%20demand%20in%20real%20time%20and%20can%20empower%20developers%20to%20access%20the%20benefits%20of%20microservices%20as%20they%20evolve%20and%20extend%20individual%20app%20components.%20The%20service%20is%20designed%20for%20developers%20using%20frameworks%20like%20Angular%2C%20React%2C%20Svelte%2C%20and%20Vue%20or%20static%20site%20generators%20like%20Gatsby%20looking%20for%20a%20simple%20interface%20to%20deploy%20the%20cloud%20resources.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EGo%20from%20code%20to%20scale!%3C%2FP%3E%3CP%3EStatic%20Web%20Apps%20automates%20the%20tedium%20of%20getting%20your%20static%20web%20app%20from%20source%20code%20in%20GitHub%20to%20global%20high-availability%20hosting.%20The%20development%20experience%20is%20optimized%20around%20the%20open-source%20tools%20developers%20already%20use%2C%20from%20a%20dedicated%20VS%20Code%20-ERR%3AREF-NOT-FOUND-extension%20for%20local%20development%20to%20native%20Github%20workflows%20for%20CI%2FCD%20powered%20by%20GitHub%20Actions.%3C%2FP%3E%20%26nbsp%3B%3CP%3EValidate%20pre-production%20changes%20easily%20with%20pull%20request%20previews.%20When%20a%20pull%20request%20is%20submitted%2C%20the%20branch%20is%20automatically%20built%20in%20a%20pre-production%20environment%20and%20a%20preview%20URL%20is%20provided%20right%20in%20the%20Github%20pull%20request%20comment%20thread.%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CP%3EStatic%20Web%20Apps%20integrates%20with%20Azure%20Functions%20to%20provision%20serverless%20APIs%20that%20enable%20dynamic%2C%20fully-featured%20backend%20services%20that%20are%20securely%20accessible%20from%20the%20static%20front-end.%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CP%3EThe%20service%20also%20supports%20a%20unified%20definition%20for%20routing%20rules%20and%20authorization%20behavior%20across%20the%20static%20content%20and%20dynamic%20APIs.%20You%20can%20even%20generate%20invitations%20to%20associate%20end%20users%20with%20roles%20for%20multiple%20identity%20providers.%20Authorized%20users%20are%20granted%20access%20to%20routes%20by%20rules%20you%20define%20in%20a%20routes.json%20file.%3C%2FP%3E%3CP%3E%3C%2FP%3E%20%26nbsp%3B%3CP%3ELearn%20more%20and%20get%20started%20today%3C%2FP%3E%3CP%3EMore%20feature%20are%20available%20to%20explore%20in%20the%20Static%20Web%20Apps%20-ERR%3AREF-NOT-FOUND-documentation%20including%20mapping%20custom%20domains%20and%20app%20settings%20configuration.%20The%20Static%20Web%20Apps%20public%20preview%20starts%20with%20a%20Free%20plan%20so%20you%20can%20explore%20this%20new%20solution%20without%20charges%20for%20the%20hosting%20and%20global%20distribution%20of%20the%20static%20web%20app%20content.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EGet%20started%20today!%3C%2FP%3EVisit%20the%20-ERR%3AREF-NOT-FOUND-Static%20Web%20Apps%20quickstart%20to%20build%20and%20deploy%20your%20first%20static%20web%20app%20in%20minutes.%20See%20the%20%5B%23%24dp35%5D%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fswadocs%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3EStatic%20Web%20Apps%20documentation%3C%2FA%3E%26nbsp%3Bfor%20more%20info%20about%20Static%20Web%20Apps.%20Follow%20the%20guided%20learning%20paths%20in%20Microsoft%20Learn%20for%20%5B%23%24dp37%5D%3CA%20href%3D%22https%3A%2F%2Faka.ms%2Fswaframeworks%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Ecreating%20and%20publishing%20an%20Angular%2C%20React%2C%20Svelte%2C%20or%20Vue%20JavaScript%20app%20and%20API%3C%2FA%3E%20or%20for%20%5B%23%24dp38%5D%3CA%20href%3D%22https%3A%2F%2Faka.ms%2Fstaticsitegen%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Ecreating%20and%20publishing%20an%20app%20with%20the%20Gatsby%20static%20site%20generator%3C%2FA%3E.%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%E2%80%99d%20love%20to%20hear%20your%20feedback!%20Please%20-ERR%3AREF-NOT-FOUND-open%20an%20issue%20in%20the%20Static%20Web%20Apps%20Github%20repo.%3C%2FP%3E%20%26nbsp%3B%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-1394451%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Fservices%2Fapp-service%2Fstatic%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3EApp%20Service%20Static%20Web%20Apps%3C%2FA%3E%26nbsp%3Bis%20now%20available%20in%20preview%20for%20developers%20building%20modern%2C%20full%20stack%20JavaScript%20web%20apps%20with%20static%20front-ends%20%26nbsp%3Band%20optional%20dynamic%20back-ends%20powered%20by%20serverless%20APIs.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1394451%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EStatic%20Web%20Apps%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Frequent Visitor

Modern web apps are increasingly adopting static front-end design patterns with client-side processing powered by JavaScript. This paradigm requires us to think differently about how we deploy and host web apps that don’t rely on web servers and consequently require a new structure of supporting cloud resources. This week at Build, our annual celebration of all things developer, we are happy to announce that Azure App Service has been expanded with a new hosting offer tailored specifically for static web apps, empowering developers to focus on the business logic that differentiates their apps rather than the infrastructure that hosts them.

 

App Service Static Web Apps is now available in preview for developers building modern, full stack JavaScript web apps with static front-ends and optional dynamic back-ends powered by serverless APIs.

SWA.png

With Static Web Apps, developers can use modular and extensible patterns to deploy apps in minutes while taking advantage of the built-in scaling and cost-savings offered by serverless technologies. Pre-rendering static content (including HTML, CSS, JavaScript, and image files) and leveraging global content distribution to serve this content removes the need for traditional web servers generating the content with every request. Moving dynamic logic to serverless APIs unlocks dynamic scale that can adjust to demand in real time and can empower developers to access the benefits of microservices as they evolve and extend individual app components. The service is designed for developers using frameworks like Angular, React, Svelte, and Vue or static site generators like Gatsby looking for a simple interface to deploy the cloud resources.

 

Go from code to scale!

Static Web Apps automates the tedium of getting your static web app from source code in GitHub to global high-availability hosting. The development experience is optimized around the open-source tools developers already use, from a dedicated VS Code extension for local development to native Github workflows for CI/CD powered by GitHub Actions.

 

Validate pre-production changes easily with pull request previews. When a pull request is submitted, the branch is automatically built in a pre-production environment and a preview URL is provided right in the Github pull request comment thread.

SWAEnv.gif

Static Web Apps integrates with Azure Functions to provision serverless APIs that enable dynamic, fully-featured backend services that are securely accessible from the static front-end.

SWAdiagram.png

The service also supports a unified definition for routing rules and authorization behavior across the static content and dynamic APIs. You can even generate invitations to associate end users with roles for multiple identity providers. Authorized users are granted access to routes by rules you define in a routes.json file.

Auth.png

 

Learn more and get started today

More feature are available to explore in the Static Web Apps documentation including mapping custom domains and app settings configuration. The Static Web Apps public preview starts with a Free plan so you can explore this new solution without charges for the hosting and global distribution of the static web app content.

 

Get started today!

 

We’d love to hear your feedback! Please open an issue in the Static Web Apps Github repo.