### Run Example App Development Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/README.md Execute this command from the monorepo root to start the development server for your example application. Ensure you have the necessary dependencies installed. ```bash yarn {react,react-native,vue,angular}-example dev ``` -------------------------------- ### Build and Install Example App for iOS Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Builds and installs the React Native example app onto the iOS simulator or device. ```bash yarn react-native-example ios ``` -------------------------------- ### Installation Guide Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Instructions for installing the latest versions of `@aws-amplify/ui-react` and `aws-amplify`. ```APIDOC ## Installation Install the 6.x version of both `@aws-amplify/ui-react` and `aws-amplify`. **Note:** The 6.x version of `@aws-amplify/ui-react` has a minimum dependency of 6.x on `aws-amplify`. `aws-amplify@6` introduced breaking API changes. ### npm ```bash npm install @aws-amplify/ui-react@6.x aws-amplify@6.x ``` ### yarn ```bash yarn add @aws-amplify/ui-react@6.x aws-amplify@6.x ``` ``` -------------------------------- ### Build and Install Example App for Android Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Builds and installs the React Native example app onto the Android emulator or device. ```bash yarn react-native-example android ``` -------------------------------- ### Start Example App Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Command to start the example application in development mode. This should be run in a separate terminal from the command used to open the app via URI. ```sh yarn workspace @aws-amplify/ui-react-native-example dev ``` -------------------------------- ### Set Up Local Environment for Docs Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/README.md Copy the example environment file to start local development. The values in the .env file are not critical for local testing unless the search functionality is being used. ```sh cp ./docs/.env.example ./docs/.env ``` -------------------------------- ### Setup Project Dependencies Source: https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md Install project dependencies using yarn. This command should be run after cloning the repository and setting up Node.js. ```bash yarn setup ``` -------------------------------- ### Setup MegaApp Step by Step: Run Build Source: https://github.com/aws-amplify/amplify-ui/blob/main/build-system-tests/README.md Commands to execute the build process for a MegaApp. This step compiles the application after dependencies have been installed and files are in place. ```sh $ ./mega-app-build.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest --pkg-manager npm ``` ```sh $ ./mega-app-build.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest -P npm ``` ```sh $ ./mega-app-build.sh -n react-latest-next-latest-node-18-ts ``` -------------------------------- ### Setup MegaApp Step by Step: Install Dependencies Source: https://github.com/aws-amplify/amplify-ui/blob/main/build-system-tests/README.md Commands to install dependencies for a MegaApp using a specified package manager. The `-P` flag indicates the package manager (e.g., `npm`), and `-p` specifies the version. ```sh $ ./mega-app-install.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest --pkg-manager npm ``` ```sh $ ./mega-app-install.sh -B next -b latest -l typescript -n react-latest-next-latest-node-18-ts -F react -f latest -P npm -p latest ``` ```sh $ ./mega-app-install.sh -n react-latest-next-latest-node-18-ts ``` -------------------------------- ### Run React Native Example App in Dev Mode Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Starts the React Native example app in development mode, allowing for live updates. Ensure all dependency dev commands are run first. ```bash yarn react-native-example dev ``` -------------------------------- ### Install CocoaPod Dependencies for iOS Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Execute this command to install the CocoaPod dependencies required for the iOS version of the example app. ```bash yarn react-native-example ios:pod-install ``` -------------------------------- ### Start Vue Development Server Source: https://github.com/aws-amplify/amplify-ui/blob/main/packages/vue/CONTRIBUTING.md Run this command to start building `@aws-amplify/ui-vue` in watch mode. Use the `examples/vue` directory to test your changes. ```bash yarn vue dev ``` -------------------------------- ### Start the Docs Development Server Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/README.md Command to start the local development server for the Amplify UI documentation. ```sh $ yarn docs start ``` -------------------------------- ### Install Dependencies and Build Packages Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Run this command from the monorepo root to install all project dependencies and build the necessary packages before proceeding with app installation. ```bash yarn && yarn build ``` -------------------------------- ### Example Usage of Custom File Preview Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx This example demonstrates how to integrate custom file preview configurations within the Storage Browser component. ```jsx import { StorageBrowser } from '@aws-amplify/ui-react'; function App() { return ( ); } ``` -------------------------------- ### Install Amplify UI for React Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/usage/usage.react.mdx Install the `@aws-amplify/ui-react` package using npm or yarn. ```bash npm install @aws-amplify/ui-react yarn add @aws-amplify/ui-react ``` -------------------------------- ### Default Flex Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/components/flex/react.mdx This example demonstrates the basic usage of the Flex primitive. Ensure the `DefaultFlexExample` component is imported. ```jsx import { Fragment } from '@/components/Fragment'; import { Flex, Text, Button, View } from '@aws-amplify/ui-react'; import { FlexDemo } from './demo'; import { Example, ExampleCode } from '@/components/Example'; import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay'; import { DefaultFlexExample } from './examples'; const DefaultFlexExample = () => ( One Two Three ); ``` -------------------------------- ### Install Amplify UI React v3.x with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Install the 3.x version of the `@aws-amplify/ui-react` library using npm. ```bash npm install aws-amplify @aws-amplify/ui-react@3.x ``` -------------------------------- ### Install Amplify UI React v4.x and AWS Amplify v5.x Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Install the 4.x version of `@aws-amplify/ui-react` and the 5.x version of `aws-amplify` for migration. ```bash npm install aws-amplify@5.x @aws-amplify/ui-react@4.x ``` ```bash yarn add aws-amplify@5.x @aws-amplify/ui-react@4.x ``` -------------------------------- ### Install Amplify UI React v3.x with yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Install the 3.x version of the `@aws-amplify/ui-react` library using yarn. ```bash yarn add aws-amplify @aws-amplify/ui-react@3.x ``` -------------------------------- ### Default Loader Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/components/loader/react.mdx A basic example of the Loader component. ```jsx import { Loader } from '@aws-amplify/ui-react'; ; ``` -------------------------------- ### Install Amplify UI Svelte Source: https://github.com/aws-amplify/amplify-ui/blob/main/packages/svelte/README.md Install the necessary packages for @aws-amplify/ui-svelte and aws-amplify using npm or yarn. ```bash npm install @aws-amplify/ui-svelte aws-amplify ``` ```bash yarn add @aws-amplify/ui-svelte aws-amplify ``` -------------------------------- ### Install Node Version Manager Source: https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md Use nvm to install and manage Node.js versions. This is a prerequisite for local development. ```bash nvm install ``` -------------------------------- ### Install node-polyfill-webpack-plugin with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx Install the `node-polyfill-webpack-plugin` as a dev dependency using npm. ```bash npm install node-polyfill-webpack-plugin -D ``` -------------------------------- ### Install Amplify UI Vue 2.x with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx Install version 2.x of `@aws-amplify/ui-vue` along with `aws-amplify` using npm. ```bash npm install aws-amplify @aws-amplify/ui-vue@2 ``` -------------------------------- ### Install Amplify UI Vue 3.x and aws-amplify 5.x with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx Use this command to install `@aws-amplify/ui-vue@3.x` and `aws-amplify@5.x` when migrating from 2.x to 3.x. ```bash npm install aws-amplify@5.x @aws-amplify/ui-vue@3.x ``` -------------------------------- ### Install Amplify UI React v2.x using npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Install the 2.x version of the @aws-amplify/ui-react library using npm. ```bash npm install aws-amplify @aws-amplify/ui-react@2.x ``` -------------------------------- ### Install Amplify UI React v2.x using yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Install the 2.x version of the @aws-amplify/ui-react library using yarn. ```bash yarn add aws-amplify @aws-amplify/ui-react@2.x ``` -------------------------------- ### Install Amplify Backend Packages (yarn) Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/liveness/quick-start-pull.react.mdx Use this command to install the necessary Amplify backend packages with yarn. Ensure you are using the latest versions. ```bash yarn add @aws-amplify/backend@latest @aws-amplify/backend-cli@latest --dev ``` -------------------------------- ### Install Amplify UI Angular 2.x Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.angular.mdx Install the 2.x version of the `@aws-amplify/ui-angular` library along with `aws-amplify`. ```bash npm install aws-amplify @aws-amplify/ui-angular@2.x ``` ```bash yarn add aws-amplify @aws-amplify/ui-angular@2.x ``` -------------------------------- ### Install Amplify UI Vue 3.x and aws-amplify 5.x with yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx Use this command to install `@aws-amplify/ui-vue@3.x` and `aws-amplify@5.x` when migrating from 2.x to 3.x. ```bash yarn add aws-amplify@5.x @aws-amplify/ui-vue@3.x ``` -------------------------------- ### Install Amplify Backend Packages (npm) Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/liveness/quick-start-pull.react.mdx Use this command to install the necessary Amplify backend packages with npm. Ensure you are using the latest versions. ```bash npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest ``` -------------------------------- ### Install Amplify UI Vue 2.x with yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx Install version 2.x of `@aws-amplify/ui-vue` along with `aws-amplify` using yarn. ```bash yarn add aws-amplify @aws-amplify/ui-vue@2 ``` -------------------------------- ### Install Amplify UI React Liveness 2.x with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Use this command to install the 2.x version of the @aws-amplify/ui-react-liveness library along with aws-amplify@5.x. ```bash npm install aws-amplify@5.x @aws-amplify/ui-react-liveness@2.x ``` -------------------------------- ### DropZone Theming Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/components/dropzone/react.mdx Demonstrates how to apply theme customizations to the DropZone component. This example shows overriding default styles using a theme provider. ```jsx import { DropZone } from '@/components/DropZone' import { AmplifyProvider } from '@aws-amplify/ui-react' import { defaultTheme } from '@/theme' export const DropZoneThemeExample = () => ( console.log({ files, rejectedFiles }) }> ) ``` -------------------------------- ### Install Amplify UI React v5.x using npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Use this command to install the latest version of the Amplify UI React library via npm. ```bash npm install @aws-amplify/ui-react@5.x ``` -------------------------------- ### Install Amplify UI React v5.x using yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Use this command to install the latest version of the Amplify UI React library via yarn. ```bash yarn add @aws-amplify/ui-react@5.x ``` -------------------------------- ### Install Amplify UI React Liveness 2.x with yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Use this command to install the 2.x version of the @aws-amplify/ui-react-liveness library along with aws-amplify@5.x. ```bash yarn add aws-amplify@5.x @aws-amplify/ui-react-liveness@2.x ``` -------------------------------- ### Configure All Attributes for Sign Up Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx This example demonstrates how to configure all available attributes for the sign-up process across different platforms. ```jsx ``` ```jsx ``` ```jsx ``` ```jsx ``` ```jsx ``` ```jsx ``` ```jsx ``` ```jsx ``` -------------------------------- ### Install Vite Project (JavaScript) Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/usage/vite/react.mdx Use this command to create a new Vite.js project with the React template for JavaScript. Ensure you have npm 7+ installed. ```bash npm create vite@latest amplify-ui-demo -- --template react && cd amplify-ui-demo ``` -------------------------------- ### Customize Setup Email Labels with I18n Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.web.mdx Customize the header text for the email setup screen during authentication flows. This example shows how to change the 'Setup Email' header to 'Email Setup'. ```typescript I18n.putVocabulariesForLanguage('en', { 'Setup Email': 'Email Setup' }); ``` -------------------------------- ### Install Amplify UI React Liveness v3.x using npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Install the 3.x version of the @aws-amplify/ui-react-liveness library along with aws-amplify v6.x using npm. ```bash npm install aws-amplify@6.x @aws-amplify/ui-react-liveness@3.x ``` -------------------------------- ### Install Amplify UI Vue 4.x and aws-amplify 6.x with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx Use this command to install the latest compatible versions of `@aws-amplify/ui-vue` and `aws-amplify` for migration from 3.x to 4.x. ```bash npm install @aws-amplify/ui-vue@4.x aws-amplify@6.x ``` -------------------------------- ### Quick Start React App with Amplify UI Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/usage/usage.react.mdx Copy and paste this code into your React app to get started with Amplify UI components. ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import { AmplifyProvider, Button } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; function App() { return ( ); } const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render(); ``` -------------------------------- ### Complete User Choice Flow Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/configuration/passwordless.android.mdx A comprehensive example demonstrating the User Choice flow with a preferred authentication factor and passkey prompt configuration for both sign-up and sign-in. ```kotlin val authenticatorState = rememberAuthenticatorState( authenticationFlow = AuthenticationFlow.UserChoice( preferredAuthFactor = AuthFactor.WebAuthn, passkeyPrompts = PasskeyPrompts( afterSignUp = PasskeyPrompt.Always, afterSignIn = PasskeyPrompt.Always ) ) ) Authenticator( state = authenticatorState ) { Text("Welcome!") } ``` -------------------------------- ### Link Internal Dependency in Example App Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Configure the Example App's `package.json` to include an internal Amplify UI package as a dependency, using `*` as the version. ```json "dependencies": { "@aws-amplify/ui": "*", ... }, ``` -------------------------------- ### Theming Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx Illustrates how to theme the Storage Browser component using Amplify UI's theming capabilities. ```jsx ```jsx file=./examples/Theming.tsx ``` ``` -------------------------------- ### Message Theming Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/components/message/react.mdx Provides an example of how to customize the Message component's theme using `MessageThemeExample`. This allows for deep customization of the component's appearance. ```tsx import { Message } from '@aws-amplify/ui-react'; import { AmplifyProvider } from '@aws-amplify/ui-react'; const theme = { components: { message: { // Custom styles for the message component }, }, }; function App() { return ( A themed message. ); } ``` -------------------------------- ### Install Amplify UI Vue 4.x and aws-amplify 6.x with yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.vue.mdx Use this command to install the latest compatible versions of `@aws-amplify/ui-vue` and `aws-amplify` for migration from 3.x to 4.x. ```bash yarn add @aws-amplify/ui-vue@4.x aws-amplify@6.x ``` -------------------------------- ### Modal Authenticator in Svelte Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx Apply the `modal` variation to the Authenticator component in Svelte for a full-screen authentication overlay. This example shows the basic setup. ```html {#snippet children({ user, signOut })}

