Build a shopping app with Azure Static Web Apps

If you're looking for tips and best practices on how to create and deploy fully featured web apps with Azure Static Web Apps, we created a series of short practical videos to help you with various use cases. You can look at the announcement here and watch all videos here: Azure Tips and Tricks: Static Web Apps.

After you've deployed the first version of your web app and set up your CI/CD workflow, you'll probably want to fine tune your app configuration and start implementing more advanced features, such as authentication and authorization.

We'll cover in this post some common features you may want in your web apps, by building a shopping web app. The base sample code we'll use is implemented with React, Angular, Vue.js and Svelte so you can pick your favorite framework to follow along.

To help you with all these featuress, I'll be joined by my friends Ayşegül Yönet, Simona Cotin and Burke Holland.

What you'll learn here

Configure routing, SPA fallback and redirections
Add a serverless API
Integrate user authentication
Configure authorization and roles
Set up custom domains

Additional learning resources

Configure routing

If you're building a Single Page Application, chances are you'll be using HTML5 routing meaning your app will break if you do not configure a server-side fallback to you base index.html file. We'll have a look on how to configure this among other common routing tasks.

Add a serverless API

After your web front-end is properly set up, you may want to do some back-end processing to retrieve and store data in a database for example. Serverless functions are perfect for that, and allows to create an API by only focusing on what you're trying to achieve without having to create and manage an actual server.

Integrate user authentication

Managing and verifying users' unique identity is an important piece of most web apps nowadays, especially if you're looking to provide a secure personal space for your users. We'll see how to leverage built-in authentication providers to quickly integrate authentication in your static web app.

Configure authorization and roles

After implementing authentication, the logical next step is often to secure the access to various parts of your app, including the API. You can do that with configuring user roles and authorization levels for your routes, to prevent unwanted access and secure your app resources.

Set up custom domains

If you've deployed a Static Web App before, you've probably noticed that the generated public URL isn't something you'll likely remember and want to share publicly. We'll see how to set up a custom domain for your static web app, along with generating a free HTTPS certificate.

What's next

That's it for this post! If you would like to deepen your knowledge around Static Web Apps, you can take a look at the docs overview to find out all the things you can do with Static Web Apps.

Please share any questions or experiences you've had on these topics in the comments. Thanks for reading!

Follow me on Twitter, I'll be happy to discuss and take your suggestions.