Amplify test

The serverless backend is in folder.

Front-end is in folder.

Tech

Installation

npm install -g @aws-amplify/cli

Configuration

Using CLI

amplify configure

Using aws-vault

aws-vault exec <profile-name> --

New project

# press enter for the default options
amplify init

Project created at AWS Console

Add new API

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

Manual deployment

amplify push

Mock

Easy local running with Amplify Mock

amplify mock

Add storage

amplify add storage

Function

amplify add function

Frontend

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

Configure amplify

Add to ./src/App.js

import Amplify from 'aws-amplify'
import awsExports from './aws-exports'
Amplify.configure(awsExports)

Add Authenticator plugin

Add to ./src/App.js

import { withAuthenticator } from '@aws-amplify/ui-react'

Storage Images

<AmplifyS3Image imgKey="profile.png" level="private" />
<AmplifyS3ImagePicker fileToKey="profile.png" level="private" track={true} />

Add hosting

amplify add hosting

Manual Deployment

amplify publish

Continuous delivery

Configure via AWS console.

Limitations

Amplify mock does not support @searchable decorator. You can remove annotation for while or use it directly in aws (omg aws!)

dtelaroli / amplify-test Goto Github PK

amplify-test's Introduction