MongoDB

Anuj Panchal

Partner Solutions Architect

Igor Alekseev

Partner Solutions Architect, Data & Analytics

Partner

Dan Kiuna

Specialist Solutions Architect at AWS

In today’s fast-paced digital landscape, turning innovative ideas into fully functional applications quickly and efficiently is essential for developers, startups, and business consultants. This repository is designed to empower you to do just that. By leveraging [AWS Amplify](https://aws.amazon.com/amplify) for seamless front-end development, [AWS AppSync](https://aws.amazon.com/pm/appsync/) for robust and scalable backend services, and [MongoDB Atlas](https://www.mongodb.com/products/platform/atlas-database) for a flexible and powerful database solutions, developers can build  comprehensive, low-code solutions while drastically reducing coding time and maintaining high standards of performance and scalability.

This tutorial and repository provides a starter template for building applications with React and AWS Amplify, seamlessly connecting to MongoDB Atlas. It simplifies the setup for authentication, API integration, and database capabilities. With a foundational React application pre-integrated with AWS Amplify, this template is optimized for scalability and performance, making it perfect for developers, startups, and business consultants seeking to jumpstart their projects with pre-configured AWS services like Cognito, AppSync, and MongoDB Atlas


# AWS Amplify

AWS Amplify simplifies the creation of full-stack applications with minimal configuration. It provides a set of tools and services that integrate seamlessly with popular frameworks like React, Angular, and Vue, enabling developers to easily set up scalable backends, manage authentication, and deploy applications with a few simple commands. Amplify recently launched "Amplify Gen 2" which enhances support for CI/CD workflows, improves the developer experience with the Amplify CLI, and expands capabilities for backend infrastructure as code. These updates facilitate easier management and deployment of cloud resources, integration of serverless functions, and connection to MongoDB Atlas data sources through AWS AppSync and Lambda, thus significantly reducing the time and effort required to build and scale modern applications


# AWS AppSync

AWS AppSync is a fully managed service that simplifies the development of GraphQL APIs by automatically handling data fetching, real-time updates, and offline synchronization. It seamlessly integrates with various data sources, including MongoDB Atlas, allowing developers to build scalable and flexible applications with ease. AppSync’s features include built-in support for real-time data updates and offline access, reducing the complexity of managing data interactions and enhancing application performance


# MongoDB Atlas

MongoDB Atlas is a fully managed cloud database service known for its operational excellence and scalability. It offers advanced features like [automated backups](https://www.mongodb.com/docs/atlas/backup-restore-cluster/), [scaling](https://www.mongodb.com/docs/atlas/cluster-autoscaling/), and [monitoring](https://www.mongodb.com/docs/atlas/monitoring-alerts/), ensuring high availability and performance. Notably, Atlas includes [Vector Search](https://www.mongodb.com/products/platform/atlas-vector-search) capabilities, which are optimized for Generative AI use cases, enabling efficient search and retrieval of high-dimensional data. This feature enhances the ability to perform complex queries and data analysis, making it ideal for applications requiring sophisticated data interactions and AI-driven insights


# Application Features

In this blog we implement a Todo Application that supports authentication by leveraging Amazon Cognito.  The application frontend is written in React, while the backend is a GraphQL API powered by AWS AppSync and AWS Lambda.  The persistence layer is provided by MongoDB Atlas.  For the application’s CI/CD and hosting we rely on out-of-the-box capabilities for AWS Amplify. 


# Reference Architecture

![Reference Architecture][1]

# Prerequisites

In order to deploy the application you need to have [MongoDB Atlas Cluster](https://www.mongodb.com/docs/atlas/reference/amazon-aws/) created and an AWS Account.


# Deploying to AWS


## Step 1 

Create a fork of this repository: `https://github.com/mongodb-partners/amplify_appsync_mongodb_atlas_startup.git`


## Step 2

Set up the MongoDB Atlas cluster.  Follow the [link](https://www.mongodb.com/docs/atlas/tutorial/create-atlas-account/) to the setup the [MongoDB Atlas cluster](https://www.mongodb.com/docs/atlas/tutorial/deploy-free-tier-cluster/), Database, [User](https://www.mongodb.com/docs/atlas/security-add-mongodb-users/) and [Network access](https://www.mongodb.com/docs/atlas/security/add-ip-address-to-list/).


## Step 3

Obtain a connection URL

![Obtain Connection URL][2]

## Step 4

Deploy the To-do Application in AWS Amplify.  Open the AWS Amplify console and select the Github option

![Deploy to Amplify][3]

Authenticate to GitHub and select the repository you created earlier by forking.

![Authenticate to Github][4]

Set all other options to default and deploy

![Set options and deploy][5]

Configure the Environment Variables.  Note the deployments will not succeed until the environment variables are set.

![Configure Environment Variables][6]

## Step 5

Test the deployed application

![Test Deployed App][7]

Verify objects are being stored in the MongoDB Atlas Collection

![Verify Objects in Atlas][8]

# Conclusion

In this tutorial we showed how to deploy an application using MongoDB Atlas and AWS Amplify.  If you have ideas on how to enhance the application, please submit a pull request for this [repository](https://github.com/mongodb-partners/amplify_appsync_mongodb_atlas_startup.git).  Try out [Amplify](https://aws.amazon.com/amplify) and [MongoDB Atlas](https://www.mongodb.com/products/platform/atlas-cloud-providers/aws). 


  [1]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blta049d55e02416f45/67476b746cdeea5d78739042/1_image.png
  [2]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blta216e9c18d842ecd/67476b7590460d1dc6eec0c1/2_image.png
  [3]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt96b97ad3d3a74d5b/67476b75de20c047b3d2e24d/3_image.png
  [4]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt84a5be280ad41dc8/67476b74e19373eaeca5c960/4_image7.png
  [5]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt0ad8b3e59f91dcd2/67476b743aff4e4673d5ffaf/5_image.png
  [6]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt13b8f42aef4040fc/67476b744dc5f075b29ba75e/6_image.png
  [7]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt47ec9c14b9922001/67476b749a83052898868d03/7_image.png
  [8]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blta3205cb067033e6e/67476b7546524214bfd349fa/8_image.png

This article and repository provides a starter template for building applications with React and AWS Amplify, seamlessly connecting to MongoDB Atlas. It simplifies the setup for authentication, API integration, and database capabilities.

Fullstack Application Development with AWS Amplify, AppSync, and MongoDB Atlas

dkkiuna_720.jpg

Dan Kiuna

Content by Dan Kiuna

Fullstack Application Development with AWS Amplify, AppSync, and MongoDB Atlas