Create a Scalable Real-Time Chatting App in AWS: Step-by-Step with AppSync, React, and CDK

Introduction

Are you ready to build a scalable, real-time chatting application that can handle thousands of users seamlessly? Using AWS services like AppSync, DynamoDB, and AWS CDK, combined with the flexibility of React, you’ll create a full-fledged chat application that’s both powerful and efficient. In this guide, we’ll explore the “why” behind each choice of technology, guiding you through every step—from setting up the infrastructure to deploying the final app.

Let’s jump right in!

1. Prerequisites

Before we start building, let’s ensure you have everything you need:

Knowledge & Tools:

Basic Understanding of AWS Services: Familiarity with AWS’s serverless ecosystem, including Lambda, DynamoDB, and API Gateway.
JavaScript/TypeScript: Competence in JS/TS will be beneficial as we’ll use it extensively in both the backend (CDK) and frontend (React).
React: A solid understanding of React components, state, and hooks.
GraphQL Basics: Knowledge of GraphQL is helpful, though we’ll cover specific aspects related to AppSync.

Required Tools:

Node.js and npm/yarn: Install Node.js (v14 or later is recommended) for dependency management and running the React application.
AWS CLI: The AWS Command Line Interface (CLI) is essential for interacting with AWS from your terminal.
AWS CDK: AWS Cloud Development Kit (CDK) allows you to define your cloud infrastructure using familiar programming languages.

  npm install -g aws-cdk

AWS Account: You’ll need an AWS account to create and manage cloud resources.
Code Editor: Choose an editor like VS Code or WebStorm for writing code.

2. Setting Up the Environment

Why AWS CDK?

AWS CDK is a powerful tool that enables developers to define cloud infrastructure in code. By using CDK, you gain several benefits:

Infrastructure as Code: Manage and version your infrastructure with code.
Flexibility: Utilize the full power of TypeScript to programmatically define infrastructure.
Reusability: Share and reuse CDK constructs, reducing duplication and improving maintainability.

Step-by-Step Setup

1. Create a New CDK Project

We’ll start by initializing a new AWS CDK project. This will scaffold out a basic structure with a few default files to get us started.

mkdir ChatApp && cd ChatApp
cdk init app --language=typescript

2. Install Necessary CDK Modules

Our chat application will require several AWS services. Let’s install the AWS CDK modules for AppSync, DynamoDB, and IAM:

npm install @aws-cdk/aws-appsync @aws-cdk/aws-dynamodb @aws-cdk/aws-iam

3. Bootstrap the Environment

Before deploying any CDK stack, you need to bootstrap the environment. This step creates the necessary resources that CDK needs to operate:

cdk bootstrap

4. Setup React App

Simultaneously, set up your React frontend to communicate with the backend:

npx create-react-app chat-app --template typescript
cd chat-app
npm install aws-amplify aws-amplify-react
npm start

Why React?
React offers a component-based architecture that’s ideal for building dynamic, real-time interfaces like chat applications. Coupled with AWS Amplify, it’s easy to integrate AWS services and manage app state.

3. Building the Infrastructure with AWS CDK

Why DynamoDB for Message Storage?

DynamoDB is a fully managed NoSQL database service that’s ideal for storing and retrieving large volumes of data quickly. For a chat application, DynamoDB’s fast performance and scalability make it a great choice for handling chat messages.

1. Define DynamoDB Table

In the lib/chat-app-stack.ts file, create a DynamoDB table for storing chat messages. The table will use a partition key (id) and a sort key (createdAt) to efficiently store and retrieve messages.

import * as dynamodb from '@aws-cdk/aws-dynamodb';

const messagesTable = new dynamodb.Table(this, 'MessagesTable', {
  partitionKey: { name: 'id', type: dynamodb.AttributeType.STRING },
  sortKey: { name: 'createdAt', type: dynamodb.AttributeType.STRING },
  billingMode: dynamodb.BillingMode.PAY_PER_REQUEST,
  removalPolicy: cdk.RemovalPolicy.DESTROY, // NOT recommended for production
});

Why AppSync for Real-Time Communication?

AWS AppSync is a managed GraphQL service that simplifies the process of building and deploying APIs that require real-time data synchronization, such as chat applications. AppSync handles the heavy lifting of scaling, security, and performance, allowing developers to focus on building the app logic.

2. Create the AppSync API

Set up the AppSync GraphQL API in your CDK stack:

import * as appsync from '@aws-cdk/aws-appsync';

const api = new appsync.GraphqlApi(this, 'ChatApi', {
  name: 'ChatApi',
  schema: appsync.Schema.fromAsset('graphql/schema.graphql'),
  authorizationConfig: {
    defaultAuthorization: {
      authorizationType: appsync.AuthorizationType.API_KEY,
    },
  },
});

3. Add a Data Source for DynamoDB

Link your AppSync API to the DynamoDB table. This allows AppSync to interact with the table and perform queries and mutations:

const dataSource = api.addDynamoDbDataSource('MessagesDataSource', messagesTable);

Why GraphQL Schema?

GraphQL provides a flexible query language that allows the client to specify exactly what data it needs, reducing over-fetching or under-fetching data. This is particularly beneficial for chat applications where the data requirements may vary based on user interactions.

4. Create GraphQL Schema

In the root of your CDK project, create a graphql directory with a schema.graphql file. This schema defines the data types and operations (queries and mutations) available in your chat app:

