POC of using AWS Amplify Framework
The serverless backend is in folder.
Front-end is in folder.
npm install -g @aws-amplify/cli
Using CLI
amplify configure
Using aws-vault
aws-vault exec <profile-name> --
# press enter for the default options
amplify init
Project created at AWS Console
amplify add api
# for auth choose: Cognito Authentication, Default Configuration, Username and No, I am done.
# for api choose: No, I am done, N, Fine grained permission with fields and N
Go to ./amplify/backend/auth/amplifytest/amplifytest-cloudformation-template.yml
Add default attributes to Cognito, you can't change after creation.
Schema:
-
Name: email
Required: true
Mutable: true
-
Name: phone_number
Required: true
Mutable: true
-
Name: preferred_username
Required: false
Mutable: true
Go to ./amplify/backend/api/amplifytest/schema.graphql
Change schema model fiting your way
amplify push
Easy local running with Amplify Mock
amplify mock
amplify add storage
amplify add function
https://docs.amplify.aws/start/getting-started/setup/q/integration/react
Create a React App
yarn add create-react-app --dev
npx create-react-app app
Add to ./src/App.js
import Amplify from 'aws-amplify'
import awsExports from './aws-exports'
Amplify.configure(awsExports)
Add to ./src/App.js
import { withAuthenticator } from '@aws-amplify/ui-react'
<AmplifyS3Image imgKey="profile.png" level="private" />
<AmplifyS3ImagePicker fileToKey="profile.png" level="private" track={true} />
amplify add hosting
amplify publish
Configure via AWS console.
Amplify mock does not support @searchable decorator. You can remove annotation for while or use it directly in aws (omg aws!)