%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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%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%3CLINGO-SUB%20id%3D%22lingo-sub-1475581%22%20slang%3D%22en-US%22%3ERe%3A%20Introducing%20App%20Service%20Static%20Web%20Apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1475581%22%20slang%3D%22en-US%22%3E%3CP%3EPerhaps%20we%20can%20also%20mention%20Blazor%20WASM%20too%20along%20with%20the%20other%20frameworks%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F665873%22%20target%3D%22_blank%22%3E%40DariaGrigoriu%3C%2FA%3E%26nbsp%3B.%20We%20will%20be%20using%20this%20extension%20in%20our%20OSS%20project.%20We%20blogged%20about%20it%20too.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftech.hackmum.in%2Fblog%2FMSBuild-2020%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ftech.hackmum.in%2Fblog%2FMSBuild-2020%2F%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1485244%22%20slang%3D%22en-US%22%3ERe%3A%20Introducing%20App%20Service%20Static%20Web%20Apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1485244%22%20slang%3D%22en-US%22%3E%3CP%3ENice!%20Why%20only%20github%20%3F%20What%20about%20Azure%20Devops%20as%20source%20control%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1486607%22%20slang%3D%22en-US%22%3ERe%3A%20Introducing%20App%20Service%20Static%20Web%20Apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1486607%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20it%20possible%20to%20have%20an%20HTML%20page%20that%20takes%20a%20file%20upload%2C%20with%20the%20upload%20saved%20to%20the%20same%20Storage%20space%20for%20later%20download%20by%20others%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1498643%22%20slang%3D%22en-US%22%3ERe%3A%20Introducing%20App%20Service%20Static%20Web%20Apps%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1498643%22%20slang%3D%22en-US%22%3E%3CP%3ESeconding%20the%20request%20to%20have%20this%20integrate%20with%20Azure%20DevOps.%20I%20understand%20that%20the%20road%20map%20is%20to%20eventually%20move%20everything%20to%20GitHub%2C%20but%20as%20of%20now%20the%20features%20for%20that%20platform%20are%20far%20behind%20AzDO%20which%20is%20what%2099%25%20of%20my%20clients%20are%20using.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular 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.

 

 

 

4 Comments

Perhaps we can also mention Blazor WASM too along with the other frameworks @DariaGrigoriu . We will be using this extension in our OSS project. We blogged about it too.

 

https://tech.hackmum.in/blog/MSBuild-2020/

 

 

 

Occasional Visitor

Nice! Why only github ? What about Azure Devops as source control?

 

Occasional Visitor

Is it possible to have an HTML page that takes a file upload, with the upload saved to the same Storage space for later download by others?

 

Occasional Visitor

Seconding the request to have this integrate with Azure DevOps. I understand that the road map is to eventually move everything to GitHub, but as of now the features for that platform are far behind AzDO which is what 99% of my clients are using.