feat: add amplify-adapter-react-router package (#40)

* feat(amplify-adapter-react-router): add initial implementation

* feat(todo-app): add initial implementation of Todo app with React Router and AWS Amplify

* fix(todo-app): update authorization to require authenticated users

* chore: add amplify.yml for todo-app backend and frontend builds and hosting

* chore: update amplify.yml to correct build and artifact paths

* chore(todo-app): remove amplify_outputs.json file

* chore: fix typo in amplify.yml for node-linker configuration

* chore(todo-app): update .gitignore and package.json for amplify outputs and server start script

* fix(todo-app): use apiKey authorization mode

* fix: add prebuild script to generate empty amplify_outputs.json

* fix(todo-app): replace prebuild script with TypeScript version

* fix(todo-app): remove Dockerfile as it is no longer needed

* add changeset for amplify-adapter-react-router

Author: fossamagna

.changeset/beige-walls-invent.md

@@ -0,0 +1,5 @@
+---
+"amplify-adapter-react-router": minor
+---
+
+feat: add amplify-adapter-react-router pacakge

amplify.yml

@@ -0,0 +1,26 @@
+version: 1
+applications:
+  - backend:
+      phases:
+        build:
+          commands:
+            - pwd
+            - "ls -al"
+            - echo "node-linker=hoisted" > ../../.npmrc
+            - corepack enable
+            - pnpm install --frozen-lockfile
+            - pnpm exec ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
+    frontend:
+      phases:
+        build:
+          commands:
+            - pnpm --workspace-root build
+      artifacts:
+        baseDirectory: .amplify-hosting
+        files:
+          - "**/*"
+      cache:
+        paths:
+          - node_modules/**/*
+      buildPath: examples/todo-app
+    appRoot: examples/todo-app

examples/todo-app/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

examples/todo-app/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
+
+# Amplify
+/.amplify/
+/.amplify-hosting/
+amplify_outputs.json
+

examples/todo-app/README.md

@@ -0,0 +1,3 @@
+# Todo app using React Router SSR and AWS Amplify
+
+A Todo application using React Router and AWS Amplify.

examples/todo-app/amplify/auth/resource.ts

@@ -0,0 +1,7 @@
+import { defineAuth } from '@aws-amplify/backend';
+
+export const auth = defineAuth({
+  loginWith: {
+    email: true
+  }
+});

examples/todo-app/amplify/backend.ts

@@ -0,0 +1,9 @@
+import { defineBackend } from '@aws-amplify/backend';
+import { auth } from './auth/resource';
+import { data } from './data/resource';
+
+defineBackend({
+  auth,
+  data
+});
+

examples/todo-app/amplify/data/resource.ts

@@ -0,0 +1,18 @@
+import { a, defineData, type ClientSchema } from '@aws-amplify/backend';
+
+const schema = a.schema({
+  Todo: a.model({
+    content: a.string(),
+    isDone: a.boolean()
+  })
+    .authorization(allow => [allow.publicApiKey()])
+});
+
+export type Schema = ClientSchema<typeof schema>;
+export const data = defineData({
+  schema,
+  authorizationModes: {
+    defaultAuthorizationMode: 'apiKey',
+  }
+});
+

examples/todo-app/app/app.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}

examples/todo-app/app/components/TodoList.tsx

@@ -0,0 +1,19 @@
+import { TodoListItem, type TodoListItemProps } from "./TodoListItem";
+
+export type TodoListProps = {
+  items: TodoListItemProps["item"][];
+};
+
+export function TodoList({ items }: TodoListProps) {
+  if (items.length === 0) {
+    return <p>No items</p>;
+  }
+
+  return (
+    <ul className="divide-y divide-gray-200 border-1 border-gray-200 rounded-xl">
+      {items.map((item) => (
+        <TodoListItem key={item.id} item={item} />
+      ))}
+    </ul>
+  );
+}