Static Web Apps - Mongoose starter

This template is designed to be a starter for creating React apps using Azure Static Web Apps, with Azure Cosmos DB API for Mongo DB as a database and a Mongoose client. It's built with the following:

• Azure resources
  • Azure Static Web Apps
  • Azure Cosmos DB API for Mongo DB
• Application libraries
  • React and Redux Toolkit
  • Mongoose
  • Azure Functions
• Development libraries
  • Azure Static Web Apps CLI

Azure deployment

Please refer to the documentation for information on creating the appropriate server resources and deploying the project.

Important

Two environmental variables are required for the project:

• AZURE_COSMOS_CONNECTION_STRING: The connection string to the database server
• AZURE_COSMOS_DATABASE_NAME: The name of the database

These can be stored in application settings in Azure Static Web Apps. When developing locally, the project will default to using MongoDB running on localhost.

Local development

You can run the project locally using containers by following the local setup instructions.

Project structure

This starter project is designed to be a template for React with Redux and hosted on Azure Static Web Apps. It uses the Redux Toolkit. The project is a Todo application using authentication for Azure Static Web Apps. Todo items are collected in lists, and are scoped to individual users. To use the application:

1. Login using GitHub by clicking the login link.
2. Create a list.
3. Create todo items for the list.

package.json scripts

• dev: Starts the SWA CLI, Azure Functions and the React app. The application will be available on http://localhost:4280

src/app

Contains store.js, which manages global state for the application.

src/features

Contains three "features", one each for items, lists and user. lists and items contain a slice to manage their respective state and a React component.

api

Root folder for Azure Functions. All new serverless functions are added to this directory.

api/config

Contains the configuration for the database. Two environmental variables are required for the project:

• AZURE_COSMOS_CONNECTION_STRING: The connection string to the database server
• AZURE_COSMOS_DATABASE_NAME: The name of the database

These can be stored in application settings in Azure Static Web Apps. When developing locally, the project will default to using MongoDB running on localhost. You can change the default values by updating default.json.

api/models

Contains the two Mongoose models, TodoItemModel and TodoListModel. It also contains store.js, which exposes helper functions for CRUD operations.