Azure cloud for the web frontend developers Maxim Salnikov @webmaxru
A presentation at DevNet Create in October 2021 in by Maxim Salnikov
Azure cloud for the web frontend developers Maxim Salnikov @webmaxru
How Azure empowers every frontend developer and team on the planet to achieve more
I’m Maxim Salnikov Developer Engagement Lead at Microsoft Build on web platform since 90s • Organize developer communities and technical conferences • Speak, train, blog, and… • @webmaxru
…produce and mix some beats Built a tool for the real-time BPM count • Works in any browser on any platform • No backend, just a static web app • PWA: installable, offline-ready • http://localhost:3000
What’s next? Share it with the global community Add some extra features Still focus on the frontend development
What do frontend developers want from the cloud Hosting • • • • • Fast & reliable Geo-distributed SPA-, SSR-ready Custom domains Free SSL certificate Deployment • • • Fully automated Staging environments No DevOps skills needed Feature helpers • • • • Generous free tier Serverless API Provider-based authentication Role-based access control Tools for the local development
Azure Static Web Apps
How to start? VS Code Extension Azure Portal
How to deploy a new version? 1. Code and push to the repo
npm run build
How to develop locally? Azure Static Web Apps CLI • • • Web server with the configuration file support Emulating authentication and authorization Serving or proxying to API requests npm install -g @azure/static-web-apps-cli swa start [app dist folder or url] \ —run “[command to start dev server]” \ —api [functions folder or url] Start full dev environment for React swa start http://localhost:3000 —run “npm start” —api ./api
Demo time!
How to continue learning? aka.ms/swa-learning Step-by-step learning paths on deploying and configuring your apps in Azure Static Web Apps aka.ms/swa-docs Detailed documentation, how-to guides aka.ms/swa-demo Real-world React application example with the API, routes, authentication
Thank you! Let’s stay connected Maxim.Salnikov@microsoft.com Twitter: LinkedIn: https://twitter.com/webmaxru https://www.linkedin.com/in/webmax/