type Message {
  id: ID!
  content: String!
  sender: String!
  createdAt: String!
}

type Query {
  getMessages: [Message]
}

type Mutation {
  sendMessage(content: String!, sender: String!): Message
}

schema {
  query: Query
  mutation: Mutation
}

Implementing Resolvers

Resolvers in AppSync are responsible for mapping the queries and mutations in your GraphQL schema to data operations on your backend (e.g., reading from or writing to DynamoDB).

5. Query Resolver

Set up a resolver to handle fetching all messages from DynamoDB:

dataSource.createResolver({
  typeName: 'Query',
  fieldName: 'getMessages',
  requestMappingTemplate: appsync.MappingTemplate.dynamoDbScanTable(),
  responseMappingTemplate: appsync.MappingTemplate.dynamoDbResultList(),
});

6. Mutation Resolver

Similarly, set up a resolver to handle sending messages:

dataSource.createResolver({
  typeName: 'Mutation',
  fieldName: 'sendMessage',
  requestMappingTemplate: appsync.MappingTemplate.fromString(`
    {
      "version": "2017-02-28",
      "operation": "PutItem",
      "key": {
        "id": $util.dynamodb.toDynamoDBJson($util.autoId())
      },
      "attributeValues": {
        "content": $util.dynamodb.toDynamoDBJson($ctx.args.content),
        "sender": $util.dynamodb.toDynamoDBJson($ctx.args.sender),
        "createdAt": $util.dynamodb.toDynamoDBJson($util.time.nowISO8601())
      }
    }
  `),
  responseMappingTemplate: appsync.MappingTemplate.dynamoDbResultItem(),
});

Deploy the CDK Stack

Deploy the infrastructure you’ve defined in CDK:

cdk deploy

Once deployed, take note of the AppSync API endpoint and the API key. These will be essential for configuring your React frontend.

4. Building the Frontend with React

Why AWS Amplify?

AWS Amplify simplifies the process of connecting your frontend application to AWS services. It provides tools and libraries to seamlessly interact with AWS resources like AppSync and Cognito.

1. Configure Amplify in React

In src/index.tsx, configure AWS Amplify with your AppSync API endpoint and API key:

import Amplify from 'aws-amplify';
import config from './aws-exports'; // auto-generated by amplify cli

Amplify.configure({
  aws_appsync_graphqlEndpoint: '<AppSync GraphQL Endpoint>',
  aws_appsync_region: 'us-east-1', //

 replace with your region
  aws_appsync_authenticationType: 'API_KEY',
  aws_appsync_apiKey: '<Your AppSync API Key>',
});

2. Building the Chat Component

Create a Chat component to handle user interactions, such as sending and receiving messages.

import React, { useEffect, useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { listMessages, sendMessage } from './graphql/queries';

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [content, setContent] = useState('');

  useEffect(() => {
    fetchMessages();
  }, []);

  const fetchMessages = async () => {
    const result = await API.graphql(graphqlOperation(listMessages));
    setMessages(result.data.listMessages.items);
  };

  const handleSendMessage = async () => {
    if (!content) return;
    await API.graphql(graphqlOperation(sendMessage, { content, sender: 'User1' }));
    setContent('');
    fetchMessages();
  };

  return (
    <div>
      <div>
        {messages.map((msg) => (
          <div key={msg.id}>
            <strong>{msg.sender}</strong>: {msg.content} <em>({msg.createdAt})</em>
          </div>
        ))}
      </div>
      <input
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Type a message"
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
};

export default Chat;

Why Build This Way?
By leveraging AWS Amplify and AppSync, your React frontend communicates with the backend in real-time, ensuring users see new messages as soon as they’re sent.

3. Integrate Chat Component into App

Finally, include the Chat component in App.tsx:

import React from 'react';
import Chat from './Chat';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Chat App</h1>
      </header>
      <Chat />
    </div>
  );
}

export default App;

5. Deploying the Application

Now that our application is fully built, let’s deploy it.

Build and Deploy React App

1. Build the React App

npm run build

2. Deploy to AWS (Optional)

If you want to host your React app on AWS, you can use AWS S3 and CloudFront for fast and secure hosting:

aws s3 cp build/ s3://your-bucket-name --recursive

3. AWS Amplify Hosting

For a simpler deployment process, consider using AWS Amplify Hosting, which provides CI/CD capabilities and integrates directly with your AWS environment.

6. Wrapping Up

Congratulations! You’ve successfully built and deployed a scalable real-time chatting application using AWS AppSync, React, and AWS CDK. By leveraging the power of AWS’s managed services, you’ve ensured that your application is both scalable and resilient.

Feel free to enhance the app further—perhaps by adding user authentication with AWS Cognito, enabling chat rooms, or even incorporating file sharing features. The foundation you’ve built here is robust and flexible, giving you plenty of room to innovate.

FAQs

1. Why did we choose DynamoDB for message storage?

DynamoDB provides low-latency and high-throughput, making it ideal for storing and retrieving real-time chat messages.

2. Can I secure the AppSync API using other methods?

Yes, you can use AWS Cognito for user authentication or IAM roles for fine-grained access control.

3. How do I scale this application?

AWS services like AppSync and DynamoDB are designed to scale automatically. As your user base grows, these services will handle increased load without significant changes to your infrastructure.