Hello {user.username}!

{/snippet} ``` -------------------------------- ### Complete Authenticator Example with User Choice Flow Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/configuration/passwordless.swift.mdx A comprehensive example demonstrating the user choice authentication flow with a preferred WebAuthn factor and passkey prompts enabled after both sign-up and sign-in. ```swift Authenticator( authenticationFlow: .userChoice( preferredAuthFactor: .webAuthn, passkeyPrompts: PasskeyPrompts( afterSignUp: .always, afterSignIn: .always ) ) ) { signedInState in Text("Welcome \(signedInState.user.username)!") } ``` -------------------------------- ### Start Storybook Server Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Boots the Storybook server in the first terminal. This provides a web interface for exploring components. ```bash # terminal 1 yarn run react-native-example storybook ``` -------------------------------- ### Svelte Sign Up with Username Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.signUp.svelte.mdx Example of using the Amplify UI Authenticator component for user sign-up with a username in Svelte. Ensure you have the necessary Amplify libraries installed and configured. ```svelte

My App

© My Company

 ``` -------------------------------- ### Enable Guest and Unauthenticated User Analytics Source: https://github.com/aws-amplify/amplify-ui/blob/main/environments/in-app-messaging/in-app-messaging-with-pinpoint-campaign/README.md Configure authorization to allow guest and unauthenticated users to send analytics events. This is recommended for getting started with In-App Messaging. ```shell ? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (we recommend you allow this when getting started) (Y/n) Y ``` -------------------------------- ### Integrate ESLint React Plugin Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-router/README.md Install the `eslint-plugin-react` package and configure your ESLint settings to include its recommended rules. This setup enables linting for React-specific patterns and JSX runtime. ```javascript // eslint.config.js import react from 'eslint-plugin-react'; export default tseslint.config({ // Set the react version settings: { react: { version: '18.3' } }, plugins: { // Add the react plugin react, }, rules: { // other rules... // Enable its recommended rules ...react.configs.recommended.rules, ...react.configs['jsx-runtime'].rules, }, }); ``` -------------------------------- ### Initialize Amplify Project Source: https://github.com/aws-amplify/amplify-ui/blob/main/environments/auth/auth-with-all-attributes/README.md Initialize a new Amplify project. Accept defaults for a quick setup. ```shell amplify --version # 6.1.0 amplify init # Accept defaults ``` -------------------------------- ### Compose Download View Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx This example shows how to compose the Download view using the `useView` hook and the `StorageBrowser.Download.Provider`. Proper imports are necessary. ```jsx import { useView } from "@aws-amplify/ui-react-storage"; import { StorageBrowser } from "@aws-amplify/ui-react-storage"; function ComposedDownloadView() { const { components } = useView("Download"); return ( {/* Children can be composed sub-components */} ); } ``` -------------------------------- ### Initialize Amplify Project Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/quick-start-pull.web.mdx Run this command in your project's root directory to initialize a new Amplify project. This sets up the necessary configuration files and backend resources. ```bash amplify init ``` -------------------------------- ### Custom Storage Browser UI Examples Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx These examples demonstrate how to build custom UI components for various Storage Browser views using the `useView()` hook. Each snippet corresponds to a specific view like Locations, Upload, Download, etc. ```jsx ```jsx file=./examples/Custom.tsx ``` ``` ```tsx ```tsx file=./examples/CustomLocationsView.tsx ``` ``` ```tsx ```tsx file=./examples/CustomLocationDetailView.tsx ``` ``` ```jsx ```jsx file=./examples/CustomCopyView.tsx ``` ``` ```jsx ```jsx file=./examples/CustomCreateFolderView.tsx ``` ``` ```jsx ```jsx file=./examples/CustomUploadView.tsx ``` ``` ```jsx ```jsx file=./examples/CustomDownloadView.tsx ``` ``` ```jsx ```jsx file=./examples/CustomDeleteView.tsx ``` ``` ```jsx ```jsx file=./examples/CustomUIFilePreview.tsx ``` ``` -------------------------------- ### Run Development Server Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/next/README.md Use these commands to start the Next.js development server. Open http://localhost:3000 in your browser. ```bash npm run dev # or yarn dev ``` -------------------------------- ### Troubleshooting Canvas Installation with Python 3.12+ Source: https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md If you encounter 'ModuleNotFoundError: No module named 'distutils'' during 'node-canvas' installation with Python 3.12 or greater, install 'setuptools' as a recommended alternative to 'distutils'. ```bash error /Users/USERNAME/amplify-ui/node_modules/canvas: Command failed. Exit code: 1 ... ModuleNotFoundError: No module named 'distutils' ``` -------------------------------- ### Troubleshooting Canvas Installation on Apple Silicon Source: https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md If you encounter errors related to 'pkg-config' during 'node-canvas' installation on Apple Silicon Macs, follow the instructions in the canvas documentation to install required dependencies. ```bash error /Users/USERNAME/amplify-ui/node_modules/canvas: Command failed. Exit code: 1 ... /bin/sh: pkg-config: command not found gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while trying to load binding.gyp` ``` -------------------------------- ### Install node-polyfill-webpack-plugin with yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx Install the `node-polyfill-webpack-plugin` as a dev dependency using yarn. ```bash yarn add node-polyfill-webpack-plugin -D ``` -------------------------------- ### Create New MegaApp in One Step Source: https://github.com/aws-amplify/amplify-ui/blob/main/build-system-tests/README.md A single command to set up a new MegaApp with specified build tool, framework, and versions. This is a convenient way to quickly scaffold a new test application. ```sh $ ./mega-app-create-app.sh --build-tool next --build-tool-version latest --name react-latest-next-latest-node-18-ts --framework react --framework-version latest ``` -------------------------------- ### Initialize Amplify Project Source: https://github.com/aws-amplify/amplify-ui/blob/main/environments/auth/auth-with-username-no-attributes/README.md Run this command to initialize a new Amplify project with default settings. ```shell amplify init -y ``` -------------------------------- ### Start Svelte Development Server Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/svelte/README.md Run 'npm run dev' to start the development server. Use '-- --open' to automatically open the application in a new browser tab. ```sh npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open ``` -------------------------------- ### Pagination Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx Demonstrates how to control the number of items displayed per page in file and folder listings using the `pageSize` prop. ```jsx ```jsx file=./examples/Pagination.tsx ``` ``` -------------------------------- ### Initialize Amplify Project Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/liveness/quick-start-pull.android.mdx Use this command to initialize a new Amplify project. It guides you through setting up project name, environment, and app type. ```bash $ amplify init ? Enter a name for the project androidliveness ? Initialize the project with the above configuration? No ? Enter a name for the environment dev ? Choose your default editor: Android Studio ? Choose the type of app that you're building android Please tell us about your project ? Where is your Res directory: app/src/main/res ``` -------------------------------- ### Install iOS Cocoapods for React Native Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/quick-start.mdx Install iOS cocoapods after updating the Podfile for React Native projects. ```bash npx pod-install ``` -------------------------------- ### Initialize Amplify Project Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/liveness/quick-start-pull.react.mdx This command initializes a new Amplify project. Follow the prompts to configure project name, environment, editor, app type, framework, and directory paths. ```bash $ amplify init ? Enter a name for the project reactliveness ? Enter a name for the environment dev ? Choose your default editor: Visual Studio Code ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript framework are you using react ? Source Directory Path: src ? Distribution Directory Path: build ? Build Command: npm run-script build ? Start Command: npm run-script start ``` -------------------------------- ### React Native Web Browser Installation Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/quick-start.mdx Install the @aws-amplify/rtn-web-browser package for Federated Sign In with the React Native Authenticator. ```bash npm install @aws-amplify/rtn-web-browser ``` -------------------------------- ### API Route Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/next/README.md This is an example of an API route handler in Next.js. The file is located at pages/api/hello.js and is accessible at /api/hello. ```javascript export default function handler(req, res) { res.status(200).json({ text: 'Hello' }); } ``` -------------------------------- ### Configure Passkey Prompts Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/configuration/passwordless.react.mdx Configures passkey registration prompts to appear only after sign-up, not after sign-in. ```tsx ``` -------------------------------- ### Initialize Amplify Project Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/liveness/quick-start-pull.swift.mdx Use the Amplify CLI to initialize a new project. This process configures both User Pool and Identity Pool automatically. Ensure you have the Amplify CLI installed. ```bash $ amplify init ? Enter a name for the project swiftliveness ? Initialize the project with the above configuration? No ? Enter a name for the environment dev ? Choose your default editor: Xcode (macOS only) ? Choose the type of app that you're building ios ``` -------------------------------- ### Basic Example Usage Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/theming/theme-provider/react.mdx This snippet shows a basic integration of a component within the ThemeProvider context, utilizing default theme values. ```jsx ```tsx file=./examples/BasicExample.tsx ``` ``` -------------------------------- ### Example Usage of Storage Browser Component Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx Demonstrates the basic rendering of the Storage Browser component within an example structure. This snippet is a placeholder for the actual component implementation. ```jsx ```jsx file=./examples/Default.tsx ``` ``` -------------------------------- ### Install Amplify UI React Notifications Package Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Install the 1.x version of the `@aws-amplify/ui-react-notifications` library to use In-App Messaging components. ```bash npm install @aws-amplify/ui-react-notifications@1.x ``` ```bash yarn add @aws-amplify/ui-react-notifications@1.x ``` -------------------------------- ### Install Amplify UI Angular 4.x with yarn Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.angular.mdx Use this command to install the 4.x version of the `@aws-amplify/ui-angular` library using yarn. ```bash yarn add @aws-amplify/ui-angular@4.x ``` -------------------------------- ### Install Amplify UI Angular 4.x with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.angular.mdx Use this command to install the 4.x version of the `@aws-amplify/ui-angular` library using npm. ```bash npm install @aws-amplify/ui-angular@4.x ``` -------------------------------- ### Push Backend Resources Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/liveness/quick-start-pull.android.mdx Run `amplify push` to create or update backend resources. Ensure your `amplifyconfiguration.json` is synced. ```bash $ amplify push ✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | ---------------- | --------- | ----------------- | | Auth | androidlive••••• | Create | awscloudformation | ``` -------------------------------- ### Install Inter Font as NPM Dependency Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/installation/fonts.web.mdx Install the Inter font package using npm or yarn to manage it as a project dependency. ```bash npm install @fontsource/inter ``` ```bash yarn add @fontsource/inter ``` -------------------------------- ### Install Amplify UI React Storage with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx Use this command to install version 3.x of `@aws-amplify/ui-react-storage` and version 6.x of `aws-amplify` using npm. Ensure you are using compatible versions as specified. ```bash npm install @aws-amplify/ui-react-storage@3.x aws-amplify@6.x ``` -------------------------------- ### Customize TOTP Setup Experience Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.full-ui-customization.swift.mdx Customize the content for the TOTP setup screen by providing custom implementations for `qrCodeContent` and `copyKeyContent` within `ContinueSignInWithTOTPSetupView`. ```swift Authenticator( continueSignInWithTOTPSetupContent: { state in ContinueSignInWithTOTPSetupView( state: state, // Example of how a customer can pass a custom QR code qrCodeContent: { state in // Your custom QR Code implementation goes here }, copyKeyContent: { state in // Your custom implementation goes here } ) } ) { _ in // ... } ``` -------------------------------- ### Icons Provider Example Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx Shows how to customize icons used within the Storage Browser component via the ``. ```jsx ```jsx file=./examples/Icons.tsx ``` ``` -------------------------------- ### Install applesimutils for iOS E2E testing Source: https://github.com/aws-amplify/amplify-ui/blob/main/packages/e2e/README.md Use Homebrew to tap the wix/brew repository and install applesimutils, a utility for interacting with iOS simulators. ```sh brew tap wix/brew brew install applesimutils ``` -------------------------------- ### Install Amplify UI for React Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/installation/dependencies.mdx Install the `@aws-amplify/ui-react` package for React projects using npm or yarn. This should be done after adding the `aws-amplify` dependency. ```bash npm install @aws-amplify/ui-react ``` -------------------------------- ### Rebuild Example App for iOS and Android Source: https://github.com/aws-amplify/amplify-ui/blob/main/examples/react-native/README.md Commands to rebuild the example application on iOS and Android simulators/emulators after changing URI schemes. Delete the app from the simulator/emulator before rebuilding. ```sh # iOS yarn run-ios # OR # Android yarn run-android ``` -------------------------------- ### Install Amplify UI Angular 5.x with npm Source: https://github.com/aws-amplify/amplify-ui/blob/main/docs/src/pages/[platform]/getting-started/migration/migration.angular.mdx Use this command to install the 5.x version of `@aws-amplify/ui-angular` along with `aws-amplify` version 6.x. ```bash npm install @aws-amplify/ui-angular@5.x aws-amplify@6.x ```