aws-amplify · josefaidt · May 1, 2024 · Apr 30, 2024 · May 1, 2024
@@ -436,7 +436,7 @@ func application(
 
 Upon building and running this application you should see the following in your console window:
 
-```bash
+```console
 Amplify configured with Auth and Predictions plugins
 ```
 
@@ -448,7 +448,7 @@ Amplify configured with Auth and Predictions plugins
 
 To install the Amplify library to use predictions features, run the following commands in your project’s root folder:
 
-```sh showLineNumbers={false}
+```bash title="Terminal" showLineNumbers={false}
 npm add aws-amplify
 ```
 

@@ -318,7 +318,7 @@ If you are using the [Authenticator component](https://ui.docs.amplify.aws/react
 
 To enable this capability, an additional dependency must be installed.
 
-```sh
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-amplify/rtn-web-browser
 ```
 

@@ -132,12 +132,12 @@ See the [Amazon Cognito documentation](https://docs.aws.amazon.com/cognito/lates
 After you have chosen and set up your authentication resource, run the following command to create your first authentication resource in your personal cloud sandbox.
 
 <InlineFilter filters={['flutter']}>
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
 npx amplify sandbox --config-format dart --config-out-dir lib
 ```
 </InlineFilter>
 <InlineFilter filters={['angular','javascript','nextjs','react','react-native','vue']}>
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
 npx amplify sandbox
 ```
 </InlineFilter>
@@ -146,13 +146,13 @@ npx amplify sandbox
 Be sure to add a "raw" folder under app/src/main/res directory if it doesn't exist.
 </Callout>
 
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
 npx amplify sandbox --config-format json-mobile --config-out-dir app/src/main/res/raw
 ```
 </InlineFilter>
 
 <InlineFilter filters={['swift']}>
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
 npx amplify sandbox --config-format json-mobile
 ```
 </InlineFilter>
@@ -171,7 +171,7 @@ Amplify has pre-built UI components for React, Vue, Angular, React Native, Swift
 
 First, install the `@aws-amplify/ui-react` library:
 
-```sh
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-amplify/ui-react
 ```
 
@@ -242,7 +242,7 @@ export default withAuthenticator(App);
 
 First, install the `@aws-amplify/ui-vue` library:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-amplify/ui-vue
 ```
 
@@ -278,7 +278,7 @@ The `Authenticator` component offers a simple way to add authentication flows in
 
 First, install the `@aws-amplify/ui-components` library:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-amplify/ui-components
 ```
 
@@ -321,7 +321,7 @@ The `amplify-authenticator` component offers a simple way to add authentication
 
 First, install the `@aws-amplify/ui-angular` library:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-amplify/ui-angular
 ```
 
@@ -403,7 +403,7 @@ npx pod-install
 <Callout warning>
 For calling native libraries and platform dependencies from Expo, you need to run the prebuild command for generating the folders for related platforms. 
 
-```sh
+```bash title="Terminal" showLineNumbers={false}
 npx expo prebuild
 ```
 </Callout>

@@ -97,7 +97,7 @@ export const data = defineData({
 
 Once your cloud sandbox has updated, you should be able to call any CRUDL operations for your relational database.
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npx amplify sandbox
 ```
 

@@ -53,7 +53,7 @@ Set up your project by following the instructions in the [Quickstart guide](/[pl
 ## Step 2 - Install Polly Libraries
 We'll create a new API endpoint that'll use the the AWS SDK to call the Amazon Polly service. To install the Amazon Polly SDK, run the following command in your project's root folder:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-sdk/client-polly
 ```
 

@@ -52,7 +52,7 @@ Set up your project by following the instructions in the [Quickstart guide](/[pl
 ## Step 2 - Install Rekognition Libraries
 Create a new API endpoint that'll use the the AWS SDK to call the Amazon Rekognition service. To install the Amazon Rekognition SDK, run the following command in your project's root folder:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-sdk/client-rekognition
 ```
 

@@ -50,9 +50,8 @@ Set up your project by following the instructions in the [Quickstart guide](/[pl
 ## Step 2 - Install Amazon Translate libraries
 To install the Amazon Translate SDK, run the following command in your project's root folder:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-sdk/client-translate
-
 ```
 
 ## Step 3 - Add your Amazon Translate as Datasource

@@ -42,7 +42,7 @@ For more on the Amplify GraphQL API, see the [API documentation](/gen1/[platform
 
 To get started, run the following command in an existing Amplify project with a React frontend:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 # Install TanStack Query
 npm i @tanstack/react-query
 ```

@@ -125,7 +125,7 @@ First, install the Amplify client library to your project:
 
 <InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add aws-amplify
 ```
 

@@ -38,7 +38,7 @@ Before you begin:
 
 To use Amplify APIs server-side, you need to install the Amplify Next.js adapter in addition to the Amplify libraries:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add aws-amplify @aws-amplify/adapter-nextjs
 ```
 

@@ -34,7 +34,7 @@ export function getStaticProps(context) {
 
 You can easily display images on your app by using the cloud-connected Storage Image UI component. This component fetches images securely from your storage resource and displays it on the web page.
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-amplify/ui-react-storage aws-amplify
 ```
 ```tsx

@@ -36,7 +36,7 @@ There are multiple ways you can implement upload functionality for your app and
 
 Upload files from your app in minutes by using the cloud-connected Storage Manager UI Component. 
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @aws-amplify/ui-react-storage aws-amplify
 ```
 

@@ -29,21 +29,20 @@ Connected Forms are bound to a model in your app's data schema. Whenever a conne
 ## Generate forms
 First, install the Amplify UI library.
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add @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
+```bash title="Terminal" showLineNumbers={false}
 npx amplify generate forms
 ```
 
 This will generate create and update forms for each model defined in your schema in a folder called `ui-components`.
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 File written: ui-components/graphql/subscriptions.ts
 File written: ui-components/graphql/mutations.ts
 File written: ui-components/graphql/queries.ts

@@ -67,7 +67,7 @@ You can configure Amplify to disable automatic builds on every code commit. Navi
 
 You can set up an incoming webhook to trigger a build without committing code to your Git repository. Currently, the Amplify Gen 2 console does not support creation of incoming webhooks. However, you can create a webhook for a Gen 2 app using the AWS CLI by running the [`create-webhook`](https://awscli.amazonaws.com/v2/documentation/api/latest/reference/amplify/create-webhook.html) command:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 aws amplify create-webhook --app-id <value> --branch-name <value> --region <value>
 ```
 
@@ -157,7 +157,7 @@ Next, select the **Configuration** section and add the following information to
 
 You will then need to add the following shell commands to each of the build actions:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 // This environment variable is required to run the pipeline-deploy command in a non Amplify CI environment
 - Run: export CI=1
 

@@ -44,7 +44,7 @@ You can set up a new sandbox environment on your machine once you have an Amplif
 
 First, open the terminal and run the following command:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npx amplify sandbox
 ```
 

@@ -46,18 +46,18 @@ Your decision to opt out is stored for your user, meaning all Amplify apps you w
 
 You may opt out by using the `configure telemetry disable` command from the root of your Amplify app:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npx amplify configure telemetry disable
 ```
 
 You can opt back in to the program by running the following from the root of your Amplify app:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npx amplify configure telemetry enable
 ```
 
 In the event you would like to disable telemetry on a one-time basis, you can opt out by defining an environment variable:
 
-```bash
-AMPLIFY_DISABLE_TELEMETRY=1
+```bash title="Terminal" showLineNumbers={false}
+export AMPLIFY_DISABLE_TELEMETRY=1
 ```
@@ -34,7 +34,7 @@ The easiest way to get started with AWS Amplify is through [npm](https://npmjs.c
 
 First, if your frontend framework of choice doesn't have it already, create your project's `package.json` with `npm init -y`. Then, install the Amplify dependencies for building a backend:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest typescript
 ```
 
@@ -114,7 +114,7 @@ defineBackend({
 
 You can also update an existing frontend app. To upgrade existing Amplify code-first DX (Gen 2) apps, use your Node.js package manager (for example, `npm`) to update relevant backend packages:
 
-```bash
+```bash title="Terminal" showLineNumbers={false}
 npm update @aws-amplify/backend@latest @aws-amplify/backend-cli@latest
 ```