aws-appsync-chat-starter-react | GraphQL starter progressive web application | AWS library

Note: This solution uses Amazon Lex. The service is only supported in us-east-1, us-west-2 and eu-west-1. We recommending launching this entire solution in one of these regions.
First, clone this repository and navigate to the created folder: git clone https://github.com/aws-samples/aws-appsync-chat-starter-react.git cd aws-appsync-chat-starter-react
Install the required modules: npm install
Init the directory as an amplify Javascript app using the React framework: amplify init Set the region we are deploying resources to: export AWS_REGION=$(jq -r '.providers.awscloudformation.Region' amplify/#current-cloud-backend/amplify-meta.json) echo $AWS_REGION Make sure ALL services are supported in this region or else you'll get errors in the next steps.
Add an Amazon Cognito User Pool auth resource. Use the default configuration. amplify add auth
Add an AppSync GraphQL API with Amazon Cognito User Pool for the API Authentication. Follow the default options. When prompted with "Do you have an annotated GraphQL schema?", select "YES" and provide the schema file path backend/schema.graphql amplify add api
Add S3 Private Storage for Content to the project with the default options. Select private read/write access for Auth users only: amplify add storage
Now it's time to provision your cloud resources based on the local setup and configured features. When asked to generate code, answer "NO" as it would overwrite the current custom files in the src/graphql folder. amplify push Wait for the provisioning to complete. Once done, a src/aws-exports.js file with the resources information is created.
Look up the S3 bucket name created for user storage: export USER_FILES_BUCKET=$(sed -n 's/.*"aws_user_files_s3_bucket": "\(.*\)".*/\1/p' src/aws-exports.js) echo $USER_FILES_BUCKET
Retrieve the API ID of your AppSync GraphQL endpoint export GRAPHQL_API_ID=$(jq -r '.api[(.api | keys)[0]].output.GraphQLAPIIdOutput' ./amplify/#current-cloud-backend/amplify-meta.json) echo $GRAPHQL_API_ID
Retrieve the project's deployment bucket and stackname . It will be used for packaging and deployment with SAM export DEPLOYMENT_BUCKET_NAME=$(jq -r '.providers.awscloudformation.DeploymentBucketName' ./amplify/#current-cloud-backend/amplify-meta.json) export STACK_NAME=$(jq -r '.providers.awscloudformation.StackName' ./amplify/#current-cloud-backend/amplify-meta.json) echo $DEPLOYMENT_BUCKET_NAME echo $STACK_NAME
Now we need to deploy 3 Lambda functions (one for AppSync and two for Lex) and configure the AppSync Resolvers to use Lambda accordingly. First, we install the npm dependencies for each lambda function. We then package and deploy the changes with SAM. cd ./backend/chuckbot-lambda; npm install; cd ../.. cd ./backend/moviebot-lambda; npm install; cd ../.. sam package --template-file ./backend/deploy.yaml --s3-bucket $DEPLOYMENT_BUCKET_NAME --output-template-file packaged.yaml export STACK_NAME_AIML="$STACK_NAME-extra-aiml" sam deploy --template-file ./packaged.yaml --stack-name $STACK_NAME_AIML --capabilities CAPABILITY_IAM --parameter-overrides appSyncAPI=$GRAPHQL_API_ID s3Bucket=$USER_FILES_BUCKET --region $AWS_REGION Wait for the stack to finish deploying then retrieve the functions' ARN export CHUCKBOT_FUNCTION_ARN=$(aws cloudformation describe-stacks --stack-name $STACK_NAME_AIML --query "Stacks[0].Outputs" --region $AWS_REGION --output json | jq -r '.[] | select(.OutputKey == "ChuckBotFunction") | .OutputValue') export MOVIEBOT_FUNCTION_ARN=$(aws cloudformation describe-stacks --stack-name $STACK_NAME_AIML --query "Stacks[0].Outputs" --region $AWS_REGION --output json | jq -r '.[] | select(.OutputKey == "MovieBotFunction") | .OutputValue') echo $CHUCKBOT_FUNCTION_ARN echo $MOVIEBOT_FUNCTION_ARN
Let's set up Lex. We will create 2 chatbots: ChuckBot and MovieBot. Execute the following commands to add permissions so Lex can invoke the chatbot related functions: aws lambda add-permission --statement-id Lex --function-name $CHUCKBOT_FUNCTION_ARN --action lambda:\* --principal lex.amazonaws.com --region $AWS_REGION aws lambda add-permission --statement-id Lex --function-name $MOVIEBOT_FUNCTION_ARN --action lambda:\* --principal lex.amazonaws.com --region $AWS_REGION Update the bots intents with the Lambda ARN: jq '.fulfillmentActivity.codeHook.uri = $arn' --arg arn $CHUCKBOT_FUNCTION_ARN backend/ChuckBot/intent.json -M > tmp.txt ; cp tmp.txt backend/ChuckBot/intent.json; rm tmp.txt jq '.fulfillmentActivity.codeHook.uri = $arn' --arg arn $MOVIEBOT_FUNCTION_ARN backend/MovieBot/intent.json -M > tmp.txt ; cp tmp.txt backend/MovieBot/intent.json; rm tmp.txt And, deploy the slot types, intents and bots: aws lex-models put-slot-type --cli-input-json file://backend/ChuckBot/slot-type.json --region $AWS_REGION aws lex-models put-intent --cli-input-json file://backend/ChuckBot/intent.json --region $AWS_REGION aws lex-models put-bot --cli-input-json file://backend/ChuckBot/bot.json --region $AWS_REGION aws lex-models put-slot-type --cli-input-json file://backend/MovieBot/slot-type.json --region $AWS_REGION aws lex-models put-intent --cli-input-json file://backend/MovieBot/intent.json --region $AWS_REGION aws lex-models put-bot --cli-input-json file://backend/MovieBot/bot.json --region $AWS_REGION
Finally, execute the following command to install your project package dependencies and run the application locally: amplify serve
Access your ChatQLv2 app at http://localhost:3000. Sign up at least 2 different users, authenticate with each user to get them registered in the backend Users table, then search for new users to start a conversation and test real-time/offline messaging as well as other features using different devices or browsers.