Amplify project setup

Create a new project

To get started, initialize a new React Native project.

Amplify now requires native modules not available through the Expo SDK. As a result, Expo Go is no longer supported but you should still be able to use Expo. Learn more about dropping support for Expo Go in Amplify v6.

Create a new app with the following command:

1npx create-expo-app amplified_todo
2
3cd amplified_todo
Instructions for React Native version 0.72 and below

@aws-amplify/react-native requires a minimum iOS deployment target of 13.0 if you are using react-native version less than or equal to 0.72. Open the Podfile located in the ios directory and update the target value:

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

Install the necessary dependencies by running the following command:

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

Start the app with the following command:

For Android:

1npx expo run:android

For iOS:

1npx expo run:ios

Follow the additional prompts to configure your build and allow it some time to process. When ready, you app should launch in the respective simulator.

After you setup development environment, create a new app with the following command:

1npx react-native init amplified_todo
2
3cd amplified_todo

Install the necessary dependencies by running the following command:

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

You will also need to install the pod dependencies for iOS:

1npx pod-install

Start the app with the following command:

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.