Skip to main content

3 posts tagged with "react"

View All Tags

· 5 min read
Christopher Harrison

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:

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

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:

  1. using VS Code - if you prefer an IDE
  2. using Azure CLI - if you prefer the command-line
  3. using Azure Portal - if you prefer a browser-based workflow
  4. 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:

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:

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: