From c80a21d580aa0150ffd1bf4eedfd8195c0e2de07 Mon Sep 17 00:00:00 2001 From: Katie Goines <30757403+katiegoines@users.noreply.github.com> Date: Fri, 5 Apr 2024 17:15:54 -0700 Subject: [PATCH] chore: weekly merge of `next-release/dev` into `next-release/main` (#7175) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * build UI additions * updates to option 1 qs vite * updated option 2 * added titles * added language to clarify * chore: merging `next-release/main` into `next-release/dev` (#7174) * Minor edits to Vite + React quickstart (#6926) * Updates to Vite + React quickstart * Update src/fragments/gen2/quickstart/build-a-backend.mdx Co-authored-by: Kevin Old * Update build-a-backend.mdx * Update build-a-backend.mdx * Update build-a-backend.mdx --------- Co-authored-by: Kevin Old * fix: Fix incorrect auth import path in migration guide. (#6934) * fix: Update incorrect `updateMFAPreference` parameter in JS v6 migration guide. (#6935) * Amplify Android Release 2.14.11 (#6933) * chore: refactor .layout-header into separate component (#6826) * platform typed as optional * refactor init * remove commented code * remove angry useEffect * fix typing * added layoutcontext so mobile menu closes on navigation * move import --------- Co-authored-by: katiegoines * fix: Nesting of auth cli templates (#6932) * fix: change config variable name (#6923) * Guide to support Amplify v2 with AWS Android SDK (#6927) * Update puppeteer (#6949) * Update index.mdx (#6950) * Update CODEOWNERS with correct PM alignment (#6951) * fix(flutter, js): scope "connect existing cdk" guide to respective platform (#6947) Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * Revert "fix(flutter, js): scope "connect existing cdk" guide to respective pl…" (#6955) This reverts commit 5998b22f18cada98ba7c6d1f35c3f6b378637476. * chore: remove duplicated logic between Layout and LayoutHeader (#6954) * chore: more layout refactoring * remove unused prop, alphabetize props * improve oauth docs (#6961) * fixed gen 2 getting started guide (#6968) * Update redirects for deleted hidden pages (#6944) * Update manual installation to point to @beta tag (#6972) * include usage for multi-page apps (#6964) * include usage for multi-page apps * improve multi-page app docs * use Hub syntax * update imports in examples * chore: Clean up broken Amplify JS API reference links (#6976) * chore: Clean up broken Amplify JS API reference links. * Cleaned up language. * Update build image instructions for Gen 2 (#6978) * update build image settings for Gen 2 * remove callout and add fragment to vite guide * chore: add unit test for YoutubeEmbed component (#6983) * chore: add unit test for YoutubeEmbed component * add code coverage stats --------- Co-authored-by: katiegoines * chore: add unit tests for Accordion component (#6981) * chore: add unit tests for Accordion component * issue with window properties * fixed tracking test * working on animation issue * accordion tests * fix testing errors * added test for closing accordion * add code coverage stats --------- Co-authored-by: katiegoines * Update index.mdx (#6986) * Add env variables for algolia (#6957) * Add algolia env vars to next.config * Remove extra code string * fix(data): update REST API docs to document correct error response type (#6989) * fix(data): update React Native minimum iOS deployment target guidance; add build step to docs (#6970) * fix(data): update React Native minimum iOS deployment target; add build step to docs * address PR feedback * remove deployment target guidance * add React Native version deployment target callout * fix unrecognized syntax * replace callout with accordion * move 'upgrading' callout * Clarify behavior of forgetDevice() API regarding device tracking (#6985) * Clarify behavior of forgetDevice() API regarding device tracking This commit updates the documentation to clarify that using the forgetDevice() API results in the device being neither remembered nor tracked. Previously, the documentation suggested that forgotten devices might still be tracked, leading to confusion about the API's behavior. The revised wording aligns with the detailed description under the "Forgotten" section, ensuring consistency and eliminating ambiguity about how forgotten devices are handled. * Clarify behavior of forgetDevice() API regarding device tracking * Support for enum value listing (#6885) * Support for enum value listing * Update src/pages/gen2/build-a-backend/data/data-modeling/add-fields/index.mdx * CDK updates v2 (#6990) * Add padding to bottom of nav menu (#6991) * Adding secondary index to Gen 2 (#6996) * Adding secondary index docs * fixed some formatting for custom query fields * extend config to show addOuput (#6963) * extend config * modify wording * modify example * improve wording * Update index.mdx (#6995) * Update index.mdx * add guest access support to docs * chore: add unit tests for NextPrevious component (#7003) Co-authored-by: katiegoines * chore: add unit tests for LinkCards and LinkCard components (#7006) Co-authored-by: katiegoines * chore: add unit tests for GetStartedPopover component (#7005) Co-authored-by: katiegoines * fix: [Storage] Configure Access (#6948) Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * fix(Swift): update data use policy info's tracking to false (#6938) * fix(Swift): update data use policy info's tracking to false * Update data-information.mdx * chore: add callouts and troubleshooting guide for configuration (#6967) * fix: resolve in-content broken links (#7011) * re-platforming * remove reference to mocking and testing for android & swift * remove reference to mocking and testing for android & swift * filtered out reference to optimistic ui for react native --------- Co-authored-by: katiegoines * update gen2 storage and function docs (#7009) * update gen2 storage and function docs * add resource access links and example * revisions, update code snippet titles * Update CODEOWNERS (#7014) * updated steps for extending components in code (#6827) Co-authored-by: Aditya Shahani * Custom business logic support as of March @beta (#7019) * Enhanced custom business logic DX * addressed tim's comments * Added custom subscription configuration worfklow * removed in-development areas * added titles * added links for deep dive material * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx * added client method for clarity. * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai * Apply suggestions from code review Co-authored-by: josef --------- Co-authored-by: josef Co-authored-by: Kethan sai * add storage trigger docs (#7020) * storage trigger docs * Apply suggestions from code review Co-authored-by: josef * add storage access actions --------- Co-authored-by: josef * update link checker to wait for each call to complete before making t… (#6993) * update link checker to wait for each call to complete before making the next and remove # from urls being checked * update logging to show how many links found on each page * Update tasks/link-checker.js --------- Co-authored-by: Jacob Logan Co-authored-by: katiegoines Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> * custom examples (#6979) * custom examples * fix: broken link, missing / at start (#7026) Co-authored-by: katiegoines * validate and fix code snippets in Data section (#6975) * Update sandbox --dir-to-watch description (#7031) * Update index.mdx (#7035) * Fix link (#7028) * add docs to auth resource access pattern (#7032) * fix: type platform as optional in Breadcrumbs component & add unit tests (#6912) * platform typed as optional * chore: add unit tests for Breadcrumbs * testing to include platform optional * fix: type platform as optional * add tests for override values --------- Co-authored-by: katiegoines * fix: proper variable naming conventions for storage (#7033) fix: proper variable naming conventions for storage * remove explicit file extension from gen2 imports (#6946) Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * fix: Update diff code blocks to TypeScript with code highlights (#6905) * add docs on granting defineFunction access to defineData (#7029) * standardize Gen 2 wording (#7036) * Update index.mdx (#6906) * Modify_Amplify_resources (#7018) * fix code snippets on read data page * code snippet updates * updated the code snippets * updated code snippets. * custom business page rollback * Update maplibre links (#7040) * chore: add unit tests for PlatformNavigator (#6980) * chore: add unit tests for PlatformNavigator * add code coverage * simplify * simplify --------- Co-authored-by: katiegoines * Update links to expo docs (#7044) * Update links to expo docs * Update src/pages/[platform]/prev/build-a-backend/auth/add-social-provider/index.mdx Co-authored-by: josef * Update src/pages/[platform]/prev/build-a-backend/auth/add-social-provider/index.mdx Co-authored-by: josef --------- Co-authored-by: josef * chore: add unit tests for InternalLinkButton (#7000) Co-authored-by: katiegoines * chore: add addtl unit test for Block component (#6982) * chore: add addtl unit test for Block component * add code coverage stats * remove superfluous Block component --------- Co-authored-by: katiegoines * chore: add unit tests for TOC (#6984) * chore: add unit tests for TOC * add code coverage * hardcode expected hash --------- Co-authored-by: katiegoines * chore: add unit tests for ExternalLink (#6915) * chore: add unit tests for ExternalLink * fixing tracking test --------- Co-authored-by: katiegoines * chore: add unit tests for ExternalLinkButton (#6914) * chore: add unit tests for ExternalLinkButton * Update ExternalLinkButton.test.tsx triggering checks --------- Co-authored-by: katiegoines * chore: add unit tests for Footer component (#6999) Co-authored-by: katiegoines * chore: add unit tests for MigrationAlert component (#7004) * chore: add unit tests for MigrationAlert component * chore: add unit tests for MigrationAlert component --------- Co-authored-by: katiegoines * chore: add unit test for Overview component (#7002) Co-authored-by: katiegoines * chore: upgrade docsearch/react to 3.6 (#7046) * added utility type content (#7047) * chore: add unit tests for PageLastUpdated (#7001) Co-authored-by: katiegoines * chore: add unit tests for Commands and Columns (#6916) * chore: add unit test for CLICommands * chore: add unit test for Columns * Update Command.test.tsx triggering checks --------- Co-authored-by: katiegoines * Update resolution for follow-redirects (#7055) * Update relative urls (#7048) * Update relative urls * Update url * Updating link checker (#7052) * Updating link checker to account for duplicate urls from different pages and link text * Update slack formatting * Remove console.log * Add comments to function * Remove extra console.logs() * chore: update redirects list (#6969) * update redirects * updated redirects --------- Co-authored-by: katiegoines * remove allowlist role names for appsync console access page (#7081) * Add JavaScript resolver code sample to Gen 1 (#7087) * fix(JS): Update v5 JS libraries installation guides. (#7090) * fix(v5): update aws-amplify v5 dependency * chore: remove extra '0' number from versions * chore: remove vue2 block * chore: update version reference * Cbonif/field-level-auth-support-for-sql (#7091) * chore(gen2-data): update .secondaryIndexes example to match the latest interface (#7095) * update setup auth client example with correct props (#7106) * update auth with correct props * Change generated function env package name (#7096) * Update typo in url for localhost (#7110) * update next config to use a static build Id (#7102) Co-authored-by: Jacob Logan * chore: Add callout on Analytics buffer persistence in Amplify JS (#7115) * chore: Add callout on Analytics buffer persistence in Amplify JS. * PR feedback. * Custom subscription docs to Gen 2 (#7120) * Add playsInline to videos (#7125) * autoSignIn position correction in v6 migration docs (#7059) * fix(next-release/main): update home page h1 and code block font size (#7117) (#7126) * update font sizes * add text-size-adjust * add webkit prefix, add comment * update text-size-adjust fix --------- Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * remove parenthesis from "Amplify (Gen 2)" (#7113) * change "NPM" to "npm" (#7112) * remove explicit ".js" extension from gen2 resource imports (#7134) * remove leading slash from storage access paths (#7116) * remove unnecessary "Angular" mention in auth getting started (#7139) Removed 'Angular' from the app description. It is not necessarily an angular app. * Gen 2 Quickstart: Fix amplify console link (#7141) * fix amplify console link * fix text from AWS Console to Amplify Console * updated alt text for Amplify console * Update src/fragments/gen2/quickstart/deploy-and-host.mdx Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> * Update src/pages/gen2/deploy-and-host/fullstack-branching/branch-deployments/index.mdx Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> --------- Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> * Add Favicon and apple-touch icons to root (#7137) * add 96x96 favicons * add favicon and apple-touch to root * updated icons --------- Co-authored-by: Jacob Logan * docs(migration): fixes mislabeling notification enable snippet (#7135) the v5 snippet was labeled as v6 and the v6 was labeled as v5 Co-authored-by: derrik.fleming * edits to custom business logic (#7129) * remove console.log (#7147) * fix: copied code no longer includes markdown comments (#7146) * fix: copied code no longer includes markdown comments * minor cleanup * splite prepareCopyText to it's own export for easier testing * fix MDXCode mock * chore(react-native): Add callouts for dropped Expo Go support (#7160) * Update index.mdx (#7165) * Update github link to maplibre repo (#7162) * Gen2 storage docs web (#7163) * add storage docs * add transfer acceleration documentation * fix spelling * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * Update src/pages/[platform]/build-a-backend/storage/define-storage/index.mdx Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * fix links and add cors policy callout * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/define-storage/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/define-storage/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/extend-with-cdk/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/extend-with-cdk/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/get-url/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/get-url/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/get-url/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/extend-with-cdk/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/lambda-triggers/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/download-files/index.mdx Co-authored-by: josef * add language in code snippets and change list files sidebar title * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef --------- Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> Co-authored-by: josef * Storage docs update (#7171) * update list files to get files * update extend S3 resources section * update options links for upload api * remove gen2 pages added * chore: merge `main` into `next-release/main` (#7173) * Minor edits to Vite + React quickstart (#6926) * Updates to Vite + React quickstart * Update src/fragments/gen2/quickstart/build-a-backend.mdx Co-authored-by: Kevin Old * Update build-a-backend.mdx * Update build-a-backend.mdx * Update build-a-backend.mdx --------- Co-authored-by: Kevin Old * fix: Fix incorrect auth import path in migration guide. (#6934) * fix: Update incorrect `updateMFAPreference` parameter in JS v6 migration guide. (#6935) * Amplify Android Release 2.14.11 (#6933) * chore: refactor .layout-header into separate component (#6826) * platform typed as optional * refactor init * remove commented code * remove angry useEffect * fix typing * added layoutcontext so mobile menu closes on navigation * move import --------- Co-authored-by: katiegoines * fix: Nesting of auth cli templates (#6932) * fix: change config variable name (#6923) * Guide to support Amplify v2 with AWS Android SDK (#6927) * Update puppeteer (#6949) * Update index.mdx (#6950) * Update CODEOWNERS with correct PM alignment (#6951) * fix(flutter, js): scope "connect existing cdk" guide to respective platform (#6947) Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * Revert "fix(flutter, js): scope "connect existing cdk" guide to respective pl…" (#6955) This reverts commit 5998b22f18cada98ba7c6d1f35c3f6b378637476. * chore: remove duplicated logic between Layout and LayoutHeader (#6954) * chore: more layout refactoring * remove unused prop, alphabetize props * improve oauth docs (#6961) * fixed gen 2 getting started guide (#6968) * Update redirects for deleted hidden pages (#6944) * Update manual installation to point to @beta tag (#6972) * include usage for multi-page apps (#6964) * include usage for multi-page apps * improve multi-page app docs * use Hub syntax * update imports in examples * chore: Clean up broken Amplify JS API reference links (#6976) * chore: Clean up broken Amplify JS API reference links. * Cleaned up language. * Update build image instructions for Gen 2 (#6978) * update build image settings for Gen 2 * remove callout and add fragment to vite guide * chore: add unit test for YoutubeEmbed component (#6983) * chore: add unit test for YoutubeEmbed component * add code coverage stats --------- Co-authored-by: katiegoines * chore: add unit tests for Accordion component (#6981) * chore: add unit tests for Accordion component * issue with window properties * fixed tracking test * working on animation issue * accordion tests * fix testing errors * added test for closing accordion * add code coverage stats --------- Co-authored-by: katiegoines * Update index.mdx (#6986) * Add env variables for algolia (#6957) * Add algolia env vars to next.config * Remove extra code string * fix(data): update REST API docs to document correct error response type (#6989) * fix(data): update React Native minimum iOS deployment target guidance; add build step to docs (#6970) * fix(data): update React Native minimum iOS deployment target; add build step to docs * address PR feedback * remove deployment target guidance * add React Native version deployment target callout * fix unrecognized syntax * replace callout with accordion * move 'upgrading' callout * Clarify behavior of forgetDevice() API regarding device tracking (#6985) * Clarify behavior of forgetDevice() API regarding device tracking This commit updates the documentation to clarify that using the forgetDevice() API results in the device being neither remembered nor tracked. Previously, the documentation suggested that forgotten devices might still be tracked, leading to confusion about the API's behavior. The revised wording aligns with the detailed description under the "Forgotten" section, ensuring consistency and eliminating ambiguity about how forgotten devices are handled. * Clarify behavior of forgetDevice() API regarding device tracking * Support for enum value listing (#6885) * Support for enum value listing * Update src/pages/gen2/build-a-backend/data/data-modeling/add-fields/index.mdx * CDK updates v2 (#6990) * Add padding to bottom of nav menu (#6991) * Adding secondary index to Gen 2 (#6996) * Adding secondary index docs * fixed some formatting for custom query fields * extend config to show addOuput (#6963) * extend config * modify wording * modify example * improve wording * Update index.mdx (#6995) * Update index.mdx * add guest access support to docs * chore: add unit tests for NextPrevious component (#7003) Co-authored-by: katiegoines * chore: add unit tests for LinkCards and LinkCard components (#7006) Co-authored-by: katiegoines * chore: add unit tests for GetStartedPopover component (#7005) Co-authored-by: katiegoines * fix: [Storage] Configure Access (#6948) Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * fix(Swift): update data use policy info's tracking to false (#6938) * fix(Swift): update data use policy info's tracking to false * Update data-information.mdx * chore: add callouts and troubleshooting guide for configuration (#6967) * fix: resolve in-content broken links (#7011) * re-platforming * remove reference to mocking and testing for android & swift * remove reference to mocking and testing for android & swift * filtered out reference to optimistic ui for react native --------- Co-authored-by: katiegoines * update gen2 storage and function docs (#7009) * update gen2 storage and function docs * add resource access links and example * revisions, update code snippet titles * Update CODEOWNERS (#7014) * updated steps for extending components in code (#6827) Co-authored-by: Aditya Shahani * Custom business logic support as of March @beta (#7019) * Enhanced custom business logic DX * addressed tim's comments * Added custom subscription configuration worfklow * removed in-development areas * added titles * added links for deep dive material * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx * added client method for clarity. * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai * Apply suggestions from code review Co-authored-by: josef --------- Co-authored-by: josef Co-authored-by: Kethan sai * add storage trigger docs (#7020) * storage trigger docs * Apply suggestions from code review Co-authored-by: josef * add storage access actions --------- Co-authored-by: josef * update link checker to wait for each call to complete before making t… (#6993) * update link checker to wait for each call to complete before making the next and remove # from urls being checked * update logging to show how many links found on each page * Update tasks/link-checker.js --------- Co-authored-by: Jacob Logan Co-authored-by: katiegoines Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> * custom examples (#6979) * custom examples * fix: broken link, missing / at start (#7026) Co-authored-by: katiegoines * validate and fix code snippets in Data section (#6975) * Update sandbox --dir-to-watch description (#7031) * Update index.mdx (#7035) * Fix link (#7028) * add docs to auth resource access pattern (#7032) * fix: type platform as optional in Breadcrumbs component & add unit tests (#6912) * platform typed as optional * chore: add unit tests for Breadcrumbs * testing to include platform optional * fix: type platform as optional * add tests for override values --------- Co-authored-by: katiegoines * fix: proper variable naming conventions for storage (#7033) fix: proper variable naming conventions for storage * remove explicit file extension from gen2 imports (#6946) Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * fix: Update diff code blocks to TypeScript with code highlights (#6905) * add docs on granting defineFunction access to defineData (#7029) * standardize Gen 2 wording (#7036) * Update index.mdx (#6906) * Modify_Amplify_resources (#7018) * fix code snippets on read data page * code snippet updates * updated the code snippets * updated code snippets. * custom business page rollback * Update maplibre links (#7040) * chore: add unit tests for PlatformNavigator (#6980) * chore: add unit tests for PlatformNavigator * add code coverage * simplify * simplify --------- Co-authored-by: katiegoines * Update links to expo docs (#7044) * Update links to expo docs * Update src/pages/[platform]/prev/build-a-backend/auth/add-social-provider/index.mdx Co-authored-by: josef * Update src/pages/[platform]/prev/build-a-backend/auth/add-social-provider/index.mdx Co-authored-by: josef --------- Co-authored-by: josef * chore: add unit tests for InternalLinkButton (#7000) Co-authored-by: katiegoines * chore: add addtl unit test for Block component (#6982) * chore: add addtl unit test for Block component * add code coverage stats * remove superfluous Block component --------- Co-authored-by: katiegoines * chore: add unit tests for TOC (#6984) * chore: add unit tests for TOC * add code coverage * hardcode expected hash --------- Co-authored-by: katiegoines * chore: add unit tests for ExternalLink (#6915) * chore: add unit tests for ExternalLink * fixing tracking test --------- Co-authored-by: katiegoines * chore: add unit tests for ExternalLinkButton (#6914) * chore: add unit tests for ExternalLinkButton * Update ExternalLinkButton.test.tsx triggering checks --------- Co-authored-by: katiegoines * chore: add unit tests for Footer component (#6999) Co-authored-by: katiegoines * chore: add unit tests for MigrationAlert component (#7004) * chore: add unit tests for MigrationAlert component * chore: add unit tests for MigrationAlert component --------- Co-authored-by: katiegoines * chore: add unit test for Overview component (#7002) Co-authored-by: katiegoines * chore: upgrade docsearch/react to 3.6 (#7046) * added utility type content (#7047) * chore: add unit tests for PageLastUpdated (#7001) Co-authored-by: katiegoines * chore: add unit tests for Commands and Columns (#6916) * chore: add unit test for CLICommands * chore: add unit test for Columns * Update Command.test.tsx triggering checks --------- Co-authored-by: katiegoines * Update resolution for follow-redirects (#7055) * Update relative urls (#7048) * Update relative urls * Update url * Updating link checker (#7052) * Updating link checker to account for duplicate urls from different pages and link text * Update slack formatting * Remove console.log * Add comments to function * Remove extra console.logs() * chore: update redirects list (#6969) * update redirects * updated redirects --------- Co-authored-by: katiegoines * remove allowlist role names for appsync console access page (#7081) * Add JavaScript resolver code sample to Gen 1 (#7087) * fix(JS): Update v5 JS libraries installation guides. (#7090) * fix(v5): update aws-amplify v5 dependency * chore: remove extra '0' number from versions * chore: remove vue2 block * chore: update version reference * Cbonif/field-level-auth-support-for-sql (#7091) * chore(gen2-data): update .secondaryIndexes example to match the latest interface (#7095) * update setup auth client example with correct props (#7106) * update auth with correct props * Change generated function env package name (#7096) * Update typo in url for localhost (#7110) * update next config to use a static build Id (#7102) Co-authored-by: Jacob Logan * chore: Add callout on Analytics buffer persistence in Amplify JS (#7115) * chore: Add callout on Analytics buffer persistence in Amplify JS. * PR feedback. * Custom subscription docs to Gen 2 (#7120) * Add playsInline to videos (#7125) * autoSignIn position correction in v6 migration docs (#7059) * fix(next-release/main): update home page h1 and code block font size (#7117) (#7126) * update font sizes * add text-size-adjust * add webkit prefix, add comment * update text-size-adjust fix --------- Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> * remove parenthesis from "Amplify (Gen 2)" (#7113) * change "NPM" to "npm" (#7112) * remove explicit ".js" extension from gen2 resource imports (#7134) * remove leading slash from storage access paths (#7116) * remove unnecessary "Angular" mention in auth getting started (#7139) Removed 'Angular' from the app description. It is not necessarily an angular app. * Gen 2 Quickstart: Fix amplify console link (#7141) * fix amplify console link * fix text from AWS Console to Amplify Console * updated alt text for Amplify console * Update src/fragments/gen2/quickstart/deploy-and-host.mdx Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> * Update src/pages/gen2/deploy-and-host/fullstack-branching/branch-deployments/index.mdx Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> --------- Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> * Add Favicon and apple-touch icons to root (#7137) * add 96x96 favicons * add favicon and apple-touch to root * updated icons --------- Co-authored-by: Jacob Logan * docs(migration): fixes mislabeling notification enable snippet (#7135) the v5 snippet was labeled as v6 and the v6 was labeled as v5 Co-authored-by: derrik.fleming * edits to custom business logic (#7129) * remove console.log (#7147) * fix: copied code no longer includes markdown comments (#7146) * fix: copied code no longer includes markdown comments * minor cleanup * splite prepareCopyText to it's own export for easier testing * fix MDXCode mock * chore(react-native): Add callouts for dropped Expo Go support (#7160) * Update index.mdx (#7165) * Update github link to maplibre repo (#7162) * remove gen2 pages added --------- Co-authored-by: Jim Eagan <84857865+hibler13@users.noreply.github.com> Co-authored-by: Kevin Old Co-authored-by: Jim Blanchard Co-authored-by: Ankit Shah <22114629+ankpshah@users.noreply.github.com> Co-authored-by: katiegoines Co-authored-by: Dan Kiuna Co-authored-by: Kihara, Takuya Co-authored-by: Tyler Roach Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> Co-authored-by: Rene Brandel <4989523+renebrandel@users.noreply.github.com> Co-authored-by: Elijah Quartey Co-authored-by: Heather Buchel Co-authored-by: John Corser Co-authored-by: Heather Pundt <119376175+heatheramz@users.noreply.github.com> Co-authored-by: Nikhil Swaminathan <2429410+swaminator@users.noreply.github.com> Co-authored-by: Jay Raval Co-authored-by: David McAfee Co-authored-by: Kethan sai Co-authored-by: Michael Law <1365977+lawmicha@users.noreply.github.com> Co-authored-by: erinleigh90 <106691284+erinleigh90@users.noreply.github.com> Co-authored-by: Edward Foyle Co-authored-by: Adi <34354177+the1adi@users.noreply.github.com> Co-authored-by: Aditya Shahani Co-authored-by: josef Co-authored-by: jacoblogan Co-authored-by: Jacob Logan Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> Co-authored-by: Chris Bonifacio Co-authored-by: Roshane Pascual Co-authored-by: Charles Shin Co-authored-by: Ujjwol Shrestha Co-authored-by: Gen Tamura Co-authored-by: dwittle <72715628+dwittle@users.noreply.github.com> Co-authored-by: Anil Maktala Co-authored-by: israx <70438514+israx@users.noreply.github.com> Co-authored-by: Hui Zhao <10602282+HuiSF@users.noreply.github.com> Co-authored-by: Nairi Areg <51801223+NairiAreg@users.noreply.github.com> Co-authored-by: spivakov83 Co-authored-by: Harshita Daddala Co-authored-by: derrik Co-authored-by: derrik.fleming Co-authored-by: Chris F <5827964+cshfang@users.noreply.github.com> --------- Co-authored-by: Jim Eagan <84857865+hibler13@users.noreply.github.com> Co-authored-by: Kevin Old Co-authored-by: Jim Blanchard Co-authored-by: Ankit Shah <22114629+ankpshah@users.noreply.github.com> Co-authored-by: katiegoines Co-authored-by: Dan Kiuna Co-authored-by: Kihara, Takuya Co-authored-by: Tyler Roach Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> Co-authored-by: Rene Brandel <4989523+renebrandel@users.noreply.github.com> Co-authored-by: Elijah Quartey Co-authored-by: Heather Buchel Co-authored-by: John Corser Co-authored-by: Heather Pundt <119376175+heatheramz@users.noreply.github.com> Co-authored-by: Nikhil Swaminathan <2429410+swaminator@users.noreply.github.com> Co-authored-by: Jay Raval Co-authored-by: David McAfee Co-authored-by: Kethan sai Co-authored-by: Michael Law <1365977+lawmicha@users.noreply.github.com> Co-authored-by: erinleigh90 <106691284+erinleigh90@users.noreply.github.com> Co-authored-by: Edward Foyle Co-authored-by: Adi <34354177+the1adi@users.noreply.github.com> Co-authored-by: Aditya Shahani Co-authored-by: josef Co-authored-by: jacoblogan Co-authored-by: Jacob Logan Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> Co-authored-by: Chris Bonifacio Co-authored-by: Roshane Pascual Co-authored-by: Charles Shin Co-authored-by: Ujjwol Shrestha Co-authored-by: Gen Tamura Co-authored-by: dwittle <72715628+dwittle@users.noreply.github.com> Co-authored-by: Anil Maktala Co-authored-by: israx <70438514+israx@users.noreply.github.com> Co-authored-by: Hui Zhao <10602282+HuiSF@users.noreply.github.com> Co-authored-by: Nairi Areg <51801223+NairiAreg@users.noreply.github.com> Co-authored-by: spivakov83 Co-authored-by: Harshita Daddala Co-authored-by: derrik Co-authored-by: derrik.fleming Co-authored-by: Chris F <5827964+cshfang@users.noreply.github.com> --------- Co-authored-by: Nikhil Swaminathan Co-authored-by: Rene Brandel Co-authored-by: Jim Eagan <84857865+hibler13@users.noreply.github.com> Co-authored-by: Kevin Old Co-authored-by: Jim Blanchard Co-authored-by: Ankit Shah <22114629+ankpshah@users.noreply.github.com> Co-authored-by: katiegoines Co-authored-by: Dan Kiuna Co-authored-by: Kihara, Takuya Co-authored-by: Tyler Roach Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com> Co-authored-by: Rene Brandel <4989523+renebrandel@users.noreply.github.com> Co-authored-by: Elijah Quartey Co-authored-by: Heather Buchel Co-authored-by: John Corser Co-authored-by: Heather Pundt <119376175+heatheramz@users.noreply.github.com> Co-authored-by: Nikhil Swaminathan <2429410+swaminator@users.noreply.github.com> Co-authored-by: Jay Raval Co-authored-by: David McAfee Co-authored-by: Kethan sai Co-authored-by: Michael Law <1365977+lawmicha@users.noreply.github.com> Co-authored-by: erinleigh90 <106691284+erinleigh90@users.noreply.github.com> Co-authored-by: Edward Foyle Co-authored-by: Adi <34354177+the1adi@users.noreply.github.com> Co-authored-by: Aditya Shahani Co-authored-by: josef Co-authored-by: jacoblogan Co-authored-by: Jacob Logan Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> Co-authored-by: Chris Bonifacio Co-authored-by: Roshane Pascual Co-authored-by: Charles Shin Co-authored-by: Ujjwol Shrestha Co-authored-by: Gen Tamura Co-authored-by: dwittle <72715628+dwittle@users.noreply.github.com> Co-authored-by: Anil Maktala Co-authored-by: israx <70438514+israx@users.noreply.github.com> Co-authored-by: Hui Zhao <10602282+HuiSF@users.noreply.github.com> Co-authored-by: Nairi Areg <51801223+NairiAreg@users.noreply.github.com> Co-authored-by: spivakov83 Co-authored-by: Harshita Daddala Co-authored-by: derrik Co-authored-by: derrik.fleming Co-authored-by: Chris F <5827964+cshfang@users.noreply.github.com> --- src/directory/directory.mjs | 55 +++++++++++ .../build-ui/figma-to-code/index.mdx | 2 +- src/pages/[platform]/build-ui/forms/index.mdx | 76 +++++++++++--- src/pages/[platform]/build-ui/index.mdx | 12 ++- .../vite-react-app-option-2/index.mdx | 99 +++++++++---------- .../start/quickstart/vite-react-app/index.mdx | 90 +++++++++-------- 6 files changed, 224 insertions(+), 110 deletions(-) diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index 7942f49cddd..9f374c6fbae 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -301,6 +301,61 @@ export const directory = { }, { path: 'src/pages/[platform]/build-ui/figma-to-code/index.mdx' + }, + { + isExternal: true, + route: + 'https://ui.docs.amplify.aws/[platform]/connected-components/authenticator', + title: 'Authenticator', + description: + 'The Authenticator is a connected component that adds complete authentication flows to your application with minimal boilerplate.', + platforms: [ + 'android', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'angular', + 'flutter', + 'swift', + 'vue' + ] + }, + { + isExternal: true, + route: + 'https://ui.docs.amplify.aws/react/connected-components/storage/storageimage', + title: 'StorageImage', + description: + 'StorageImage is a connected component that simplifies the process of displaying images stored in an Amazon S3 bucket.', + platforms: ['javascript', 'nextjs', 'react'] + }, + { + isExternal: true, + route: + 'https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager', + title: 'StorageManager', + description: + 'StorageManager is a connected component that facilitates operations such as uploading, downloading, listing, and deleting files from an Amazon S3 bucket.', + platforms: ['javascript', 'nextjs', 'react'] + }, + { + isExternal: true, + route: + 'https://ui.docs.amplify.aws/[platform]/connected-components/authenticator', + title: 'Account Settings', + description: + 'Account Settings components are a set of standalone components that add user management flows to your application with minimal boilerplate. . .', + platforms: ['javascript', 'nextjs', 'react'] + }, + { + isExternal: true, + route: + 'https://ui.docs.amplify.aws/[platform]/connected-components/authenticator', + title: 'Face Liveness', + description: + 'FaceLivenessDetector is a connected component that helps verify that only real users, not bad actors using spoofs, can access your services.', + platforms: ['android', 'javascript', 'nextjs', 'react', 'swift'] } ] }, diff --git a/src/pages/[platform]/build-ui/figma-to-code/index.mdx b/src/pages/[platform]/build-ui/figma-to-code/index.mdx index 99c085815b7..e239ae536e5 100644 --- a/src/pages/[platform]/build-ui/figma-to-code/index.mdx +++ b/src/pages/[platform]/build-ui/figma-to-code/index.mdx @@ -1,7 +1,7 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; export const meta = { - title: 'Generate React from Figma', + title: 'Figma-to-React', description: 'Generate React code directly inside Figma using Amplify UI.', platforms: [ 'android', diff --git a/src/pages/[platform]/build-ui/forms/index.mdx b/src/pages/[platform]/build-ui/forms/index.mdx index 4f59df4f891..256ff338ef9 100644 --- a/src/pages/[platform]/build-ui/forms/index.mdx +++ b/src/pages/[platform]/build-ui/forms/index.mdx @@ -1,19 +1,13 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; export const meta = { - title: 'Generate forms', + title: 'Connected forms', description: 'Generate React forms for creating and updating data in your Amplify data backend.', platforms: [ - 'android', - 'angular', - 'flutter', 'javascript', 'nextjs', - 'react', - 'react-native', - 'swift', - 'vue' + 'react' ] }; @@ -29,16 +23,72 @@ export function getStaticProps(context) { }; } -You can generate React forms that automatically connect to your data backend by calling the Amplify CLI: + +You can generate React forms that automatically connect to your data backend. + +## Generate forms +First, install the Amplify UI library. + +```bash +npm install @aws-amplify/ui-react + +``` + +To use connected forms, you first need to deploy a data model from your sandbox environment. We will use the same example as in the getting started [tutorial](/[platform]/start/quickstart). +To get started run the following command from your project root: ```bash npx amplify generate forms ``` -This will generate create and update forms for each model defined in your schema. +This will generate create and update forms for each model defined in your schema in a folder called `ui-components`. + +`File written: ui-components/graphql/subscriptions.ts` +`File written: ui-components/graphql/mutations.ts` +`File written: ui-components/graphql/queries.ts` +`File written: ui-components/TodoCreateForm.jsx` +`File written: ui-components/TodoCreateForm.d.ts` +`File written: ui-components/TodoUpdateForm.jsx` +`File written: ui-components/TodoUpdateForm.d.ts` +`File written: ui-components/utils.js` +`File written: ui-components/index.js` + +## Render React form in your app + +1. In your application's entrypoint file (e.g. `src/index.js` for create-react-app or `src/main.jsx` for Vite), add the following imports and configuration + +```jsx +// highlight-start +import '@aws-amplify/ui-react/styles.css'; +import { ThemeProvider } from '@aws-amplify/ui-react'; +// highlight-end +import { Amplify } from 'aws-amplify'; + +import amplifyconfig from './amplifyconfiguration.json'; + +Amplify.configure(amplifyconfig); +``` + +2. In your application's entrypoint file (e.g. `src/main.jsx` for Vite), wrap the `` component with the following: - +```jsx + + + +``` -**Note:** You will need to have a sandbox environment or a deployed environment to generate forms for your application. +3. Import your form by name. For a form named `TodoCreateForm`, you would use the following code: - +```jsx +import { TodoCreateForm } from './ui-components'; +``` + +3. Place your form in code. For a form named `ProductCreateForm` in a React project, you could use the following App code: + +```jsx +function App() { + return ; +} + +export default App; +``` diff --git a/src/pages/[platform]/build-ui/index.mdx b/src/pages/[platform]/build-ui/index.mdx index d86e6c1c5c2..6d30229cbba 100644 --- a/src/pages/[platform]/build-ui/index.mdx +++ b/src/pages/[platform]/build-ui/index.mdx @@ -6,14 +6,12 @@ export const meta = { description: 'Learn how to build and customize your UI.', route: '/[platform]/build-ui', platforms: [ - 'android', 'angular', - 'flutter', 'javascript', 'nextjs', 'react', 'react-native', - 'swift', + 'flutter', 'vue' ] }; @@ -32,6 +30,12 @@ export function getStaticProps(context) { }; } -Amplify makes it easy to quickly build web app user interfaces using the UI component library, Figma-to-code generation, and CRUD form-generation capabilities. Learn more in the [UI Library.](https://ui.docs.amplify.aws) +Amplify offers a [UI Library](https://ui.docs.amplify.aws) that makes it easy to build web app user interfaces that are connected to the backend. Amplify UI offers: + +* **Connected components** that are designed to work seamlessly with AWS Amplify backend services, allowing you to quickly add common UX patterns for authentication, storage etc. without having to build them from scratch. + +* **Tooling** that generates React forms over data, and React components from Figma designs. + + diff --git a/src/pages/[platform]/start/quickstart/vite-react-app-option-2/index.mdx b/src/pages/[platform]/start/quickstart/vite-react-app-option-2/index.mdx index 6cb377eaee0..059ad58bd7d 100644 --- a/src/pages/[platform]/start/quickstart/vite-react-app-option-2/index.mdx +++ b/src/pages/[platform]/start/quickstart/vite-react-app-option-2/index.mdx @@ -36,26 +36,27 @@ export function getStaticProps() { 3. configure authentication and authorization rules -## Deploy a React app to AWS Amplify +## Step 1: Deploy a Fullstack React app to AWS Amplify -To get started faster, we've created a starter "To-do" application. First, clone this starter application into your GitHub account. +To get started faster, we've created a starter "To-do" application. First, create a repository in your GitHub account using our starter React template. +### 1a: Create repository from a starter template -Use starter template +Create repository from template -Next, go to the AWS Amplify console to deploy the application. +### 1b: Deploy starter to Amplify -Deploy starter template +Deploy to Amplify Select **Start with an existing app** > **GitHub**, pick the starter repository, and hit "Deploy". @@ -64,26 +65,16 @@ Select **Start with an existing app** > **GitHub**, pick the starter repository, -While you wait for the build (~3 min), let's take a tour on the key files included in the starter repository: -```text -├── src/ # React UI code -│ ├── App.tsx # UI code to display todos -│ ├── index.css # Styling for your app -│ └── main.tsx # Entrypoint for the React application -├── package.json -└── tsconfig.json -``` - -Once the build has completed view the newly deployed app by selecting "View production URL". +### 1c: Clone repo locally - +While you wait for the build (~6 min), let's take a tour of the starter repository. First, clone the repository locally: -## Setup cloud sandbox for rapid fullstack iteration +```bash title="Terminal" showLineNumbers={false} +git clone https://github.com//gen2-starter.git +``` -The starter application already has pre-written code to list and remove todos locally. Let's learn how to store and retrieve the todos to the cloud! We went ahead and already pre-defined your Amplify backend. Here's a quick overview of the Amplify Backend-specific files. +Now open the project in an IDE of your choice, and let's tour the files. The starter application already has pre-written code to give you a real-time database with a feed of all todos and the ability to add new todos. Here's a quick overview of the Amplify Backend-specific files and the frontend files: ```text ├── amplify/ # Folder containing your Amplify backend configuration @@ -93,24 +84,32 @@ The starter application already has pre-written code to list and remove todos lo │ │ └── resource.ts | ├── backend.ts │ └── tsconfig.json +├── src/ # React UI code +│ ├── App.tsx # UI code to display todos +│ ├── index.css # Styling for your app +│ └── main.tsx # Entrypoint for the React application +├── package.json +└── tsconfig.json ``` -### Clone the starter app code locally +Now head back to the console. Once the build has completed view the newly deployed app by selecting "View production URL". You can create to-do items but notice that when you refresh the page the to-dos disappear. -First, clone your repository locally by following instructions on your GitHub repo page: + -```bash title="Terminal" showLineNumbers={false} -git clone https://github.com//gen2-starter.git -``` +## Step 2: Persist to-do items to a database -Next, install all dependencies in order to run the dev environment locally. +The app in it's current state does not persist data to a database. Let's learn how to store and retrieve the todos to the cloud. First, install all dependencies in order to run the dev environment locally. ```bash title="Terminal" showLineNumbers={false} cd gen2-starter npm install ``` -### Initialize a cloud sandbox for your localhost frontend +### 2a: Initialize a cloud sandbox for rapid fullstack iteration + +Amplify's cloud sandbox functionality creates a per-developer backend environment intended for your localhost development and testing workflows. This allows you to test and iterate without touching production backend data. @@ -118,7 +117,6 @@ npm install -Amplify's cloud sandbox functionality creates a per-developer backend environment intended for your localhost development and testing workflows. This allows you to test and iterate without touching production backend data. To start your cloud sandbox, run the following command in a **new Terminal window**: @@ -134,15 +132,13 @@ The `npx amplify sandbox` command should run concurrently to your `npm run dev`. -## Build and connect to a database +### 2b: Enable real-time feed of todos -Go to the **amplify/data/resource.ts** file. In there you'll find the definition of your backend data model. We have a `Todo` model with a `content` field. Let's replace the existing UI code that purely stores the data in a local state to use the cloud backend instead. +Go to the **amplify/data/resource.ts** file. In there you'll find the definition of your backend data model. We have a `Todo` model with a `content` field. -### Enable real-time feed of todos +Next, go to the **src/App.tsx** file and replace the existing UI code that purely stores the data in a local state to use the cloud backend instead. Amplify Data provides a built-in capability to subscribe to a real-time feed of your data. Let's use that to update the state of the todos -Amplify Data provides a built-in capability to subscribe to a real-time feed of your data. Let's use that to update the state of the todos - -```tsx +```tsx title="src/App.tsx" // highlight-start import { useEffect, useState } from 'react' import type { Schema } from '../amplify/data/resource' @@ -174,11 +170,11 @@ function App() { } ``` -### Add "create todo" functionality +### 2c: Add "create todo" functionality Next, let's update the `createTodo` function to make an "Create" API request to our cloud backend. -```tsx +```tsx title="src/App.tsx" // ... function App() { // ... @@ -204,7 +200,7 @@ npm run dev This should start a local dev server at http://localhost:5173. -### Add "delete todo" functionality +### 2d: Add "delete todo" functionality Go to the **src/App.tsx** file and add in a new `deleteTodo` functionality and pass function into the `
  • ` element's `onClick` handler. @@ -245,16 +241,8 @@ Try out the deletion functionality now on your localhost. -Once everything works, push your latest changes to the Amplify-hosted URL by committing everything to git and push. -```bash title="Terminal" showLineNumbers={false} -git commit -am "added create, list, and delete functionality" -git push -u origin/main -``` - -Amplify automatically deploys the latest version of your app based on your git commits. In just a few minutes, when the application rebuilds, the hosted URL will be updated to support the new cloud data functionality. - -## Add authentication +## Step 3: Add login UI The starter application already has a pre-configured auth backend defined in the **amplify/auth/resource.ts** file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook. @@ -301,7 +289,18 @@ git commit -am "added authenticator" git push ``` -## Configure authorization rules for your app data +## Step 4: Commit code to Git + +Once everything works, push your latest changes to the Amplify-hosted URL by committing everything to git and push. + +```bash title="Terminal" showLineNumbers={false} +git commit -am "added create, list, and delete functionality" +git push -u origin/main +``` + +Amplify automatically deploys the latest version of your app based on your git commits. In just a few minutes, when the application rebuilds, the hosted URL will be updated to support the new cloud data functionality. + +## Step 5: Update authorization rules for your app data The todos in the starter are currently shared across all users but in most cases you want data to be isolated on a per-user basis. diff --git a/src/pages/[platform]/start/quickstart/vite-react-app/index.mdx b/src/pages/[platform]/start/quickstart/vite-react-app/index.mdx index f9190bd8d4c..76aab5f98af 100644 --- a/src/pages/[platform]/start/quickstart/vite-react-app/index.mdx +++ b/src/pages/[platform]/start/quickstart/vite-react-app/index.mdx @@ -3,7 +3,7 @@ import { IconGithub } from '@/components/Icons/IconGithub' import { IconAmplify } from '@/components/Icons/IconAmplify' export const meta = { - title: 'Vite + React App', + title: 'Vite + React App - Option 1', description: 'Get started with AWS Amplify Gen 2 using Vite + React.', platforms: [ 'android', @@ -36,26 +36,27 @@ export function getStaticProps() { 3. configure authentication and authorization rules -## Deploy a React app to AWS Amplify +## Step 1: Deploy a Fullstack React app to AWS Amplify -To get started faster, we've created a starter "To-do" application. First, clone this starter application into your GitHub account. +To get started faster, we've created a starter "To-do" application. First, create a repository in your GitHub account using our starter React template. +### 1a: Create repository from a starter template -Use starter template +Create repository from template -Next, go to the AWS Amplify console to deploy the application. +### 1b: Deploy starter to Amplify -Deploy starter template +Deploy to Amplify Select **Start with an existing app** > **GitHub**, pick the starter repository, and hit "Deploy". @@ -64,7 +65,15 @@ Select **Start with an existing app** > **GitHub**, pick the starter repository, -While you wait for the build (~5 min), let's take a tour on the key files included in the starter repository: +### 1c: Clone repo locally + +While you wait for the build (~6 min), let's take a tour of the starter repository. First, clone the repository locally: + +```bash title="Terminal" showLineNumbers={false} +git clone https://github.com//gen2-starter.git +``` + +Now open the project in an IDE of your choice, and let's tour the files. The starter application already has pre-written code to give you a real-time database with a feed of all todos and the ability to add new todos. ```text ├── amplify/ # Folder containing your Amplify backend configuration @@ -82,56 +91,45 @@ While you wait for the build (~5 min), let's take a tour on the key files includ └── tsconfig.json ``` -Once the build has completed view the newly deployed app by selecting "View production URL". +Now head back to the console. When the build completes, visit the newly deployed branch by selecting "View production URL". Because the build deployed an API, database, and authentication backend, you will be able to create new todos. -## Build and connect to a database +## Step 2: Add Delete To-do functionality -The starter application already has pre-written code to give you a real-time feed of all todos and the ability to add new todos. Let's learn how to enhance the functionality with delete operations. +Let's learn how to enhance the functionality with delete operations. -First, clone your repository locally by following instructions on your GitHub repo page: +### 2a: Connect to the deployed branch database -```bash title="Terminal" showLineNumbers={false} -git clone https://github.com//gen2-starter.git -``` - -Next, install all dependencies in order to run the dev environment locally. +Navigate to the cloned repository and install all dependencies in order to run the dev environment locally. ```bash title="Terminal" showLineNumbers={false} cd gen2-starter npm install ``` -### Generate client configuration file for deployed environments - -Every app that uses the Amplify Backend needs a client configuration file **amplifyconfiguration.json**, which contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this client configuration file to connect to your Amplify Backend. +Next, run the following command in your Terminal: +```bash title="Terminal" showLineNumbers={false} +npx amplify generate config --app-id --branch main +``` **First time using AWS Amplify Gen 2 on your computer?** [Configure your AWS account to grant Amplify permissions locally](/[platform]/start/account-setup/). **Note:** If you already have an AWS profile with credentials on your local machine, and you have configured the corresponding AWS profile with the **AmplifyBackendDeployFullAccess** permission policy, you can skip this step. - First, find your application id in the Amplify console under **App Settings** > **General Settings** > **App ARN**. Select **ONLY** the portion after the final "/". -Next, run the following command in your Terminal: - -```bash title="Terminal" showLineNumbers={false} -npx amplify generate config --app-id --branch main -``` +A new **amplifyconfiguration.json** file should appear in your repository's root directory. Every app that uses the Amplify Backend needs a client configuration file **amplifyconfiguration.json**, which contains backend endpoint information, publicly-viewable API keys, authentication flow information, and more. The Amplify client library uses this client configuration file to connect to your Amplify Backend. Review how the configuration file is imported within the `main.tsx` file and passed into the `Amplify.configure(...)` function of the Amplify client library. -A new **amplifyconfiguration.json** file should appear in your repository's root directory. Review how the configuration file is imported within the `main.tsx` file and passed into the `Amplify.configure(...)` function of the Amplify client library. - - -### Add "delete todo" functionality +### 2b: Write UI code to implement "delete to-do" Go to the **src/App.tsx** file and add in a new `deleteTodo` functionality and pass function into the `
  • ` element's `onClick` handler. @@ -178,16 +176,9 @@ This should start a local dev server at http://localhost:5173. -Once everything works, push your latest changes to the Amplify-hosted URL by committing everything to git and push. - -```bash title="Terminal" showLineNumbers={false} -git commit -am "added delete functionality" -git push -u origin/main -``` -Amplify automatically deploys the latest version of your app based on your git commits. In just a few minutes, when the application rebuilds, the hosted URL will be updated to support the deletion functionality. -## Add authentication +## Step 3: Add login UI The starter application already has a pre-configured auth backend defined in the **amplify/auth/resource.ts** file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook. @@ -234,9 +225,22 @@ git commit -am "added authenticator" git push ``` -## Setup cloud sandbox for rapid fullstack iteration +## Step 4: Commit code to git + +Once everything works, push your latest changes to the Amplify-hosted URL by committing everything to git and push. + +```bash title="Terminal" showLineNumbers={false} +git commit -am "added delete functionality" +git push -u origin main +``` + +Amplify automatically deploys the latest version of your app based on your git commits. In just a few minutes, when the application rebuilds, the hosted URL will be updated to support the deletion functionality. + +## Step 5: Make backend updates + +### 5a: Deploy cloud sandbox environment -In the prior steps, we were working against our production-grade databases and authentication backend but **what if you want to work against an isolated backend environment purely used for development purposes?** +In the prior steps, we were working against our production `main` branch's databases and authentication backend but **what if you want to update your backend without impacting your production branch?** Amplify's cloud sandbox functionality creates a per-developer backend environment intended for your localhost development and testing workflows. This allows you to test and iterate without touching production backend data. @@ -254,7 +258,7 @@ The `npx amplify sandbox` command should run concurrently to your `npm run dev`. -## Configure authorization rules for your app data +### 5b: Update authorization rules for your app data The todos in the starter are currently shared across all users but in most cases you want data to be isolated on a per-user basis. @@ -322,6 +326,8 @@ git push Once your build completes in Amplify Hosting, the production backend will update to support the changes made within the cloud sandbox. The data in the cloud sandbox is fully isolated and won't pollute your production database. + + ## 🥳 Success That's it! You have successfully deployed your fullstack app on AWS Amplify. Here are a few next steps we encourage you to check out: