├── amplify ├── package.json ├── backend.ts ├── auth │ └── resource.ts ├── tsconfig.json └── data │ └── resource.ts ├── src ├── vite-env.d.ts ├── main.tsx ├── App.css ├── App.tsx ├── index.css └── assets │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── CODE_OF_CONDUCT.md ├── index.html ├── .gitignore ├── amplify.yml ├── .eslintrc.cjs ├── tsconfig.json ├── LICENSE ├── package.json ├── README.md ├── public └── vite.svg └── CONTRIBUTING.md /amplify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /amplify/backend.ts: -------------------------------------------------------------------------------- 1 | import { defineBackend } from '@aws-amplify/backend'; 2 | import { auth } from './auth/resource'; 3 | import { data } from './data/resource'; 4 | 5 | defineBackend({ 6 | auth, 7 | data, 8 | }); 9 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /amplify/auth/resource.ts: -------------------------------------------------------------------------------- 1 | import { defineAuth } from '@aws-amplify/backend'; 2 | 3 | /** 4 | * Define and configure your auth resource 5 | * @see https://docs.amplify.aws/gen2/build-a-backend/auth 6 | */ 7 | export const auth = defineAuth({ 8 | loginWith: { 9 | email: true, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | ## Code of Conduct 2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 4 | opensource-codeofconduct@amazon.com with any additional questions or comments. 5 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | import "./index.css"; 5 | import { Amplify } from "aws-amplify"; 6 | import outputs from "../amplify_outputs.json"; 7 | 8 | Amplify.configure(outputs); 9 | 10 | ReactDOM.createRoot(document.getElementById("root")!).render( 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /amplify/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2022", 5 | "moduleResolution": "bundler", 6 | "resolveJsonModule": true, 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "strict": true, 10 | "skipLibCheck": true, 11 | "paths": { 12 | "$amplify/*": [ 13 | "../.amplify/generated/*" 14 | ] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # amplify 27 | .amplify 28 | amplify_outputs* 29 | amplifyconfiguration* 30 | -------------------------------------------------------------------------------- /amplify.yml: -------------------------------------------------------------------------------- 1 | version: 1 2 | backend: 3 | phases: 4 | build: 5 | commands: 6 | - npm ci --cache .npm --prefer-offline 7 | - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID 8 | frontend: 9 | phases: 10 | build: 11 | commands: 12 | - npm run build 13 | artifacts: 14 | baseDirectory: dist 15 | files: 16 | - '**/*' 17 | cache: 18 | paths: 19 | - .npm/**/* 20 | - node_modules/**/* -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT No Attribution 2 | 3 | Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so. 10 | 11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 12 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 13 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 14 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 15 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 16 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amplify-vite-react-template", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@aws-amplify/ui-react": "^6.5.5", 14 | "aws-amplify": "^6.6.6", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@aws-amplify/backend": "^1.5.0", 20 | "@aws-amplify/backend-cli": "^1.2.9", 21 | "@types/react": "^18.2.66", 22 | "@types/react-dom": "^18.2.22", 23 | "@typescript-eslint/eslint-plugin": "^7.2.0", 24 | "@typescript-eslint/parser": "^7.2.0", 25 | "@vitejs/plugin-react": "^4.2.1", 26 | "aws-cdk": "^2.138.0", 27 | "aws-cdk-lib": "^2.138.0", 28 | "constructs": "^10.3.0", 29 | "esbuild": "^0.20.2", 30 | "eslint": "^8.57.0", 31 | "eslint-plugin-react-hooks": "^4.6.0", 32 | "eslint-plugin-react-refresh": "^0.4.6", 33 | "tsx": "^4.7.2", 34 | "typescript": "^5.4.5", 35 | "vite": "^5.4.10" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import type { Schema } from "../amplify/data/resource"; 3 | import { generateClient } from "aws-amplify/data"; 4 | 5 | const client = generateClient(); 6 | 7 | function App() { 8 | const [todos, setTodos] = useState>([]); 9 | 10 | useEffect(() => { 11 | client.models.Todo.observeQuery().subscribe({ 12 | next: (data) => setTodos([...data.items]), 13 | }); 14 | }, []); 15 | 16 | function createTodo() { 17 | client.models.Todo.create({ content: window.prompt("Todo content") }); 18 | } 19 | 20 | return ( 21 |
22 |

My todos

23 | 24 |
    25 | {todos.map((todo) => ( 26 |
  • {todo.content}
    • 27 | ))} 28 |
29 |
30 | 🥳 App successfully hosted. Try creating a new todo. 31 |
32 | 33 | Review next step of this tutorial. 34 | 35 |
36 |
37 | ); 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## AWS Amplify React+Vite Starter Template 2 | 3 | This repository provides a starter template for creating applications using React+Vite and AWS Amplify, emphasizing easy setup for authentication, API, and database capabilities. 4 | 5 | ## Overview 6 | 7 | This template equips you with a foundational React application integrated with AWS Amplify, streamlined for scalability and performance. It is ideal for developers looking to jumpstart their project with pre-configured AWS services like Cognito, AppSync, and DynamoDB. 8 | 9 | ## Features 10 | 11 | - **Authentication**: Setup with Amazon Cognito for secure user authentication. 12 | - **API**: Ready-to-use GraphQL endpoint with AWS AppSync. 13 | - **Database**: Real-time database powered by Amazon DynamoDB. 14 | 15 | ## Deploying to AWS 16 | 17 | For detailed instructions on deploying your application, refer to the [deployment section](https://docs.amplify.aws/react/start/quickstart/#deploy-a-fullstack-app-to-aws) of our documentation. 18 | 19 | ## Security 20 | 21 | See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information. 22 | 23 | ## License 24 | 25 | This library is licensed under the MIT-0 License. See the LICENSE file. -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: linear-gradient(180deg, rgb(117, 81, 194), rgb(255, 255, 255)); 4 | display: flex; 5 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 6 | height: 100vh; 7 | width: 100vw; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | main { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: stretch; 16 | } 17 | 18 | button { 19 | border-radius: 8px; 20 | border: 1px solid transparent; 21 | padding: 0.6em 1.2em; 22 | font-size: 1em; 23 | font-weight: 500; 24 | font-family: inherit; 25 | background-color: #1a1a1a; 26 | cursor: pointer; 27 | transition: border-color 0.25s; 28 | color: white; 29 | } 30 | button:hover { 31 | border-color: #646cff; 32 | } 33 | button:focus, 34 | button:focus-visible { 35 | outline: 4px auto -webkit-focus-ring-color; 36 | } 37 | 38 | ul { 39 | padding-inline-start: 0; 40 | margin-block-start: 0; 41 | margin-block-end: 0; 42 | list-style-type: none; 43 | display: flex; 44 | flex-direction: column; 45 | margin: 8px 0; 46 | border: 1px solid black; 47 | gap: 1px; 48 | background-color: black; 49 | border-radius: 8px; 50 | overflow: auto; 51 | } 52 | 53 | li { 54 | background-color: white; 55 | padding: 8px; 56 | } 57 | 58 | li:hover { 59 | background: #dadbf9; 60 | } 61 | 62 | a { 63 | font-weight: 800; 64 | text-decoration: none; 65 | } -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /amplify/data/resource.ts: -------------------------------------------------------------------------------- 1 | import { type ClientSchema, a, defineData } from "@aws-amplify/backend"; 2 | 3 | /*== STEP 1 =============================================================== 4 | The section below creates a Todo database table with a "content" field. Try 5 | adding a new "isDone" field as a boolean. The authorization rule below 6 | specifies that any user authenticated via an API key can "create", "read", 7 | "update", and "delete" any "Todo" records. 8 | =========================================================================*/ 9 | const schema = a.schema({ 10 | Todo: a 11 | .model({ 12 | content: a.string(), 13 | }) 14 | .authorization((allow) => [allow.publicApiKey()]), 15 | }); 16 | 17 | export type Schema = ClientSchema; 18 | 19 | export const data = defineData({ 20 | schema, 21 | authorizationModes: { 22 | defaultAuthorizationMode: "apiKey", 23 | // API Key is used for a.allow.public() rules 24 | apiKeyAuthorizationMode: { 25 | expiresInDays: 30, 26 | }, 27 | }, 28 | }); 29 | 30 | /*== STEP 2 =============================================================== 31 | Go to your frontend source code. From your client-side code, generate a 32 | Data client to make CRUDL requests to your table. (THIS SNIPPET WILL ONLY 33 | WORK IN THE FRONTEND CODE FILE.) 34 | 35 | Using JavaScript or Next.js React Server Components, Middleware, Server 36 | Actions or Pages Router? Review how to generate Data clients for those use 37 | cases: https://docs.amplify.aws/gen2/build-a-backend/data/connect-to-API/ 38 | =========================================================================*/ 39 | 40 | /* 41 | "use client" 42 | import { generateClient } from "aws-amplify/data"; 43 | import type { Schema } from "@/amplify/data/resource"; 44 | 45 | const client = generateClient() // use this Data client for CRUDL requests 46 | */ 47 | 48 | /*== STEP 3 =============================================================== 49 | Fetch records from the database and use them in your frontend component. 50 | (THIS SNIPPET WILL ONLY WORK IN THE FRONTEND CODE FILE.) 51 | =========================================================================*/ 52 | 53 | /* For example, in a React component, you can use this snippet in your 54 | function's RETURN statement */ 55 | // const { data: todos } = await client.models.Todo.list() 56 | 57 | // return
    {todos.map(todo =>
  • {todo.content}
    • )}
58 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional 4 | documentation, we greatly value feedback and contributions from our community. 5 | 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary 7 | information to effectively respond to your bug report or contribution. 8 | 9 | 10 | ## Reporting Bugs/Feature Requests 11 | 12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features. 13 | 14 | When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already 15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful: 16 | 17 | * A reproducible test case or series of steps 18 | * The version of our code being used 19 | * Any modifications you've made relevant to the bug 20 | * Anything unusual about your environment or deployment 21 | 22 | 23 | ## Contributing via Pull Requests 24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that: 25 | 26 | 1. You are working against the latest source on the *main* branch. 27 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already. 28 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted. 29 | 30 | To send us a pull request, please: 31 | 32 | 1. Fork the repository. 33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change. 34 | 3. Ensure local tests pass. 35 | 4. Commit to your fork using clear commit messages. 36 | 5. Send us a pull request, answering any default questions in the pull request interface. 37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation. 38 | 39 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/). 41 | 42 | 43 | ## Finding contributions to work on 44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start. 45 | 46 | 47 | ## Code of Conduct 48 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 49 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 50 | opensource-codeofconduct@amazon.com with any additional questions or comments. 51 | 52 | 53 | ## Security issue notifications 54 | If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](http://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public github issue. 55 | 56 | 57 | ## Licensing 58 | 59 | See the [LICENSE](LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution. 60 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------