Skip to content

Commit 2d8d7b8

Browse files
wrpeckwrpeck
authored
Merge pull request aws-amplify#5341 from aws-amplify/wrpeck/studio-login-improvement
Wrpeck/studio login improvement
2 parents 58a8065 + 66a8f0e commit 2d8d7b8

File tree

1 file changed

+88
-51
lines changed

1 file changed

+88
-51
lines changed

‎src/pages/console/adminui/start.mdx‎

Lines changed: 88 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,60 +7,97 @@ AWS Amplify Studio is a visual development environment for building fullstack we
77

88
Amplify Studio is available in the following regions: [Amplify Studio service endpoints](https://docs.aws.amazon.com/general/latest/gr/amplify.html#amplifyadmin_region).
99

10-
You can get started with or without an AWS account. Without an AWS account, you can begin modeling data for your backend and testing it locally. If you choose to create an AWS account and deploy your backend in the AWS Amplify console, an expanded set of features becomes available for configuring your backend environment.
11-
12-
## Get started without an AWS account
13-
14-
If you are new to AWS, you don't need an AWS account to get started. You can still model and test your data before deploying to the cloud. After building your data model, you must connect an AWS account to deploy your backend environment to Amplify using Amplify Studio. The sandbox interface lets you perform the following tasks:
15-
* Set up your data model. For instructions on creating models and setting relationships, see [Data modeling in Amplify Studio](/console/data/data-model#Data-modeling-in-the-Admin-UI).
16-
* Test your new data model locally.
17-
* Deploy your backend to the cloud. This requires an AWS account.
18-
19-
<Card
20-
external
21-
href="https://sandbox.amplifyapp.com/"
22-
containertag="amplify-external-link"
23-
>
24-
<CardGraphic alt="Amplify Studio logo" src="/images/console/adminui.svg" />
25-
<CardDetail>
26-
<h4>Launch Sandbox</h4>
27-
<p>Get started without an AWS account</p>
28-
</CardDetail>
29-
</Card>
30-
31-
## Get started with your AWS account
32-
33-
If you already have an AWS account and you want to skip the sandbox experience, deploy Amplify Studio to start using all Amplify features, including DataStore, user authentication and authorization, and file storage. After you deploy a backend in Amplify, you can launch Amplify Studio from your Amplify project. Your entire team can use Studio to add new features, update app data, and manage users and groups.
34-
35-
<Card
36-
external
37-
href="https://console.aws.amazon.com/amplify/home?#/deploy-backend"
38-
containertag="amplify-external-link"
39-
>
40-
<CardGraphic alt="Amplify logo" src="/assets/logo-dark.svg" />
41-
<CardDetail>
42-
<h4>Log in to AWS console</h4>
43-
<p>Get started in the AWS Amplify console</p>
44-
</CardDetail>
45-
</Card>
46-
47-
### To get started with a new Amplify project
48-
1. Sign in to the AWS Management Console and open AWS Amplify. Choose **Create app backend**.
49-
2. Enter a name for your app and choose **Confirm deployment**. This deploys a default **staging** backend environment.
50-
3. On the application information page, choose the **Backend environments** tab.
51-
4. Choose **Launch Studio**. This automatically logs you in to Amplify Studio.
52-
53-
If you already have an existing backend environment, you can enable Amplify Studio from the console.
54-
55-
### To get started from an existing Amplify project
56-
57-
1. Sign in to the AWS Management Console and open AWS Amplify. Or, enter `amplify console` from the Amplify Command Line Interface (CLI).
58-
2. In the navigation pane, choose **Amplify Studio settings**.
59-
3. Turn on **Enable Amplify Studio**.
60-
4. In the **Backend environments** section, choose **Launch Studio**. This automatically logs you in to Amplify Studio where you can use all the Studio capabilities.
10+
## Quick Start Guide
11+
12+
<BlockSwitcher>
13+
14+
<Block name="Build without an AWS account">
15+
16+
If you are new to AWS, you don't need an account to get started. Visit the [Amplify Studio Sandbox](https://sandbox.amplifyapp.com/), where you can model your data and build React forms, all without logging into AWS.
17+
18+
<InternalLinkButton href="https://sandbox.amplifyapp.com/">
19+
<span slot="text">Explore the Sandbox</span>
20+
</InternalLinkButton>
21+
22+
</Block>
23+
24+
<Block name="Create an AWS account">
25+
26+
To use all of Amplify Studio's functionality, you will need an AWS account. You can take advantage of the [AWS free tier]("https://aws.amazon.com/free") to get started with no cost.
27+
28+
<InternalLinkButton href="https://portal.aws.amazon.com/gp/aws/developer/registration/index.html?refid=78b916d7-7c94-4cab-98d9-0ce5e648dd5f">
29+
<span slot="text">Create an AWS Account</span>
30+
</InternalLinkButton>
31+
32+
</Block>
33+
34+
<Block name="Build a fullstack app">
35+
36+
If you already have an AWS account, you can begin using all of Amplify Studio's features. [Log into the AWS console]("https://console.aws.amazon.com/console/home"), and click the button below to create a new project in Amplify Studio
37+
38+
<InternalLinkButton href="https://console.aws.amazon.com/amplify/home?#/deploy-backend">
39+
<span slot="text">Create New Project</span>
40+
</InternalLinkButton>
41+
42+
Next, follow these steps to deploy and launch Amplify Studio:
43+
1. Enter a name for your app and choose **Confirm deployment**.
44+
1. After your app deployment is complete, select the **Backend environments** tab.
45+
1. Select **Launch Studio**. This automatically launches Amplify Studio in a new tab.
46+
47+
</Block>
48+
49+
</BlockSwitcher>
50+
51+
## Logging In and Creating an App
52+
53+
### Log into the Amplify Console
54+
The Amplify Console is where you build, manage, and host your Amplify applications. To log in, take the following steps:
55+
1. [Log into the AWS console]("https://console.aws.amazon.com/console/home")
56+
1. Search for **AWS Amplify** in the console
57+
1. Select **AWS Amplify** to open the Amplify Console
58+
59+
Alternatively, [click here to go straight to the Amplify Console]("https://console.aws.amazon.com/amplify/home")
60+
61+
### Create a new Studio app
62+
To create a new Studio app, first log into the [Amplify Console]("https://console.aws.amazon.com/amplify/home"). Once you've logged in, you can create a new app using the following steps:
63+
64+
*If you have no apps in this region...*
65+
1. Scroll to the bottom of the page
66+
1. In the Amplify Studio section, select ["Get started"]("https://console.aws.amazon.com/amplify/home?#/deploy-backend")
67+
1. Name your app, and select **Confirm Deployment**
68+
69+
*If you already have apps in this region...*
70+
1. Select **New app** in the upper right-hand corner
71+
1. Select **Build an app** from the dropdown menu
72+
1. Name your app, and select **Confirm Deployment**
73+
74+
### Launch Studio
75+
To launch Amplify Studio for your app, take the following steps:
76+
1. Log into the [AWS Amplify Console](https://console.aws.amazon.com/amplify/home)
77+
1. Select your app from the list of apps
78+
1. Select the **Backend environments** tab
79+
1. Select **Launch Studio**
80+
81+
<Callout info>
82+
83+
**Is your app missing from the list?** Make sure the correct region is selected in the upper right-hand corner
84+
85+
</Callout>
86+
87+
### Add Studio to an existing project
88+
If you have [created a new Amplify project through the CLI](/cli/start/workflows/#initialize-new-project), Studio will need to be activated before it can be launched. Use the following steps:
89+
1. Navigate to the [AWS Amplify Console]("https://console.aws.amazon.com/amplify/home")
90+
1. Select your app from the list of apps
91+
1. Select the **Backend environments** tab
92+
1. Select **Set up Amplify Studio**
93+
1. Toggle **Enable Amplify Studio** from Off to On
94+
1. After Studio has been successfully provisioned, navigate back your app's information page
95+
1. Select **Launch Studio** to open Studio in a new browser tab
96+
6197

6298
## Next steps
6399

64100
You are ready to start creating and managing your application's backend in Amplify Studio. Recommended next steps:
65101
* [Build a data model](/console/data/data-model)
66102
* [Create UI components in Figma](/console/uibuilder/figmatocode/)
103+
* [Invite your team members to collaborate](access-management/)

0 commit comments

Comments
 (0)