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: