Skip to content
A chat app with AWS AppSync and Serverless
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Serverless AppSync Realtime Chat

Setting up

  • Node.js 8
  • Yarn
  • Amplify-CLI npm install -g @aws-amplify/cli
  • Serverless Framework npm install -g serverless
  • AWS credentials setup
    • Fast option: credentials have Administrator access (not recommended).
    • Slower option: add the following permissions to your account:
      • IAM
      • S3
      • CloudWatch
      • DynamoDB
      • CloudFormation - Read/Write (custom policy)
      • AppSync - Administrator
      • Cognito - Power User
  1. Clone repo
  2. Install backend dependencies
npm install 
# or 
  1. Deploy serverless stack
serverless deploy

This command will create DynamoDB table with messages, Cognito User and Identity Pool and AppSync project.

After completing, this will create stack.json file inside front/src/ directory which will be later used for frontend part.

  1. Go to frontend part and install dependencies
cd front && yarn
  1. Now we need to generate API client for the frontend basing on GraphQL schema from AppSync service. First, we need to initialize Amplify in frontend directory.
amplify init

Note: Make sure to select Javascript as your language and React as framework.

  1. And then associate to our AppSync API.
amplify add codegen --apiId <API_ID_HERE>

You can retrieve API_ID from

  1. Finally, generate GraphQL documents (queries, mutations, and subscriptions) and generate types for your JavaScript, TypeScript, or Flow application. If you modify the generated documents or your API's schema, you can regenerate the client code anytime with:
amplify codegen

This should create following files inside your front directory:

├── .amplifyrc
├── .graphqlconfig.yml
├── src
    ├── API.ts
    └── graphql
        ├── mutations.js
        ├── queries.js
        ├── schema.json
        └── subscriptions.js
  1. Now you can start your project by running npm start or yarn start or npm run front if you are currently in root directory.

  2. Head to http://localhost:3000, create your account, confirm, login and chat!

You can’t perform that action at this time.