Azure Static Web Apps is a serverless web app hosting service offering streamlined full-stack development, with many built-in features designed to make your life easier. Because it's always hard to get started with any new technology, we created a series of practical, short videos with all the tips and tricks you need to get your apps up and running in a blink.

We choose to cover all the basics you need to get started, and then focus on specific use-cases that may be useful in most situations. With these videos, you'll get all the essential knowledge to move your project forward with Azure Static Web Apps!

The full video series is available for free here:
Azure Tips and Tricks: Static Web Apps

This series is made of 16 videos, organized in 4 modules each with a different focus. You can either follow all of them as a full course or pick some as you need to complete your skill set.

Azure Static Web Apps essentials

If you've never heard of Static Web Apps or if you're just being curious, this is the place to start. You'll discover the basics about it, install all the tools to work efficiently and see how fast you can get your website online. Then you'll set up a full CI/CD pipeline and see how to use pre-production environments, and finally create your own personal blog with Gatsby.

Videos:

1. What is Azure Static Web Apps and what can it be used for
2. What tools do you need to work with Azure Static Web Apps
3. How to deploy your first Azure Static Web Apps
4. How CI/CD and preview branches work with Azure Static Web Apps
5. How to create your personal blog with Gatsby and Azure Static Web Apps

Building a shopping app

Now that you're ready to code, we'll cover the use case of building a shopping app progressively, configuring the routing, adding an API and securing your app with built-in authentication and authorization. And because as web developers we love to have nice looking URLs, we'll also see how to configure your custom domain step by step.

Videos:

6. How to configure routing in Azure Static Web Apps
7. How to add an API to your Azure Static Web App
8. How to integrate authentication in Azure Static Web Apps
9. How to configure authorization in Azure Static Web Apps
10. How to set up a custom domain name in Azure Static Web Apps

Using C# and Blazor to create full-stack web apps

With Blazor and Web Assembly you can use C# all the way to create full-stack web apps. This especially great if your're well versed in C#, and want to use your skills to create a comple serverless web app and API entirely written in C# with .Net. You'll start your journey here from the beginning, and see all the important aspects you need to care for while creating your Blazor app.

Videos:

11. How to create a full-stack web app in C# with Blazor and Azure Static Web Apps
12. How to add a C# API to your Blazor web app
13. How to secure your C# API with Azure Static Web Apps

Using Cosmos DB with MongoDB API and Mongoose with your Static Web Apps

Almost every web project will require client and server-side code, and ultimately, a database. With Static Web Apps you've seen how to create and deploy websites, and we'll expand on that using tools you're already familiar with, including MongoDB and Mongoose for managing data. You'll save time learning how to create a complete app with a database from this starter kit, going through every steps you need to deploy your project and database.

Videos:

14. Create full-stack JavaScript serverless apps with Azure Static Web Apps, Functions, Cosmos DB and Mongoose
15. How to create your full-stack Azure Static Web Apps from a GitHub template
16. How to setup Cosmos DB with a MongoDB API to use with Azure Static Web Apps

Bonus

SQL Database are everywhere and are still the go-to solution for most data workflows. With this bonus video, you'll learn how to setup an Azure SQL Database and use it in your website deployed on Static Web Apps.

17. Setup Azure SQL Database to use with Azure Static Web Apps

Want more?

Videos are great for visual learning, but having additional forms of content is always helpful.

To complete the videos, we also have a full interactive Learn path on Static Web Apps with multiple in-depth tutorials. You'll also find lots of GitHub sample repos linked in the video descriptions.

Tell us your feedback!

Of course, we can't cover every single thing there is to know about Static Web Apps in these videos. But we want to give you all the essential knowledge you need to get started on your project.

And more importantly, we're also here on dev.to to listen and help as much as we can! 🙂

Please tell us your experience, your difficulties and questions, and how we may improve this series in the comments.

On behalf of the whole team, THANK YOU for taking this journey with us! 🙏