Azure Static Web Apps is a great hosting solution for full stack web applications. Static Web Apps supports whatever front-end framework you wish to use (including React, Vue.js, Angular and Svelte), and hosts back-end code on Azure Functions. You can add any services you might like, such as Cognitive Services for AI or Azure Cosmos DB for NoSQL.
This starter kit is designed to help get you up and running with one of the most common scenarios - a Node.js based application using Mongoose. The front-end is built using vanilla JavaScript, allowing you to later incorporate whatever front-end framework you choose. You're also free to continue to build upon this starter, adding AI, modifying the data structure, or whatever else you might like to do!
The sample site is a basic task manager. You have the ability to add tasks to a list, and then check or uncheck them to mark them as completed. It is built with the following technologies:
- Hosting: Azure Static Web Apps
- Database: Azure Cosmos DB (with MongoDB API)
- Server API: JavaScript/Node.js on Azure Functions (hosted in Azure Static Web Apps)
- Data library: Mongoose
We've provided the necessary steps to configure and deploy the site, as well as setup your local environment for development. It's recommended you start from the top and work your way down.
- Getting started and deploying the website
- Configuring and deploying the database
- Exploring the code
- Running the code locally and making updates
- Troubleshooting and resources
Azure Static Web Apps integrates with GitHub via GitHub Actions. As such, we'll need both Azure and GitHub accounts. If you're a student, there are a host of free services available with Azure for Students!
- Sign up for GitHub Student Developer Pack, which grants access to GitHub Pro for free and numerous third party offers
- Sign up for Azure for Students, which includes $100 in free credit you can use over the course of the year, and access to several free services
- If you're not a student, you can still access $200 on Azure (valid for 30 days)