aws-samples/amplify-nextjs-chat-app

Modern Chat app Frontend

🚨 Note that this project does not create our backend services via the Amplify CLI, but relies on exported values from the AWS CDK.

🚨 This application is part of a blog post that explains both the frontend and the backend as a whole. The backend repo can be found here

Overview

This repo is the frontend to building a fullstack chat app. The backend can be found here.

Tech Stack

• React Framework: NextJS
• UI Library: AWS Amplify UI primitives
• API: GraphQL via AWS AppSync
• File uploads: Sent to Amazon S3
• Signup/SignIn: Managed with Cognito
• Backend Binding: amplify-js

Steps to get started

Once the backend is deployed, it will output a set of values. The outputted values are what you'll need to get this project working.

1. Run amplify init
2. Run amplify add codegen --apiId YOUR_APPID (value generated from the backend)
3. amplify codegen (accept the defaults, but set the max-depth to 4)
4. Create a src/aws-exports.js file and bring over the values from your CDK backend and ensure your project looks like the sample.aws-exports.js file.
5. Run the app and create 2 users
6. Once signed in, create a room.
7. You should now be able to view the rooms on the homepage. Click one and begin creating messages.

Security

See CONTRIBUTING for more information.

License

This library is licensed under the MIT-0 License. See the LICENSE file.

amplify-nextjs-chat-app's Issues

I cannot build because of 'module not found' error

I've built all the backend stacks via the CDK, and finished setting up graphql and amplify, but the npm run build doesn't run, which is preventing me from trying this project.
Does anyone know of a solution?

I've already gone through the process of deleting package-lock.json file and node-modules directory and reinstalling via npm install, but got the same error.

Doesn't work on AWS Amplify because aws-exports.js overridden?

If appears that the .gitignore and other amplify workings means that you can't deploy this to aws amplify. The root cause, I think, is that aws-exports.js does not get copied and then parts get overridden. If it is not copied, then authorization doesn't work. If it is copied, the default amplify behavior causes AppSync not to work.

Can you fix and/or provide specific instructions to deploy to aws amplify. My patch was to create a copy of aws-exports.js as aws-exportsDev.js and then copy that in during build. But, I am unfamiliar with amplify and I might be doing it wrong.

I just assume that this should be easily deployable to AWS Amplify.