Skip to content

add deploy app option in getting started only for web developers #8281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 11, 2025
Merged

add deploy app option in getting started only for web developers #8281

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e37c686
add deploy app option in getting started only for web developers
hdworld11 Mar 11, 2025
6179e19
update text and change how amplify works to next/link component
hdworld11 Mar 11, 2025
6708dab
update test for GetStartedPopover
hdworld11 Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/GetStartedPopover/GetStartedPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
</InternalLinkButton>
<Popover>
<Popover.Trigger
Expand Down
106 changes: 52 additions & 54 deletions src/pages/[platform]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { FeatureList, FeatureItem } from '@/components/FeatureLists';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
import { InternalLinkButton } from '@/components/InternalLinkButton';
import { ExternalLinkButton } from '@/components/ExternalLinkButton';

import {
GetStartedPopover,
generateGetStartedLinks
Expand Down Expand Up @@ -58,6 +60,7 @@ const Gen2Overview = () => {
currentPlatform
);
const isFlutter = currentPlatform == 'flutter';
const isReactNative = currentPlatform == 'react-native';

return (
<Flex className="home-content">
Expand All @@ -72,7 +75,7 @@ const Gen2Overview = () => {
your Flutter applications to the cloud for data modeling,
authentication, storage, serverless functions, and more.
</Text>
) : isMobilePlatform ? (
) : isMobilePlatform || isReactNative ? (
<Text className="home-intro__text">
AWS Amplify is everything mobile developers need to develop
cloud-powered fullstack applications without hassle. Easily connect
Expand All @@ -81,33 +84,52 @@ const Gen2Overview = () => {
</Text>
) : (
<Text className="home-intro__text">
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.
<br></br>
<br></br>
You can build a fullstack app using Amplify backend building
capabilities and deploy your web app using Amplify Hosting.
</Text>
)}
<Flex className="home-cta">
<GetStartedPopover
platform={currentPlatform}
getStartedLinks={generateGetStartedLinks(gen2GetStartedHref)}
/>
<InternalLinkButton
size="large"
{isMobilePlatform || isReactNative ? (
<InternalLinkButton
size="large"
href={{
pathname: gen2HowAmplifyWorksPathname,
query: { platform: currentPlatform }
}}
>
How Amplify Works
<IconChevron
aria-hidden="true"
className="icon-rotate-270"
fontSize=".875em"
/>
</InternalLinkButton>
) : (
<ExternalLinkButton
size="large"
href="https://console.aws.amazon.com/amplify/create/repo-branch"
>
Deploy your app
</ExternalLinkButton>
)}
</Flex>
{!isMobilePlatform && !isReactNative && (
<FeatureItem
linkText="How Amplify works >"
href={{
pathname: gen2HowAmplifyWorksPathname,
pathname: '/[platform]/how-amplify-works/concepts/',
query: { platform: currentPlatform }
}}
>
How Amplify Works
<IconChevron
aria-hidden="true"
className="icon-rotate-270"
fontSize=".875em"
/>
</InternalLinkButton>
</Flex>
></FeatureItem>
)}
</Flex>
<Flex className="home-section">
<Heading level={2}>
Expand Down Expand Up @@ -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&apos;s frontend and backend. Get
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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.
Expand All @@ -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,
Expand All @@ -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,
Expand Down
Loading
Loading