Amplify project setup

Before you begin, make sure you have the following installed:

• Node.js v14.x or later
• npm v6.14.4 or later
• git v2.14.1 or later

Sign up for an AWS account

If you don't already have an AWS account, you'll need to create one in order to follow the steps outlined in this tutorial.

Create AWS Account

There are no upfront charges or any term commitments to create an AWS account and signing up gives you immediate access to the AWS Free Tier.

Install the Amplify CLI

The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app. Let's go ahead and install the Amplify CLI.

1npm install -g @aws-amplify/cli

1curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

1curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd

Configure the Amplify CLI

To set up the Amplify CLI on your local machine, you have to configure it to connect to your AWS account.

Configure Amplify by running the following command:

1amplify configure

amplify configure will ask you to sign into the AWS Console.

Once you're signed in, Amplify CLI will ask you to use the AWS Identity and Access Management (IAM) to create an IAM user.

1Specify the AWS Region
2? region:  # Your preferred region
3Follow the instructions at
4https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
5
6to complete the user creation in the AWS console
7https://console.aws.amazon.com/iamv2/home#/users/create

Navigate to the IAM User creation page if it's not already open.

Enter a User name and select Next. You can name the user anything but we'll call it "amplify-dev".

Select Attach policies directly and select AdministratorAccess-Amplify as the Permissions policy. Select Next.

On the Review page, check that everything looks good and select Create user.

This will redirect to the users list page. Select the user you just created.

On the user details page, navigate to the Security credentials tab, scroll down to Access keys and select Create access keys.

On the next page, select Command Line Interface, acknowledge the warning, and select Next.

On the next page select Create access key. You'll then see a page with the access keys for the user. Use the copy icon to copy these values to your clipboard, then return to the Amplify CLI.

Enter the values you just copied into the corresponding CLI prompts.

1Enter the access key of the newly created user:
2? accessKeyId:  # YOUR_ACCESS_KEY_ID
3? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
4This would update/create the AWS Profile in your local machine
5? Profile Name:  # (default)
6
7Successfully set up the new user.

Manually configure the Amplify CLI

If you are using an IAM role or IAM Identity Center (previously AWS SSO), you can configure your local machine for use with Amplify CLI by creating AWS profile entries manually rather than the amplify configure wizard.

To create an AWS profile locally using IAM Identity Center, you can use the AWS CLI wizard, aws configure sso, or write to ~/.aws/config directly:

1[profile my-sso-profile]
2sso_session = my-sso
3sso_account_id = 123456789011
4sso_role_name = AdministratorAccess-Amplify
5region = us-west-2
6output = json
7
8[sso-session my-sso]
9sso_region = us-east-1
10sso_start_url = https://my-sso-portal.awsapps.com/start
11sso_registration_scopes = sso:account:access

Currently, the Amplify CLI requires a workaround for use with IAM Identity Center due to an issue in how it resolves credentials.

1[profile my-sso-profile]
2sso_session = my-sso
3sso_account_id = 123456789011
4sso_role_name = AdministratorAccess-Amplify
5region = us-west-2
6output = json
7+ credential_process = aws configure export-credentials --profile my-sso-profile
8
9[sso-session my-sso]
10sso_region = us-east-1
11sso_start_url = https://my-sso-portal.awsapps.com/start
12sso_registration_scopes = sso:account:access

Using the example above, when creating a new app or pulling an existing app, specify my-sso-profile as the AWS profile you'd like to use with the Amplify app.

To create an AWS profile locally using an IAM role, assign the AdministratorAccess-Amplify permissions set to the role and set the role in your ~/.aws/config file:

1[profile amplify-admin]
2role_arn = arn:aws:iam::123456789012:role/amplify-admin
3source_profile = amplify-user
4
5[profile amplify-user]
6region=us-east-1

Using the example above, when creating a new app or pulling an existing app, specify amplify-admin as the AWS profile you'd like to use with the Amplify app

Next, you'll set up your app and initialize Amplify!

Create your application

Create a new project

To get started, initialize a new React Native project.

1npx create-expo-app amplified_todo
2
3cd amplified_todo

1- platform :ios, min_ios_version_supported
2 + platform :ios, 13.0

1npm install aws-amplify @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values

1npx expo run:android

1npx expo run:ios

1npx react-native init amplified_todo
2
3cd amplified_todo

1npm install aws-amplify @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values

1npx pod-install

1npm start

1r - reload the app
2d - open developer menu
3i - run on iOS
4a - run on Android

Initialize a new backend

With the app running, it's time to set up Amplify and create the backend services to support the app.

Open a new terminal. From the amplified_todo directory, run:

1amplify init

When you initialize Amplify you'll be prompted for some information about the app, with the option to accept recommended values:

1? Enter a name for the project (amplified_todo)
2The following configuration will be applied:
3
4Project information
5| Name: amplified_todo
6| Environment: dev
7| Default editor: Visual Studio Code
8| App type: javascript
9| Javascript framework: react-native
10| Source Directory Path: /
11| Distribution Directory Path: /
12| Build Command: npm run-script build
13| Start Command: npm run-script start
14
15? Initialize the project with the above configuration? Yes
16Using default provider  awscloudformation
17? Select the authentication method you want to use: AWS profile
18? Please choose the profile you want to use default

Amplify CLI will infer the proper configuration based on the type of project Amplify is being initialized in where possible. Adjust if needed.

When you initialize a new Amplify project, a few things happen:

• It creates a top level directory called amplify that stores your backend definition. During the tutorial you'll add capabilities such as a GraphQL API and authentication. As you add features, the amplify folder will grow with infrastructure-as-code templates that define your backend stack. Infrastructure-as-code is a best practice way to create a replicable backend stack.
• It creates a file called amplifyconfiguration.json in the root directory that holds all the configuration for the services you create with Amplify. This is how the Amplify client is able to get the necessary information about your backend services.
• It modifies the .gitignore file, adding some generated files to the ignore list
• A cloud project is created for you in the AWS Amplify Console that can be accessed by running amplify console. The Console provides a list of backend environments, deep links to provisioned resources per Amplify category, status of recent deployments, and instructions on how to promote, clone, pull, and delete backend resources

Set up frontend

Next, configure Amplify so it can interact with backend services by adding the following code below the last import:

1// App.js
2
3import { Amplify } from 'aws-amplify';
4import amplifyconfig from './src/amplifyconfiguration.json';
5Amplify.configure(amplifyconfig);

1// index.js
2
3import { Amplify } from 'aws-amplify';
4import amplifyconfig from './src/amplifyconfiguration.json';
5Amplify.configure(amplifyconfig);

And that's all it takes to configure Amplify. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in amplifyconfiguration.json will update automatically.

Now that your app is set up and Amplify is initialized, you can add an API in the next step.