To allow our React app to talk to the AWS resources that we created (in the backend section of the tutorial), we’ll be using a library called AWS Amplify.

AWS Amplify provides a few simple modules (Auth, API, and Storage) to help us easily connect to our backend.

Install AWS Amplify

Run the following command in your working directory.

$ npm install aws-amplify --save

This installs the NPM package and adds the dependency to your package.json.

Create a Config

Let’s first create a configuration file for our app that’ll reference all the resources we have created.

Create a file at src/config.js and add the following.

export default {
  s3: {
    REGION: "YOUR_S3_UPLOADS_BUCKET_REGION",
    BUCKET: "YOUR_S3_UPLOADS_BUCKET_NAME"
  },
  apiGateway: {
    REGION: "YOUR_API_GATEWAY_REGION",
    URL: "YOUR_API_GATEWAY_URL"
  },
  cognito: {
    REGION: "YOUR_COGNITO_REGION",
    USER_POOL_ID: "YOUR_COGNITO_USER_POOL_ID",
    APP_CLIENT_ID: "YOUR_COGNITO_APP_CLIENT_ID",
    IDENTITY_POOL_ID: "YOUR_IDENTITY_POOL_ID"
  }
};

Here you need to replace the following:

  1. YOUR_S3_UPLOADS_BUCKET_NAME and YOUR_S3_UPLOADS_BUCKET_REGION with the your S3 Bucket name and region from the Create an S3 bucket for file uploads chapter. In our case it is notes-app-uploads and us-east-1.

  2. YOUR_API_GATEWAY_URL and YOUR_API_GATEWAY_REGION with the ones from the Deploy the APIs chapter. In our case the URL is https://ly55wbovq4.execute-api.us-east-1.amazonaws.com/prod and the region is us-east-1.

  3. YOUR_COGNITO_USER_POOL_ID, YOUR_COGNITO_APP_CLIENT_ID, and YOUR_COGNITO_REGION with the Cognito Pool Id, App Client id, and region from the Create a Cognito user pool chapter.

  4. YOUR_IDENTITY_POOL_ID with your Identity pool ID from the Create a Cognito identity pool chapter.

Add AWS Amplify

Next we’ll set up AWS Amplify.

Import it by adding the following to the header of your src/index.js.

import { Amplify } from 'aws-amplify';

And import the config we created above.

Add the following, also to the header of your src/index.js.

import config from './config';

And to initialize AWS Amplify; add the following above the ReactDOM.render line in src/index.js.

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID
  },
  Storage: {
    region: config.s3.REGION,
    bucket: config.s3.BUCKET,
    identityPoolId: config.cognito.IDENTITY_POOL_ID
  },
  API: {
    endpoints: [
      {
        name: "notes",
        endpoint: config.apiGateway.URL,
        region: config.apiGateway.REGION
      },
    ]
  }
});

A couple of notes here.

  • Amplify refers to Cognito as Auth, S3 as Storage, and API Gateway as API.

  • The mandatorySignIn flag for Auth is set to true because we want our users to be signed in before they can interact with our app.

  • The name: "notes" is basically telling Amplify that we want to name our API. Amplify allows you to add multiple APIs that your app is going to work with. In our case our entire backend is just one single API.

  • The Amplify.configure() is just setting the various AWS resources that we want to interact with. It isn’t doing anything else special here beside configuration. So while this might look intimidating, just remember this is only setting things up.

Commit the Changes

Let’s commit our code so far and push it to GitHub.

$ git add .
$ git commit -m "Setting up our React app"
$ git push

Next up, we are going to work on creating our login and sign up forms.