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

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. By leveraging AWS Amplify for seamless front-end development, AWS AppSync for robust and scalable backend services, and MongoDB Atlas for a flexible and powerful database, developers can build comprehensive, low-code solutions while drastically reducing coding time and maintaining high standards of performance and scalability.

This tutorial 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, the template is optimized for scalability and performance - 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’s “Gen 2” release enhances support for CI/CD workflows, improves the developer experience with the Amplify CLI, and expands capabilities for backend infrastructure as code. These updates make it easier to manage and deploy cloud resources, integrate serverless functions, and connect to MongoDB Atlas data sources through AWS AppSync and Lambda, 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 built-in support for real-time data updates and offline access reduces the complexity of managing data interactions and enhances 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, scaling, and monitoring, ensuring high availability and performance. Atlas also includes Vector Search capabilities optimized for generative AI use cases, enabling efficient search and retrieval of high-dimensional data. This makes it ideal for applications requiring sophisticated data interactions and AI-driven insights.

Application Features

In this walkthrough 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 the out-of-the-box capabilities of AWS Amplify.

Reference Architecture

The application ties together four services:

  • React frontend - the user-facing Todo app, hosted and deployed by AWS Amplify.
  • Amazon Cognito - handles user authentication.
  • AWS AppSync + AWS Lambda - the GraphQL API layer, with Lambda resolvers bridging to the database.
  • MongoDB Atlas - the persistence layer where Todo items are stored.

Prerequisites

To deploy the application you need a MongoDB Atlas cluster and an AWS account.

Deploying to AWS

Step 1 - Fork the repository

Create a fork of the starter repository:

git clone https://github.com/mongodb-partners/amplify_appsync_mongodb_atlas_startup.git

Step 2 - Set up the MongoDB Atlas cluster

Follow the MongoDB documentation to set up the Atlas cluster, database, database user, and network access.

Step 3 - Obtain a connection URL

Retrieve the connection string for your cluster from the Atlas UI. You will use it later as an environment variable so AppSync/Lambda can reach the database.

Step 4 - Deploy the Todo application in AWS Amplify

  1. Open the AWS Amplify console and select the GitHub option.
  2. Authenticate to GitHub and select the repository you created earlier by forking.
  3. Set all other options to their defaults and deploy.
  4. Configure the environment variables (including the MongoDB Atlas connection URL). Note that deployments will not succeed until the environment variables are set.

Step 5 - Test the deployed application

Exercise the deployed Todo app, then verify that objects are being stored in the MongoDB Atlas collection through the Atlas UI.

Conclusion

This walkthrough showed how to deploy a fullstack application using MongoDB Atlas and AWS Amplify, with AWS AppSync and Lambda bridging the GraphQL API to the database. If you have ideas on how to enhance the application, submit a pull request to the starter repository. Try out Amplify and MongoDB Atlas.

This post was originally published on MongoDB Developer Center as “Fullstack Application Development with AWS Amplify, AppSync, and MongoDB Atlas” by Anuj Panchal, Igor Alekseev, and Dan Kiuna (Nov 27, 2024). View the archived version.

Nadetastic
RSS