From e37c686f2e35db6e312f7a45b9b31d5a69c9b0b9 Mon Sep 17 00:00:00 2001 From: Harshita Daddala Date: Mon, 10 Mar 2025 21:03:49 -0400 Subject: [PATCH 1/3] add deploy app option in getting started only for web developers --- .../GetStartedPopover/GetStartedPopover.tsx | 4 +- src/pages/[platform]/index.tsx | 106 +++++++++--------- src/pages/index.tsx | 80 +++++-------- 3 files changed, 84 insertions(+), 106 deletions(-) diff --git a/src/components/GetStartedPopover/GetStartedPopover.tsx b/src/components/GetStartedPopover/GetStartedPopover.tsx index 1c2603c08b1..94f40bd03bd 100644 --- a/src/components/GetStartedPopover/GetStartedPopover.tsx +++ b/src/components/GetStartedPopover/GetStartedPopover.tsx @@ -37,7 +37,9 @@ export const GetStartedPopover = ({ query: { platform: platform } }} > - Get started + {['swift', 'android', 'flutter', 'react-native'].includes(platform) + ? 'Get started' + : 'Build a new app'} { currentPlatform ); const isFlutter = currentPlatform == 'flutter'; + const isReactNative = currentPlatform == 'react-native'; return ( @@ -72,7 +75,7 @@ const Gen2Overview = () => { your Flutter applications to the cloud for data modeling, authentication, storage, serverless functions, and more. - ) : isMobilePlatform ? ( + ) : isMobilePlatform || isReactNative ? ( AWS Amplify is everything mobile developers need to develop cloud-powered fullstack applications without hassle. Easily connect @@ -81,11 +84,12 @@ const Gen2Overview = () => { ) : ( - AWS Amplify is everything frontend developers need to develop and - deploy cloud-powered fullstack applications without hassle. Easily - connect your frontend to the cloud for data modeling, - authentication, storage, serverless functions, SSR app deployment, - and more. + AWS Amplify is everything you need to build web and mobile apps. + Easy to start, easy to scale. +

+

+ You can build a fullstack app using Amplify backend building + capabilities and deploy your web app using Amplify Hosting. )} @@ -93,21 +97,39 @@ const Gen2Overview = () => { platform={currentPlatform} getStartedLinks={generateGetStartedLinks(gen2GetStartedHref)} /> - + How Amplify Works + + ) : ( + + Deploy your app + + )} + + {!isMobilePlatform && !isReactNative && ( + - How Amplify Works - + > + )} @@ -186,9 +208,7 @@ const Gen2Overview = () => { href={{ pathname: '/[platform]/how-amplify-works/concepts', hash: 'build-fullstack-apps-with-typescript', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Write TypeScript across your app's frontend and backend. Get @@ -201,9 +221,7 @@ const Gen2Overview = () => { linkText="Generate and use your data without hassle" href={{ pathname: '/[platform]/build-a-backend/data/set-up-data/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Use TypeScript to define your data and let us handle the model and @@ -214,9 +232,7 @@ const Gen2Overview = () => { linkText="Real-time data for modern apps" href={{ pathname: '/[platform]/build-a-backend/data/set-up-data/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Sync frontend state to real-time backend updates. Just write @@ -227,9 +243,7 @@ const Gen2Overview = () => { linkText="Authn and authz for secure apps" href={{ pathname: '/[platform]/build-a-backend/auth/set-up-auth/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Choose the auth strategy (such as passwords, social, email links) @@ -240,9 +254,7 @@ const Gen2Overview = () => { linkText="Auto-generate CRUD forms wired to data" href={{ pathname: '/[platform]/build-ui/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Map CRUD forms to your data model with form-level validations and @@ -272,9 +284,7 @@ const Gen2Overview = () => { linkText="SSR/SSG/ISR hosting support" href={{ pathname: '/[platform]/deploy-and-host/hosting/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Deploy Next.js, Nuxt, React, Vue.js, Angular (and more) apps by @@ -286,9 +296,7 @@ const Gen2Overview = () => { href={{ pathname: '/[platform]/deploy-and-host/sandbox-environments/setup/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Per-developer cloud sandboxes provide high fidelity and faster @@ -299,9 +307,7 @@ const Gen2Overview = () => { href={{ pathname: '/[platform]/deploy-and-host/fullstack-branching/branch-deployments/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Fullstack deployments from your Git branch. Autodeploy Git branches @@ -312,9 +318,7 @@ const Gen2Overview = () => { href={{ pathname: '/[platform]/how-amplify-works/concepts', hash: 'unified-management-console', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Manage your app data, users and groups, and files in a single @@ -327,9 +331,7 @@ const Gen2Overview = () => { linkText="Add any AWS service with CDK" href={{ pathname: '/[platform]/build-a-backend/add-aws-services/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Extend or customize with the AWS CDK to access 200+ AWS services. @@ -339,9 +341,7 @@ const Gen2Overview = () => { href={{ pathname: '/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Use your own pipelines to set up cross-account or multi-region, @@ -352,9 +352,7 @@ const Gen2Overview = () => { href={{ pathname: '/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/', - query: { - platform: currentPlatform - } + query: { platform: currentPlatform } }} > Enable support for all types of fullstack team workflows: monorepos, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3c6d25e3819..7c6793ea5f5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,10 +4,8 @@ import { GetStartedPopover, generateGetStartedLinks } from '@/components/GetStartedPopover'; -import { IconChevron } from '@/components/Icons'; import { Video } from '@/components/Video'; import { DEFAULT_PLATFORM } from '@/data/platforms'; -import { InternalLinkButton } from '@/components/InternalLinkButton'; import { FeatureItem, FeatureList } from '@/components/FeatureLists'; import { MDXCode } from '@/components/MDXComponents'; import { Columns } from '@/components/Columns'; @@ -16,6 +14,7 @@ import { gen2GetStartedHref, gen2HowAmplifyWorksPathname } from '@/data/index-page-data'; +import { ExternalLinkButton } from '@/components/ExternalLinkButton'; const meta = { title: 'Amplify Documentation', @@ -44,31 +43,32 @@ export default function Page() { Amplify Documentation - AWS Amplify is everything frontend developers need to develop and - deploy cloud-powered fullstack applications without hassle. Easily - connect your frontend to the cloud for data modeling, authentication, - storage, serverless functions, SSR app deployment, and more. + AWS Amplify is everything you need to build web and mobile apps. Easy + to start, easy to scale. +

+

+ You can build a fullstack app using Amplify backend building + capabilities and deploy your web app using Amplify Hosting. - - How Amplify Works - + Deploy your app + + @@ -130,9 +130,7 @@ export default function Page() { href={{ pathname: '/[platform]/how-amplify-works/concepts', hash: 'build-fullstack-apps-with-typescript', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Write TypeScript across your app&pos;s frontend and backend. Get @@ -143,9 +141,7 @@ export default function Page() { linkText="Real-time data for modern apps" href={{ pathname: '/[platform]/build-a-backend/data/set-up-data/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Sync frontend state to real-time backend updates. Just write @@ -155,9 +151,7 @@ export default function Page() { linkText="Authn and authz for secure apps" href={{ pathname: '/[platform]/build-a-backend/auth/set-up-auth/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Choose the auth strategy (such as passwords, social, email links) @@ -167,9 +161,7 @@ export default function Page() { linkText="Auto-generate CRUD forms wired to data" href={{ pathname: '/[platform]/build-ui/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Map CRUD forms to your data model with form-level validations and @@ -197,9 +189,7 @@ export default function Page() { linkText="SSR/SSG/ISR hosting support" href={{ pathname: '/[platform]/deploy-and-host/hosting/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Deploy Next.js, Nuxt, React, Vue.js, Angular (and more) apps by @@ -210,9 +200,7 @@ export default function Page() { href={{ pathname: '/[platform]/deploy-and-host/sandbox-environments/setup/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Per-developer cloud sandboxes provide high fidelity and faster @@ -223,9 +211,7 @@ export default function Page() { href={{ pathname: '/[platform]/deploy-and-host/fullstack-branching/branch-deployments/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Fullstack deployments from your Git branch. Autodeploy Git branches @@ -236,9 +222,7 @@ export default function Page() { href={{ pathname: '/[platform]/how-amplify-works/concepts', hash: 'unified-management-console', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Manage your app data, users and groups, and files in a single @@ -251,9 +235,7 @@ export default function Page() { linkText="Add any AWS service with CDK" href={{ pathname: '/[platform]/build-a-backend/add-aws-services/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Extend or customize with the AWS CDK to access 200+ AWS services. @@ -263,9 +245,7 @@ export default function Page() { href={{ pathname: '/[platform]/deploy-and-host/fullstack-branching/custom-pipelines/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Use your own pipelines to set up cross-account or multi-region, @@ -276,9 +256,7 @@ export default function Page() { href={{ pathname: '/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/', - query: { - platform: DEFAULT_PLATFORM - } + query: { platform: DEFAULT_PLATFORM } }} > Enable support for all types of fullstack team workflows: monorepos, From 6179e199af9741d5d65d303ac839bc3320c24548 Mon Sep 17 00:00:00 2001 From: Harshita Daddala Date: Tue, 11 Mar 2025 11:04:05 -0400 Subject: [PATCH 2/3] update text and change how amplify works to next/link component --- src/pages/[platform]/index.tsx | 23 ++++++++++++++++++----- src/pages/index.tsx | 8 +++++--- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/pages/[platform]/index.tsx b/src/pages/[platform]/index.tsx index 54831f764fc..7bafbec1172 100644 --- a/src/pages/[platform]/index.tsx +++ b/src/pages/[platform]/index.tsx @@ -1,5 +1,6 @@ import { Heading, Text, Flex, Card } from '@aws-amplify/ui-react'; import ExportedImage from 'next-image-export-optimizer'; +import Link from 'next/link'; import { MDXCode } from '@/components/MDXComponents/'; import { IconChevron } from '@/components/Icons'; import { Video } from '@/components/Video'; @@ -61,6 +62,7 @@ const Gen2Overview = () => { ); const isFlutter = currentPlatform == 'flutter'; const isReactNative = currentPlatform == 'react-native'; + const isNextJs = currentPlatform == 'nextjs'; return ( @@ -82,6 +84,16 @@ const Gen2Overview = () => { your cross-platform applications to the cloud for data modeling, authentication, storage, serverless functions, and more. + ) : isNextJs ? ( + + AWS Amplify is everything you need to build web and mobile apps. + Easy to start, easy to scale. +

+

+ You can build a fullstack app using Amplify backend building + capabilities, or you can deploy your React and Next.js web apps + using Amplify Hosting. + ) : ( AWS Amplify is everything you need to build web and mobile apps. @@ -89,7 +101,7 @@ const Gen2Overview = () => {



You can build a fullstack app using Amplify backend building - capabilities and deploy your web app using Amplify Hosting. + capabilities, or you can deploy your web app using Amplify Hosting. )} @@ -122,13 +134,14 @@ const Gen2Overview = () => { )} {!isMobilePlatform && !isReactNative && ( - + > + How Amplify works > + )} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7c6793ea5f5..8fe03982ee4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,6 +10,7 @@ import { FeatureItem, FeatureList } from '@/components/FeatureLists'; import { MDXCode } from '@/components/MDXComponents'; import { Columns } from '@/components/Columns'; import ExportedImage from 'next-image-export-optimizer'; +import Link from 'next/link'; import { gen2GetStartedHref, gen2HowAmplifyWorksPathname @@ -62,13 +63,14 @@ export default function Page() { Deploy your app - + > + How Amplify works > + From 6708dab5fe9be775488767ab6945851873bb32ed Mon Sep 17 00:00:00 2001 From: Harshita Daddala Date: Tue, 11 Mar 2025 13:02:04 -0400 Subject: [PATCH 3/3] update test for GetStartedPopover --- .../__tests__/GetStartedPopover.test.tsx | 77 ++++++++----------- 1 file changed, 31 insertions(+), 46 deletions(-) diff --git a/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx b/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx index acebf8f9dc1..3cf7b1360c1 100644 --- a/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx +++ b/src/components/GetStartedPopover/__tests__/GetStartedPopover.test.tsx @@ -16,10 +16,7 @@ import { const routerMock = { __esModule: true, useRouter: () => { - return { - query: { platform: 'react' }, - asPath: '/' - }; + return { query: { platform: 'react' }, asPath: '/' }; } }; @@ -32,82 +29,55 @@ describe('GetStartedPopover', () => { const getStartedLinks = [ { title: 'React', - href: { - pathname: getStartedHref, - query: { platform: 'react' } - }, + href: { pathname: getStartedHref, query: { platform: 'react' } }, icon: , platform: 'react' }, { title: 'JavaScript', - href: { - pathname: getStartedHref, - query: { platform: 'javascript' } - }, + href: { pathname: getStartedHref, query: { platform: 'javascript' } }, icon: , platform: 'javascript' }, { title: 'Flutter', - href: { - pathname: getStartedHref, - query: { platform: 'flutter' } - }, + href: { pathname: getStartedHref, query: { platform: 'flutter' } }, icon: , platform: 'flutter' }, { title: 'Swift', - href: { - pathname: getStartedHref, - query: { platform: 'swift' } - }, + href: { pathname: getStartedHref, query: { platform: 'swift' } }, icon: , platform: 'swift' }, { title: 'Android', - href: { - pathname: getStartedHref, - query: { platform: 'android' } - }, + href: { pathname: getStartedHref, query: { platform: 'android' } }, icon: , platform: 'android' }, { title: 'React Native', - href: { - pathname: getStartedHref, - query: { platform: 'react-native' } - }, + href: { pathname: getStartedHref, query: { platform: 'react-native' } }, icon: , platform: 'react-native' }, { title: 'Angular', - href: { - pathname: getStartedHref, - query: { platform: 'angular' } - }, + href: { pathname: getStartedHref, query: { platform: 'angular' } }, icon: , platform: 'angular' }, { title: 'Next.js', - href: { - pathname: getStartedHref, - query: { platform: 'nextjs' } - }, + href: { pathname: getStartedHref, query: { platform: 'nextjs' } }, icon: , platform: 'nextjs' }, { title: 'Vue', - href: { - pathname: getStartedHref, - query: { platform: 'vue' } - }, + href: { pathname: getStartedHref, query: { platform: 'vue' } }, icon: , platform: 'vue' } @@ -131,6 +101,24 @@ describe('GetStartedPopover', () => { it('should render the GetStartedPopover component', async () => { render(component); + const gettingStartedBtn = await screen.findByRole('link', { + name: 'Build a new app' + }); + + expect(gettingStartedBtn).toBeInTheDocument(); + }); + + const mobileComponent = ( + + ); + + it('should render the GetStartedPopover mobile frameworks', async () => { + render(mobileComponent); + const gettingStartedBtn = await screen.findByRole('link', { name: 'Get started' }); @@ -142,7 +130,7 @@ describe('GetStartedPopover', () => { render(component); const popoverNode = await screen.findByRole('link', { - name: 'Get started' + name: 'Build a new app' }); expect(popoverNode.getAttribute('href')).toContain( '/react/start/quickstart' @@ -244,10 +232,7 @@ describe('GetStartedPopover', () => { }); routerMock.useRouter = () => { - return { - query: { platform: 'vue' }, - asPath: '/gen1' - }; + return { query: { platform: 'vue' }, asPath: '/gen1' }; }; const gen1GetStartedPopover = ( @@ -260,7 +245,7 @@ describe('GetStartedPopover', () => { render(gen1GetStartedPopover); const popoverNode = await screen.findByRole('link', { - name: 'Get started' + name: 'Build a new app' }); expect(popoverNode.getAttribute('href')).toContain(