page_type	languages	products	description	urlFragment
sample	nodejs javascript tsql sql json	azure vs-code azure-sql-database azure-functions azure-app-service	TodoMVC Sample app Full Stack implementation using Azure Static WebApps, Azure Functions, Node, Vue.Js and Azure SQL (full JSON support)	azure-sql-db-todo-mvc

TodoMVC Sample App Full Stack Implementation

Serverless Full Stack implementation on Azure of ToDoMVC app.

Azure Static WebApps, Azure Functions, Node and Azure SQL

The implementation uses

• Azure Static WebApp: to bind everything together in one easy package, natively integrated with GitHub CI/CD pipeline
• Vue.Js as front-end client
• Azure Function for providing serverless back-end infrastructure
• NodeJS for the back-end logic
• Azure SQL as database to store ToDo data
• GitHub Actions to Deploy the full-stack website (thanks to Azure Static WebApps)

Implementation Details

Folder structure is the following:

• /api: the NodeJs Azure Function code used to provide the backend API, called by the Vue.Js client
• /client: the Vue.Js client. Original source code has been taken from official Vue.js sample and adapted to call a REST client instead of using local storage in order to save and retrieve todos
• /database: the T-SQL script needed to setup the object in the Azure SQL database. Take a look at the Stored Procedure to see how you can handle JSON right on Azure SQL

More details are available in this blog post: TodoMVC Full Stack with Azure Static Web Apps, Node and Azure SQL

Setup Database

Execute the /database/create.sql script on a database of your choice. Could be a local SQL Server or an Azure SQL running in the cloud. Just make sure the desired database is reachable by your local machine (eg: firewall, authentication and so on), then use SQL Server Management Studio or Azure Data Studio to run the script.

Of course if you want to deploy the solution on Azure, use Azure SQL.

If you need any help in executing the SQL script on Azure SQL, you can find a Quickstart here: Use Azure Data Studio to connect and query Azure SQL database.

If you need to create an Azure SQL database from scratch, an Azure SQL S0 database would be more than fine to run the tests.

az sql db create -g <resource-group> -s <server-name> -n resiliency_test --service-objective S0

Remember that if you don't have Linux environment where you can run AZ CLI you can always use the Cloud Shell. If you prefer to do everything via the portal, here's a tutorial: Create an Azure SQL Database single database.

If you are completely new to Azure SQL, no worries! Here's a full playlist that will help you: Azure SQL for beginners.

Running local

Now use the /api/.env.template file to create an .env file and add the correct information needed to access your SQL Server or Azure SQL.

Details on how to run Azure Static WebApps locally can be found here:

Set up local development for Azure Static Web Apps

Long story short:

• Install the Azure Static Web Apps CLI: npm install -g @azure/static-web-apps-cli
• From the root folder run: swa start --api ./api

Easy, right?

Running on Azure

This is the amazing part of using Azure Static Web Apps. Deploying to Azure is completely automated via GitHub actions. There are some manual steps because the Static Web Apps CLI is still in Preview at the moment of writing and because Prisma and the Azure Static Web App GitHub Action need some help the get along.

1. Fork this repository
2. Get a GitHub Token
3. Run ./azure-deploy.sh. Please note that if this is the first time you run it, it will create an .env file in the root folder. Fill the .env file. Run the ./azure-deploy.sh again.
4. Once the deployment is done go to the Azure portal, and open the Azure Static Web App resource just created.
5. Open the "Configuration" pane and add a new environment variable named DATABASE_URL and assign the value of the database connection string mentioned before in the local development section.
6. Done! Well, not really, read next.

Azure Static Web App Free Tier

Azure Static Web App support a Free tier...which is absolutely great so that you can try them for free, but of course don't expect great performances. REST API response will be in the 500 msec area. Keep this in mind if you are planning to use them for something different than testing. If you need better performance right now and cannot when for when Azure Static Web App will be out of preview, you can always deploy the REST API using plain Azure Functions where you can have amazing scalability and performance.