Multiple Frontends with AWS Amplify
Tags: aws, graphql, react, reactnative
Published: 2020-05-18 20:27:46

## **Goal**

Build a React content management system that persists data (videos, images, etc.) to multiple React Native mobile apps.

Utilizing the following **AWS Services** for the backend:
- **Hosting:** Amplify Console
- **Database:** DynamoDB
- **User Authentication:** Cognito
- **Storage:** S3

Utilizing **React** for the website and **React Native** for the mobile apps.

## **Step 1: Create your GraphQL API**

Run the following command:

```
amplify add api
```

Edit your schema:

```graphql
type User 
@model(
  queries: { get: "getUser" },
  mutations: { create: "registerUser", update: "updateUser" },
  subscriptions: null
) {
  id: ID!
  username: String!
  email: String!
  registered: Boolean
  avatar: S3Object!
  createdAt: String
}

type Post @model @searchable @auth(rules: [{ allow: owner, identityClaim: "sub" }]) {
  id: ID!
  name: String!
  description: String!
  tags: [String]
  thumbnail: S3Object!
  video: S3Object!
  owner: String
  createdAt: String
  updatedAt: String
}

type S3Object {
  bucket: String!
  region: String!
  key: String!
}
```

Deploy the API:

```
amplify api push
```

You should now have a **graphql** folder in your project that lists all of your **queries,** **mutations** and **subscriptions**.

*You can view your database in the DynamoDB dashboard.*

## **Step 2: Add Authentication**

```
amplify add auth
```

Create user groups:

```
❯ Manual configuration

Do you want to add User Pool Groups? (Use arrow keys)
❯ Yes

? Provide a name for your user pool group: Admins
? Do you want to add another User Pool Group Yes
? Provide a name for your user pool group: Editors
? Do you want to add another User Pool Group No
? Sort the user pool groups in order of preference …  (Use <shift>+<right/left> to change the order)
  Admins
  Editors
```

*You can view user information in the Cognito dashboard.*

Configure your Amplify application:

```
npm install aws-amplify
```

In **App.js:**

```javascript
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
```

For more details on adding the **Authentication UI**, read the [Amplify docs](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js).

## **Step 3: Add Storage**

```
amplify add storage
```

```
? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.)
  NoSQL Database
```

```
amplify push
```

*Note: If you would like public read access for your files, be sure to [set the appropriate permissions](https://docs.aws.amazon.com/AmazonS3/latest/user-guide/set-permissions.html).*

Configure:

```javascript
import Amplify, { Storage } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
```

*You can view your files in the S3 dashboard.*

For more details on adding **Storage**, read the [Amplify docs](https://docs.amplify.aws/lib/storage/getting-started/q/platform/js).

## **Step 4: The fun part**

Now let's connect the backend you created to a different frontend.

1. Go to your Amplify Console.
2. Click on the app you're working on.
3. Click "Backend Environments".
4. Click "Edit Backend".

Copy the line of code that looks like this:

```
amplify pull --appId ************* --envName *******
```

and run that command in your new frontend environment.

**Important:** Choose **‘No’** when asked if you want to modify or add new categories to your backend. Choosing ‘Yes’ will work, but it is highly recommended that you don't have your backend stored in two separate repositories for this can lead to unintended consequences with multiple sources of truth.

You will now have access to your **amplifyconfiguration** folder in src. This means you can now use the following in this second frontend:

```javascript
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
```

You can now also copy over the **graphql** folder from your initial frontend over to your second frontend to utilize all of your **queries,** **mutations** and **subscriptions**.

*Note: Whenever updating your API in your backend, make sure to copy over the new graphql files into your new frontend.*

## **You did it!**

You can now use AWS Amplify to access your backend data with multiple frontends. This can especially be useful when you need to share data between web and mobile.

If you have any questions, please feel free to send me a message or ask in the comments!