Welcome to Week 4, Day 7 of #30DaysOfSWA!!

We're at the last post of the series, so let's close the loop to where we started on Day 1. We started by talking about End-to-End Developer Experiences built on Azure Static Web Apps - and continued with a series of posts exploring various Azure service integrations that showcase this vision. Wouldn't it be great if you could have one end-to-end development example that you could use as a starter for your next prototype? Let's end this week with the perfect example. Today we'll look at an end-to-end developer workflow for a full-stack app:

Front-end built with React and Redux Toolkit
Back-end built with Azure Functions
Deployed to the cloud with Azure Static Web Apps
With a MongoDB database hosted in Cosmos DB, accessed using Mongoose
(Optionally, with Playwright testing)

What We'll Cover

Building a Full-Stack App
Why use Mongoose?
Why use Redux Toolkit?
Build: Implement and deploy the React/Mongoose template
Exercise: Add your own features

About the Author

Christopher Harrison is a Cloud Advocate at Microsoft, where he has specialized in teaching Azure, Python, JavaScript and Typescript programming to the next generation of coders. You can find him @GeekTrainer or follow him right here on dev.to!

Christopher Harrison

Building a Full-Stack App with SWA

In the first week of this series, we looked Building Static Web Apps using an existing starter template and learned about options for working with Azure Static Web Apps:

using VS Code - if you prefer an IDE
using Azure CLI - if you prefer the command-line
using Azure Portal - if you prefer a browser-based workflow
using Azure Static Web Apps CLI - if you prefer a unified develop-deploy tool

The default starter templates (for vanillaJS, React, Angular, Blazor, Vue) use a simple front-end application to validate your local development setup, and familiarize you with the automated build/deploy workflow setup by Azure Static Web Apps.

Today we'll look at something different - a mongoose-starter template for building a full-stack application with a React/Redux front-end, a serverless back-end (using Azure Functions) and a NoSQL database (using Azure CosmosDB API for MongoDB) that works seamlessly with the popular mongoose client.

Learn more about creating full-stack apps using this technology stack, in this video:

Why use Mongoose?

When accessing a data store you can either use APIs to interact directly with the backend or use a library which can provide additional functionality. Many developers prefer to use a library as it allows them to focus more on creating their code and logic while offloading some of the work. Mongoose is just such a library.

Mongoose is an Object-Database-Mapper (ODM) which allows you to define the objects you need to store in a NoSQL database. Mongoose can be used with any database which supports MongoDB APIs, which Cosmos DB does. With Mongoose you can create schemas for your data, enforce validation, and streamline the process of interacting with your data.

Why use Redux Toolkit?

Redux is the most popular tool for managing state in a React application. Redux Toolkit helps create projects which use Redux by providing an additional framework for some of the most common tasks when using Redux. Redux Toolkit includes functions to streamline the process of creating reducers and updating and accessing state.

Quickstart: Using the React/Mongoose template

To help jump start your development process, we'll use the mongoose-starter template built on the following libraries and tools:

React
Redux Toolkit
Mongoose
Node-config
SWA CLI

The template is a todo application and contains models for items and lists (which contain the items). It uses GitHub authentication through Azure Static Web Apps. To support local development, a devcontainer.json file is included use a dev container.

Follow this tutorial to build and deploy the full-stack application to Azure Static Web Apps by completing the following steps:

create the Cosmos DB server
create a new repository from the template
create the Azure Static Web App
configure the Azure Static Web App
use the site

Watch this segment to walk interactively through the process of using the mongoose-starter template build/deploy the basic project to Azure Static Web Apps.

And watch this segment to learn how you can setup and configure your Azure CosmosDB resource to work with your Azure Static Web Apps deployment.

Exercise: Add your own features

The template is designed to be used as the starter for your own projects.

To build upon what you've learned, you could explore expanding the functionality by adding your own features. Clone the repository you created and begin writing your own code! This could include:

allowing items to be labeled
implementing archive functionality
potentially incorporating artificial intelligence to detect the sentiment of tasks.

Alternatively, use what you learned to add CosmosDB as a database for an application built using a different front-end framework - try one of the usage examples from Week 2, or enhance something you've already built.

Resources

Here is a collection of resources you may find helpful for digging more into creating applications hosted on Azure Static Web Apps:

SWA Quickstart: Using Azure CLI
Official Tutorial: Intro to React
Creating your first web apps with React - on Microsoft Learn
Web Dev For Beginners - project-based curriculum

#28: Full-Stack SWA: React + Mongoose