Giter Club home page Giter Club logo

serverless-appsync-chat-app's Introduction

Serverless AppSync Realtime Chat

Setting up

Prerequisites
  • 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
Installation
  1. Clone repo
  2. Install backend dependencies
npm install 
# or 
yarn
  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 https://console.aws.amazon.com/appsync/home?region=us-east-1.

  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:

front
├── .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!

serverless-appsync-chat-app's People

Contributors

chief-wizard avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.