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

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.

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

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.

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

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

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.

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

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.

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