Download to read offline
![How to develop locally? 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 Azure Static Web Apps CLI • Web server with the configuration file support • Emulating authentication and authorization • Serving or proxying to API requests](https://image.slidesharecdn.com/azureforfrontenders-211011080554/75/Azure-cloud-for-the-web-frontend-developers-10-2048.jpg)
Uploaded byMaxim Salnikov
Azure cloud for the web frontend developers
Maxim Salnikov discusses how Azure empowers frontend developers by providing tools and features such as fast, reliable hosting, serverless APIs, and automated deployments. He outlines the process of deploying applications using Azure Static Web Apps and offers resources for further learning. The document is aimed at encouraging developers to utilize Azure for building innovative web solutions.
Azure cloud for the web frontend developers
- 1. Azure cloud forthe web frontend developers Maxim Salnikov @webmaxru
- 2. How Azure empowersevery frontend developer and team on the planet to achieve more
- 3. I’m Maxim Salnikov •Build on web platform since 90s • Organize developer communities and technical conferences • Speak, train, blog, and… Developer Engagement Lead at Microsoft @webmaxru
- 4. …produce and mixsome 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
- 5. What’s next? Share itwith the global community Add some extra features Still focus on the frontend development
- 6. What do frontenddevelopers 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 • Serverless API • Provider-based authentication • Role-based access control • Tools for the local development Generous free tier
- 7. Azure Static WebApps
- 8. How to start? 1.Point to the code repository 2. Confirm configuration 3. Three, two, one… 4. App is online VS Code Extension Azure Portal - or -
- 9. How to deploya new version? 1. Code and push to the repo >npm run build
- 10. How to developlocally? 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 Azure Static Web Apps CLI • Web server with the configuration file support • Emulating authentication and authorization • Serving or proxying to API requests
- 11.
- 12. How to continuelearning? 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
- 13. Thank you! Let’s stayconnected Maxim.Salnikov@microsoft.com Twitter: https://twitter.com/webmaxru LinkedIn: https://www.linkedin.com/in/webmax/
Editor's Notes
- #2 It’s impossible to reason about modern web application without mentioning its front-end part – extensive, feature-rich, performant, sometimes with quite sophisticated structure and build process, but after all not requiring server-side code to construct it in the runtime, i.e. static. In the Azure cloud, we now have a special service for this kind of apps (including both classic SPAs and statically generated ones), empowering developers to focus on the business logic rather than the infrastructure that builds and hosts them. In my technical session & demo, let's go through the full development flow: we scaffold a web front-end app, push it to the GitHub, set up Azure Static Web App service, enjoy the fully automatic build, and deploy to global high-availability hosting - all in a few minutes! This session will be useful for the frontend web developers who want to know more about how cloud can power up their projects and workflows. Join this session to learn about how to build, deploy, host your frontend web application on Azure cloud, and how to extend it with the authentication and API functionality.
- #9 Connect your code repository Answer a few questions about app folder structure Three, two, one… See your app hosted on a random-name.azurestaticapps.net
- #10 Connect your code repository Answer a few questions about app folder structure Three, two, one… See your app hosted on a random-name.azurestaticapps.net
- #11 Connect your code repository Answer a few questions about app folder structure Three, two, one… See your app hosted on a random-name.azurestaticapps.net
- #13 Connect your code repository Answer a few questions about app folder structure Three, two, one… See your app hosted on a random-name.azurestaticapps.net