chore: weekly merge of next-release/dev into next-release/main (#…

…7175) * 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 <[email protected]> * Update build-a-backend.mdx * Update build-a-backend.mdx * Update build-a-backend.mdx --------- Co-authored-by: Kevin Old <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Revert "fix(flutter, js): scope "connect existing cdk" guide to respective pl…" (#6955) This reverts commit 5998b22. * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * chore: add unit tests for LinkCards and LinkCard components (#7006) Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for GetStartedPopover component (#7005) Co-authored-by: katiegoines <[email protected]> * fix: [Storage] Configure Access (#6948) Co-authored-by: Tim Nguyen <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef <[email protected]> * 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 <[email protected]> * Apply suggestions from code review Co-authored-by: josef <[email protected]> --------- Co-authored-by: josef <[email protected]> Co-authored-by: Kethan sai <[email protected]> * add storage trigger docs (#7020) * storage trigger docs * Apply suggestions from code review Co-authored-by: josef <[email protected]> * add storage access actions --------- Co-authored-by: josef <[email protected]> * 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 <[email protected]> Co-authored-by: katiegoines <[email protected]> Co-authored-by: Scott Rees <[email protected]> * custom examples (#6979) * custom examples * fix: broken link, missing / at start (#7026) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src/pages/[platform]/prev/build-a-backend/auth/add-social-provider/index.mdx Co-authored-by: josef <[email protected]> --------- Co-authored-by: josef <[email protected]> * chore: add unit tests for InternalLinkButton (#7000) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * chore: add unit tests for TOC (#6984) * chore: add unit tests for TOC * add code coverage * hardcode expected hash --------- Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for ExternalLink (#6915) * chore: add unit tests for ExternalLink * fixing tracking test --------- Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for ExternalLinkButton (#6914) * chore: add unit tests for ExternalLinkButton * Update ExternalLinkButton.test.tsx triggering checks --------- Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for Footer component (#6999) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * chore: add unit test for Overview component (#7002) Co-authored-by: katiegoines <[email protected]> * chore: upgrade docsearch/react to 3.6 (#7046) * added utility type content (#7047) * chore: add unit tests for PageLastUpdated (#7001) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src/pages/gen2/deploy-and-host/fullstack-branching/branch-deployments/index.mdx Co-authored-by: Scott Rees <[email protected]> --------- Co-authored-by: Scott Rees <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/define-storage/index.mdx Co-authored-by: Tim Nguyen <[email protected]> * 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 <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/copy-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/define-storage/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/define-storage/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/authorization/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/extend-with-cdk/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/extend-with-cdk/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/get-url/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/get-url/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/get-url/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/download-data/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/extend-with-cdk/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/lambda-triggers/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/download-files/index.mdx Co-authored-by: josef <[email protected]> * 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 <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/[platform]/build-a-backend/storage/list-files/index.mdx Co-authored-by: josef <[email protected]> --------- Co-authored-by: Tim Nguyen <[email protected]> Co-authored-by: josef <[email protected]> * 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 <[email protected]> * Update build-a-backend.mdx * Update build-a-backend.mdx * Update build-a-backend.mdx --------- Co-authored-by: Kevin Old <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Revert "fix(flutter, js): scope "connect existing cdk" guide to respective pl…" (#6955) This reverts commit 5998b22. * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * chore: add unit tests for LinkCards and LinkCard components (#7006) Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for GetStartedPopover component (#7005) Co-authored-by: katiegoines <[email protected]> * fix: [Storage] Configure Access (#6948) Co-authored-by: Tim Nguyen <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: Kethan sai <[email protected]> * Update src/pages/gen2/build-a-backend/data/custom-business-logic/index.mdx Co-authored-by: josef <[email protected]> * 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 <[email protected]> * Apply suggestions from code review Co-authored-by: josef <[email protected]> --------- Co-authored-by: josef <[email protected]> Co-authored-by: Kethan sai <[email protected]> * add storage trigger docs (#7020) * storage trigger docs * Apply suggestions from code review Co-authored-by: josef <[email protected]> * add storage access actions --------- Co-authored-by: josef <[email protected]> * 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 <[email protected]> Co-authored-by: katiegoines <[email protected]> Co-authored-by: Scott Rees <[email protected]> * custom examples (#6979) * custom examples * fix: broken link, missing / at start (#7026) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src/pages/[platform]/prev/build-a-backend/auth/add-social-provider/index.mdx Co-authored-by: josef <[email protected]> --------- Co-authored-by: josef <[email protected]> * chore: add unit tests for InternalLinkButton (#7000) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * chore: add unit tests for TOC (#6984) * chore: add unit tests for TOC * add code coverage * hardcode expected hash --------- Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for ExternalLink (#6915) * chore: add unit tests for ExternalLink * fixing tracking test --------- Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for ExternalLinkButton (#6914) * chore: add unit tests for ExternalLinkButton * Update ExternalLinkButton.test.tsx triggering checks --------- Co-authored-by: katiegoines <[email protected]> * chore: add unit tests for Footer component (#6999) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * chore: add unit test for Overview component (#7002) Co-authored-by: katiegoines <[email protected]> * chore: upgrade docsearch/react to 3.6 (#7046) * added utility type content (#7047) * chore: add unit tests for PageLastUpdated (#7001) Co-authored-by: katiegoines <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src/pages/gen2/deploy-and-host/fullstack-branching/branch-deployments/index.mdx Co-authored-by: Scott Rees <[email protected]> --------- Co-authored-by: Scott Rees <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Kevin Old <[email protected]> Co-authored-by: Jim Blanchard <[email protected]> Co-authored-by: Ankit Shah <[email protected]> Co-authored-by: katiegoines <[email protected]> Co-authored-by: Dan Kiuna <[email protected]> Co-authored-by: Kihara, Takuya <[email protected]> Co-authored-by: Tyler Roach <[email protected]> Co-authored-by: Tim Nguyen <[email protected]> Co-authored-by: Rene Brandel <[email protected]> Co-authored-by: Elijah Quartey <[email protected]> Co-authored-by: Heather Buchel <[email protected]> Co-authored-by: John Corser <[email protected]> Co-authored-by: Heather Pundt <[email protected]> Co-authored-by: Nikhil Swaminathan <[email protected]> Co-authored-by: Jay Raval <[email protected]> Co-authored-by: David McAfee <[email protected]> Co-authored-by: Kethan sai <[email protected]> Co-authored-by: Michael Law <[email protected]> Co-authored-by: erinleigh90 <[email protected]> Co-authored-by: Edward Foyle <[email protected]> Co-authored-by: Adi <[email protected]> Co-authored-by: Aditya Shahani <[email protected]> Co-authored-by: josef <[email protected]> Co-authored-by: jacoblogan <[email protected]> Co-authored-by: Jacob Logan <[email protected]> Co-authored-by: Scott Rees <[email protected]> Co-authored-by: Chris Bonifacio <[email protected]> Co-authored-by: Roshane Pascual <[email protected]> Co-authored-by: Charles Shin <[email protected]> Co-authored-by: Ujjwol Shrestha <[email protected]> Co-authored-by: Gen Tamura <[email protected]> Co-authored-by: dwittle <[email protected]> Co-authored-by: Anil Maktala <[email protected]> Co-authored-by: israx <[email protected]> Co-authored-by: Hui Zhao <[email protected]> Co-authored-by: Nairi Areg <[email protected]> Co-authored-by: spivakov83 <[email protected]> Co-authored-by: Harshita Daddala <[email protected]> Co-authored-by: derrik <[email protected]> Co-authored-by: derrik.fleming <[email protected]> Co-authored-by: Chris F <[email protected]> --------- Co-authored-by: Jim Eagan <[email protected]> Co-authored-by: Kevin Old <[email protected]> Co-authored-by: Jim Blanchard <[email protected]> Co-authored-by: Ankit Shah <[email protected]> Co-authored-by: katiegoines <[email protected]> Co-authored-by: Dan Kiuna <[email protected]> Co-authored-by: Kihara, Takuya <[email protected]> Co-authored-by: Tyler Roach <[email protected]> Co-authored-by: Tim Nguyen <[email protected]> Co-authored-by: Rene Brandel <[email protected]> Co-authored-by: Elijah Quartey <[email protected]> Co-authored-by: Heather Buchel <[email protected]> Co-authored-by: John Corser <[email protected]> Co-authored-by: Heather Pundt <[email protected]> Co-authored-by: Nikhil Swaminathan <[email protected]> Co-authored-by: Jay Raval <[email protected]> Co-authored-by: David McAfee <[email protected]> Co-authored-by: Kethan sai <[email protected]> Co-authored-by: Michael Law <[email protected]> Co-authored-by: erinleigh90 <[email protected]> Co-authored-by: Edward Foyle <[email protected]> Co-authored-by: Adi <[email protected]> Co-authored-by: Aditya Shahani <[email protected]> Co-authored-by: josef <[email protected]> Co-authored-by: jacoblogan <[email protected]> Co-authored-by: Jacob Logan <[email protected]> Co-authored-by: Scott Rees <[email protected]> Co-authored-by: Chris Bonifacio <[email protected]> Co-authored-by: Roshane Pascual <[email protected]> Co-authored-by: Charles Shin <[email protected]> Co-authored-by: Ujjwol Shrestha <[email protected]> Co-authored-by: Gen Tamura <[email protected]> Co-authored-by: dwittle <[email protected]> Co-authored-by: Anil Maktala <[email protected]> Co-authored-by: israx <[email protected]> Co-authored-by: Hui Zhao <[email protected]> Co-authored-by: Nairi Areg <[email protected]> Co-authored-by: spivakov83 <[email protected]> Co-authored-by: Harshita Daddala <[email protected]> Co-authored-by: derrik <[email protected]> Co-authored-by: derrik.fleming <[email protected]> Co-authored-by: Chris F <[email protected]> --------- Co-authored-by: Nikhil Swaminathan <[email protected]> Co-authored-by: Rene Brandel <[email protected]> Co-authored-by: Jim Eagan <[email protected]> Co-authored-by: Kevin Old <[email protected]> Co-authored-by: Jim Blanchard <[email protected]> Co-authored-by: Ankit Shah <[email protected]> Co-authored-by: katiegoines <[email protected]> Co-authored-by: Dan Kiuna <[email protected]> Co-authored-by: Kihara, Takuya <[email protected]> Co-authored-by: Tyler Roach <[email protected]> Co-authored-by: Tim Nguyen <[email protected]> Co-authored-by: Rene Brandel <[email protected]> Co-authored-by: Elijah Quartey <[email protected]> Co-authored-by: Heather Buchel <[email protected]> Co-authored-by: John Corser <[email protected]> Co-authored-by: Heather Pundt <[email protected]> Co-authored-by: Nikhil Swaminathan <[email protected]> Co-authored-by: Jay Raval <[email protected]> Co-authored-by: David McAfee <[email protected]> Co-authored-by: Kethan sai <[email protected]> Co-authored-by: Michael Law <[email protected]> Co-authored-by: erinleigh90 <[email protected]> Co-authored-by: Edward Foyle <[email protected]> Co-authored-by: Adi <[email protected]> Co-authored-by: Aditya Shahani <[email protected]> Co-authored-by: josef <[email protected]> Co-authored-by: jacoblogan <[email protected]> Co-authored-by: Jacob Logan <[email protected]> Co-authored-by: Scott Rees <[email protected]> Co-authored-by: Chris Bonifacio <[email protected]> Co-authored-by: Roshane Pascual <[email protected]> Co-authored-by: Charles Shin <[email protected]> Co-authored-by: Ujjwol Shrestha <[email protected]> Co-authored-by: Gen Tamura <[email protected]> Co-authored-by: dwittle <[email protected]> Co-authored-by: Anil Maktala <[email protected]> Co-authored-by: israx <[email protected]> Co-authored-by: Hui Zhao <[email protected]> Co-authored-by: Nairi Areg <[email protected]> Co-authored-by: spivakov83 <[email protected]> Co-authored-by: Harshita Daddala <[email protected]> Co-authored-by: derrik <[email protected]> Co-authored-by: derrik.fleming <[email protected]> Co-authored-by: Chris F <[email protected]>
aws-amplify · Apr 6, 2024 · c80a21d · c80a21d
1 parent ef4df85
commit c80a21d
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 110 deletions.
diff --git 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
@@ -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
@@ -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 `<App />` component with the following:
 
-<Callout>
+```jsx
+<ThemeProvider>
+  <App />
+</ThemeProvider>
+```
 
-**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:
 
-</Callout>
+```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 <TodoCreateForm />;
+}
+
+export default App;
+```
diff --git 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.
+<InlineFilter filters={["javascript", "nextjs", "react"]}>
+* **Tooling** that generates React forms over data, and React components from Figma designs.
+</InlineFilter>
 
 <Overview childPageNodes={props.childPageNodes} />
+
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
@@ -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
 <ExternalLinkButton
-  size="large"
+  size="medium"
   href='https://github.com/new?template_name=gen2-starter-option-2&template_owner=renebrandel&name=gen2-starter&description=My%20Amplify%20Gen%202%20starter%20application'
 >
 <IconGithub />
-Use starter template
+Create repository from template
 </ExternalLinkButton>
 
-Next, go to the AWS Amplify console to deploy the application.
+### 1b: Deploy starter to Amplify
 
 <ExternalLinkButton
-  size="large"
+  size="medium"
   href='https://us-east-1.console.aws.amazon.com/amplify/create/repo-branch'
 >
 <IconAmplify />
-Deploy starter template
+Deploy to Amplify
 </ExternalLinkButton>
 
 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,
   <source src="/images/gen2/getting-started/react/deploy.mp4" />
 </video>
 
-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
 
-<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
-  <source src="/images/gen2/getting-started/react/hosted-app.mp4" />
-</video>
+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/<github-user>/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,32 +84,39 @@ 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:
+<video autoPlay={true} muted={true} loop={true} width="100%" playsInline={true}>
+  <source src="/images/gen2/getting-started/react/hosted-app.mp4" />
+</video>
 
-```bash title="Terminal" showLineNumbers={false}
-git clone https://github.com/<github-user>/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. 
 
 <Callout info>
 
 **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.
 
 </Callout>
 
-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`.
 
 </Callout>
 
-## 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 `<li>` element's `onClick` handler.
 
@@ -245,16 +241,8 @@ Try out the deletion functionality now on your localhost.
   <source src="/images/gen2/getting-started/react/demo-delete.mp4" />
 </video>
 
-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.