Azure Static Web Apps
Download as PPTX, PDF0 likes25 views
Azure Static Web Apps allow developers to quickly deploy websites and APIs to Azure. It provides a clean way to build, deploy, and host modern web apps and manage associated APIs through an integrated workflow with GitHub. The service handles routing and backend functions can be developed with Azure Functions. Developers can run their applications locally for testing and then deploy to Azure with GitHub integration, enabling continuous integration and delivery when code is pushed to the repository.
Azure Static Web Apps
- 1. Azure Static Web Apps
- 2. What are Azure Static Web Apps? • A slick new way to build, deploy, and host your modern web apps • A clean way to manage your app and its API • A nice ecosystem Let's explore!
- 3. I'm a JavaScript developer What are my options for quickly deploying my web site on Azure? What if the web site also comes with an API? App Services? Azure Functions? Azure Static Web Apps!
- 4. Your architecture: front end Add your files to '/app'
- 5. Your architecture: back end Add your files to '/api
- 6. Build up the front end This will be an app to give an affirmation. Use Visual Studio Code IDE to leverage its extensions for Azure
- 7. Enable routes Static web apps need special handling for their routes, so add a routes.json file for the service to route properly
- 8. Build up the back end Use the structure of Azure Functions within your API folder
- 9. Run your functions locally using the Node debugger from the VS Code terminal Use the structure of Azure Functions within your API folder Run on localhost
- 10. Run the front end on localhost to test your app Open a new terminal and use your app's CLI to run `npm run serve`
- 11. Deploy time! Push to GitHub, then use the Azure Static Web App VS Code extension to create a new static web app on Azure
- 12. Why GitHub? GitHub is where the build process is managed, via GitHub Actions!
- 13. A GitHub Actions file is scaffolded for you GitHub is where the build process is managed, via GitHub Actions! When you push to GitHub, your app + API are rebuilt – CI/CD Try the app: https://aka.ms/my- affirmations
- 14. But wait, there's more! Store tokens!
- 15. But wait, there's more! Authenticate users!
- 16. But wait, there's more! Environment management: scaffold a staging site on push to GitHub
- 17. Bottom line... Azure Static Web Apps are a web developer’s dream come true: easy, free deployments, GitHub integration, and it works great with modern JavaScript stack. Learn more! https://aka.ms/swaframeworks