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:
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:
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.
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.
Configure:
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.
Step 4: The fun part
Now let's connect the backend you created to a different frontend.
- Go to your Amplify Console.
- Click on the app you're working on.
- Click "Backend Environments".
- 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:
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!
Top comments (11)
Hi, How can you deploy different frontends with same backend. Amplify only let me use same repository with multiple branches, can I use multiple repositories?
That's an issue, thanks for bringing it up. You actually need to be in the same repo and have different branches there.
I think this link answer your question
docs.amplify.aws/cli/teams/multi-f...
That link doesn't answer Mau's question.
By "deploy" if you mean running
amplify publish
to deploy to Amplify's static hosting then the answer is no, you can't publish frontends in different repositories. Even if the Amplify cli allows you to do that, your repos will override each other.Hi,
yes I was having the same question you have.
I think the solution is to add multiple branches in the frontend envirmoent and do the sub-domain configration with amplify framework in the console .
According to this note:
Note: Whenever updating your API in your backend, make sure to copy over the new graphql files into your new frontend.
Do I need to copy files every time I have made changes? Maybe we have some way to automate this?ˇˇˇ
amplify pull --appId d45659npivltuns --envName test
EPERM: operation not permitted, rename 'D:\web-nodejs\test\amplify' -> 'D:\web-nodejs\test\amplify-backup'
Error: EPERM: operation not permitted, rename 'D:\web-nodejs\test\amplify' -> 'D:\web-nodejs\test\amplify-backup'
at Object.renameSync (fs.js:741:3)
ˇˇˇ
Same error if just run an "amplify pull".
Im on Windows10, latest
I tried to:
but i got tha same error.
If I copy the first APP's amplify directory to the second, every "amplify pull" command works..
Now, I have no idea..
Isn’t it better to have a project only for the amplify backend?
If I have two Vue frontends for the same backend. Will amplify publish push the frontend code in same repo or different?
Why do you need to create a user model? I'm supposing that you can use the userid from Cognito.
You can use the userid from cognito. But sometimes you might want to make connections with other entities in the database. In that situation, it is useful to also make a user entity in the database.