Page updated Feb 1, 2024

Preview: AWS Amplify's new code-first DX (Gen 2)

The next generation of Amplify's backend building experience with a TypeScript-first DX.

Get started

Set up fullstack project

To get started, initialize a new React Native project.

Create a new app with the following command:

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

Start the app with the following command:

For Android:

npx expo run:android
1npx expo run:android

For iOS:

npx expo run: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:

npx react-native init amplified_todo cd amplified_todo
1npx react-native init amplified_todo
2
3cd amplified_todo

Start the app with the following command:

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

Initialize a new backend

Now that you have a running app, it's time to set up Amplify so that you can create the necessary backend services needed to support the app.

Open a new terminal. From the root of the project, run:

amplify init
1amplify init

When you initialize Amplify you'll be prompted for some information about the app:

? Enter a name for the project (amplified_todo) The following configuration will be applied: Project information | Name: amplified_todo | Environment: dev | Default editor: Visual Studio Code | App type: javascript | Javascript framework: react-native | Source Directory Path: / | Distribution Directory Path: / | Build Command: npm run-script build | Start Command: npm run-script start ? Initialize the project with the above configuration? Yes Using default provider awscloudformation ? Select the authentication method you want to use: AWS profile ? Please choose the profile you want to use default
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

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 cloud capabilities, such as GraphQL API and web hosting. As you add these 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 your designated Source Directory Path that holds all the configuration for the services you create with Amplify. This is how the Amplify JavaScript client library is able to get the necessary information to connect to your backend services.
  • It modifies the .gitignore file, adding some generated files to the ignore list

Install Amplify Libraries

Install the necessary dependencies by running the following command:

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

@aws-amplify/react-native requires a minimum iOS deployment target of 13.0, open the Podfile located in the ios directory and update the target value:

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

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

npx pod-install
1npx pod-install

Note: Be sure to install @react-native-async-storage/async-storage and react-native-get-random-values or you will face errors at runtime.

// App.js import { Amplify } from 'aws-amplify'; import amplifyconfig from './src/amplifyconfiguration.json'; Amplify.configure(amplifyconfig);
1// App.js
2
3import { Amplify } from 'aws-amplify';
4import amplifyconfig from './src/amplifyconfiguration.json';
5Amplify.configure(amplifyconfig);
// index.js import { Amplify } from 'aws-amplify'; import amplifyconfig from './src/amplifyconfiguration.json'; Amplify.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.