Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rakannimer/todolist-amplify-nextjs
A server-rendered realtime collaborative todo list app with Next.js and AWS Amplify.
https://github.com/rakannimer/todolist-amplify-nextjs
Last synced: about 1 month ago
JSON representation
A server-rendered realtime collaborative todo list app with Next.js and AWS Amplify.
- Host: GitHub
- URL: https://github.com/rakannimer/todolist-amplify-nextjs
- Owner: rakannimer
- Created: 2019-07-25T12:00:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:21:21.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T08:16:19.278Z (4 months ago)
- Language: TypeScript
- Homepage: https://todolist-amplify-nextjs.rnim.now.sh
- Size: 2.41 MB
- Stars: 36
- Watchers: 2
- Forks: 39
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - rakannimer/todolist-amplify-nextjs - A server-rendered realtime collaborative todo list app with Next.js and AWS Amplify. (TypeScript)
README
# AWS Amplify and Typescript with NextJS
[](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/rakannimer/todolist-amplify-nextjs)
## Setup
### Initialize and deploy the Amplify project
If you've never used amplify before
1. [Sign up](https://portal.aws.amazon.com/billing/signup#/start) for an AWS account
2. Install the AWS Amplify cli:
```sh
npm install -g @aws-amplify/cli
```
3. Configure the Amplify cli
```sh
amplify configure
```
[Read More](https://aws-amplify.github.io/docs/cli-toolchain/quickstart?sdk=js)
```bash
$ amplify init
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor:
? Do you want to use an AWS profile? Y
$ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? Y
> We already have the GraphQL code generated for this project, so generating it here is not necessary.
```
### Install & Run
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
### Edit GraphQL Schema
1. Open [`amplify/backend/api/nextjswithamplifyts/schema.graphql`](amplify/backend/api/nextjswithamplifyts/schema.graphql) and change what you need to.
2. Run `amplify push`
3. 👍
### Use with new Amplify project
Make sure to commit your changes before doing this.
Detailed version
```sh
$ mv amplify/backend/api/nextjswithamplifyts/schema.graphql ./schema.graphql
$ rm -rf amplify/ src/
$ amplify init
? Enter a name for the project
? Enter a name for the environment prod
? Choose your default editor:
? Choose the type of app that you're building javascript
? What javascript framework are you using react
? Source Directory Path: src
next export outputs the project to the out directory
? Distribution Directory Path: out
? Build Command: default
? Start Command: default
? Do you want to use an AWS profile? (Y/n) Y
...
Your project has been successfully initialized and connected to the cloud!
$ amplify add api
? Please select from one of the below mentioned services
GraphQL
? Provide API name:
? Choose an authorization type for the API (Use arrow keys)
API key
? Do you have an annotated GraphQL schema? (y/N) y
? Provide your schema file path: ./schema.graphql
$ rm ./schema.graphql
$ amplify push
? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/API.ts
````
```sh
mv amplify/backend/api/nextjswithamplifyts/schema.graphql ./schema.graphql
rm -rf amplify/ src/
amplify init
amplify add api
rm ./schema.graphql
amplify push
````
## The idea behind this example
This repo shows how to build a server rendered web application with NextJS and AWS Amplify.
We use AWS Amplify to generate code and to manage and consume the AWS cloud resources needed for our app.
The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
Two routes are implemented :
- `/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.tsx](/pages/index.tsx))
- `/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].tsx](/pages/todo/[id].tsx))
You can read more about it [here](https://dev.to/rakannimer/ssr-web-app-with-nextjs-aws-amplify-4olj).