diff --git a/src/pages/[platform]/build-a-backend/add-aws-services/predictions/set-up-predictions/index.mdx b/src/pages/[platform]/build-a-backend/add-aws-services/predictions/set-up-predictions/index.mdx
index 86d27328d10..cc8402f39b1 100644
--- a/src/pages/[platform]/build-a-backend/add-aws-services/predictions/set-up-predictions/index.mdx
+++ b/src/pages/[platform]/build-a-backend/add-aws-services/predictions/set-up-predictions/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx
index 26791ead242..8abcd3390bf 100644
--- a/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/add-social-provider/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx b/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
index 514e2a6ad42..8e126468e8d 100644
--- a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
@@ -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.
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
npx amplify sandbox --config-format dart --config-out-dir lib
```
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
npx amplify sandbox
```
@@ -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.
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
npx amplify sandbox --config-format json-mobile --config-out-dir app/src/main/res/raw
```
-```bash title="Terminal"
+```bash title="Terminal" showLineNumbers={false}
npx amplify sandbox --config-format json-mobile
```
@@ -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
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
```
diff --git a/src/pages/[platform]/build-a-backend/data/connect-existing-data/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-existing-data/index.mdx
index a8dec9951d3..b2f8f7b3b33 100644
--- a/src/pages/[platform]/build-a-backend/data/connect-existing-data/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/connect-existing-data/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx
index bba4ec5cdec..77cb5ee83e7 100644
--- a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-rekognition/index.mdx b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-rekognition/index.mdx
index 8979f6a7dee..9e06fe5de13 100644
--- a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-rekognition/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-rekognition/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-translate/index.mdx b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-translate/index.mdx
index ea828783728..28f983060f4 100644
--- a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-translate/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-translate/index.mdx
@@ -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
diff --git a/src/pages/[platform]/build-a-backend/data/optimistic-ui/index.mdx b/src/pages/[platform]/build-a-backend/data/optimistic-ui/index.mdx
index ed7f301d2c1..e21796e0220 100644
--- a/src/pages/[platform]/build-a-backend/data/optimistic-ui/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/optimistic-ui/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
index 6ba06621fa6..fc49e546d8b 100644
--- a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
@@ -125,7 +125,7 @@ First, install the Amplify client library to your project:
-```bash
+```bash title="Terminal" showLineNumbers={false}
npm add aws-amplify
```
diff --git a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
index fb23427ae36..8d83a5d21dd 100644
--- a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
+++ b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx b/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx
index ff857c75c84..a047e110931 100644
--- a/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/download-files/index.mdx
@@ -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
diff --git a/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx b/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
index 374139fdb9c..32a748e4cb1 100644
--- a/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
+++ b/src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/build-ui/formbuilder/index.mdx b/src/pages/[platform]/build-ui/formbuilder/index.mdx
index 68123a0006a..2adda3a18ed 100644
--- a/src/pages/[platform]/build-ui/formbuilder/index.mdx
+++ b/src/pages/[platform]/build-ui/formbuilder/index.mdx
@@ -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
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
index 13cbc4a599e..495a7141a56 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/cross-account-deployments/index.mdx
@@ -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 --branch-name --region
```
@@ -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
diff --git a/src/pages/[platform]/deploy-and-host/sandbox-environments/setup/index.mdx b/src/pages/[platform]/deploy-and-host/sandbox-environments/setup/index.mdx
index a25a8ae2633..2cd98fc669f 100644
--- a/src/pages/[platform]/deploy-and-host/sandbox-environments/setup/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/sandbox-environments/setup/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/reference/telemetry/index.mdx b/src/pages/[platform]/reference/telemetry/index.mdx
index a3d5edf345b..6c6e88c8391 100644
--- a/src/pages/[platform]/reference/telemetry/index.mdx
+++ b/src/pages/[platform]/reference/telemetry/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/start/manual-installation/index.mdx b/src/pages/[platform]/start/manual-installation/index.mdx
index 109f6a0d7fa..4c0dd3e5938 100644
--- a/src/pages/[platform]/start/manual-installation/index.mdx
+++ b/src/pages/[platform]/start/manual-installation/index.mdx
@@ -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
```
diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx
index deea6930b34..2a0263af572 100644
--- a/src/pages/[platform]/start/quickstart/index.mdx
+++ b/src/pages/[platform]/start/quickstart/index.mdx
@@ -1065,7 +1065,7 @@ You can follow the [official documentation](https://flutter.dev/docs/get-started
Once you have installed Flutter, you can create a new Flutter project using the following command:
-```bash
+```bash title="Terminal" showLineNumbers={false}
flutter create my_amplify_app
```
@@ -1073,7 +1073,7 @@ flutter create my_amplify_app
The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory.
-```bash
+```bash title="Terminal" showLineNumbers={false}
npm create amplify@beta
? Where should we create your project? (.) # press enter
```
@@ -1098,7 +1098,7 @@ Running this command will scaffold Amplify backend files in your current project
To deploy your backend use Amplify's per-developer cloud sandbox. This feature provides a separate backend environment for every developer on a team, ideal for local development and testing. To run your application with a sandbox environment, you can run the following command:
-```bash
+```bash title="Terminal" showLineNumbers={false}
npx amplify sandbox --config-format dart --config-out-dir lib
```
@@ -1125,7 +1125,7 @@ You will add:
After adding the dependencies, you need to run the following command to install the dependencies:
-```bash
+```bash title="Terminal" showLineNumbers={false}
flutter pub get
```
@@ -1226,7 +1226,7 @@ Next, let's implement UI to create, list, and delete the to-do items.
Amplify can automatically generate code for interacting with the backend API. Run the command in the terminal to generate dart model classes from the Data schema under `lib/models`:
-```bash
+```bash title="Terminal" showLineNumbers={false}
npx amplify generate graphql-client-code --format modelgen --model-target dart --out lib/models
```
@@ -1493,7 +1493,7 @@ Now you should have your project created.
The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory.
-```bash
+```bash title="Terminal" showLineNumbers={false}
cd my-app
npm create amplify@latest
? Where should we create your project? (.) # press enter
@@ -1519,7 +1519,7 @@ Running this command will scaffold Amplify backend files in your current project
To deploy your backend use Amplify's per-developer cloud sandbox. This feature provides a separate backend environment for every developer on a team, ideal for local development and testing. To run your application with a sandbox environment, you can run the following command:
-```bash
+```bash title="Terminal" showLineNumbers={false}
npx amplify sandbox
```
@@ -1648,7 +1648,7 @@ Next, let's implement UI to create, list, and delete the to-do items.
Amplify can automatically generate code for interacting with the backend API. The command below generates model classes from the Data schema:
-```bash
+```bash title="Terminal" showLineNumbers={false}
npx amplify generate graphql-client-code --format modelgen --model-target swift
```
@@ -2249,7 +2249,7 @@ Let's update our backend to implement per-user authorization rules, allowing eac
First, clone the deployed repository.
-```bash
+```bash title="Terminal" showLineNumbers={false}
git clone git clone https://github.com//amplify-backend-template.git
```
The backend to-do model is configured to share data across all users, but, in most cases, you want data to be isolated on a per-user basis.
@@ -2336,7 +2336,7 @@ Amplify now requires native modules not available through the Expo SDK. As a res
-```sh
+```bash title="Terminal" showLineNumbers={false}
npx create-expo-app my_amplify_app -t expo-template-blank-typescript
cd my_amplify_app
```
@@ -2344,7 +2344,7 @@ cd my_amplify_app
For calling native libraries and platform dependencies, you need to have run the prebuild command for generating the folders for depending platforms.
-```sh
+```bash title="Terminal" showLineNumbers={false}
npx expo prebuild
```
@@ -2353,7 +2353,7 @@ npx expo prebuild
The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory.
-```bash
+```bash title="Terminal" showLineNumbers={false}
cd my-app
npm create amplify@latest
? Where should we create your project? (.) # press enter
@@ -2378,7 +2378,7 @@ Running this command will scaffold Amplify backend files in your current project
To deploy your backend use Amplify's per-developer cloud sandbox. This feature provides a separate backend environment for every developer on a team, ideal for local development and testing. To run your application with a sandbox environment, you can run the following command:
-```bash
+```bash title="Terminal" showLineNumbers={false}
npx amplify sandbox
```
@@ -2390,13 +2390,21 @@ The fastest way to get your login experience up and running is to use our Authen
To use the Authenticator, you need to add the following dependencies to your project:
-```sh
-npm add @aws-amplify/ui-react-native aws-amplify @aws-amplify/react-native react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill
+```bash title="Terminal" showLineNumbers={false}
+npm add \
+ @aws-amplify/ui-react-native \
+ @aws-amplify/react-native \
+ aws-amplify \
+ @react-native-community/netinfo \
+ @react-native-async-storage/async-storage \
+ react-native-safe-area-context \
+ react-native-get-random-values \
+ react-native-url-polyfill
```
Then install the iOS cocoapods for targeting iOS by running:
-```sh
+```bash title="Terminal" showLineNumbers={false}
npx pod-install
```