Notes On Serverless Architecture

Browser (Thin Client)  => Middle Layer => Database  (3 Tier Architecture)


Browser => API-Gate Way => Many FaaS Services => Database
   ||
   ======> Database
   ||
   ======> Authentication Service

npm install aws-amplify --save

npm install @aws-amplify/auth --save   # Only if you want only specific module.

# If you are developing a React app ...
npm install aws-amplify-react --save

# npx - Execute command from npm modules.
npx create-react-app amplify-web-app

cd amplify-web-app

yarn add aws-amplify aws-amplify-react
# or
npm install aws-amplify aws-amplify-react

npm install -g @aws-amplify/cli

# Setup a new AWS user. ????

amplify configure

# Initializing a New AWS Amplify Project
amplify init

# Note the .amplifyrc file and ./ampify/ dir created in the root directory
# of our React project. These files hold configuration info about our Amplify
# project, and we don't need to touch them at all for now.

amplify add auth

# Run amplify push to create the new service in our account:
amplify push


# Once the service has been created, you can see this at 
# https://console.aws.amazon.com/cognito/users/ 

# Also view all enabled services by  ...
amplify status

# Notice a new file that was created: aws-exports.js in the root folder 
# of the React app. You will not need to edit this file.

# Prepare your App to set up authentication shortly later ...
# Modify your react app index.js to call Amplify.configure()

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

# Using the withAuthenticator Higher-Order Component

# In App.js, import the withAuthenticator HOC at the top of the file:
import { withAuthenticator } from 'aws-amplify-react'
....
# And, at the bottom, update the export statement  ...
export default withAuthenticator(App)

# Testing the Authentication Flow
# Now, we can run the app and should see a sign-in screen:

# To include Sign out option ....
export default withAuthenticator(App, { includeGreetings: true })

# Note that we can also use the Auth class directly to sign users out:
import { Auth } from 'aws-amplify'

// Sign the user out
await Auth.signOut()

# Using the Auth Class
# We can also use the Auth class to manually manage users. Auth has over 30
# available methods including signUp, signIn, confirmSignUp, confirmSignIn,
# forgotPassword, and resendSignUp.

# Storage With Amazon S3

amplify add storage

# Next, you'll be prompted to supply some configuration details.

# Run amplify push to create the new resources (S3, etc) in our account:
amplify push

# Store javascript code in S3 bucket.

import { Storage } from 'aws-amplify'

// create function to work with Storage
addToStorage = () => {
  Storage.put('javascript/MyReactComponent.js', `
    import React from 'react'
    const App = () => (
      <p>Hello World</p>
    )
    export default App
  `)
    .then (result => {
      console.log('result: ', result)
    })
    .catch(err => console.log('error: ', err));
}

# To deploy and host your app on AWS, we can use the hosting category.

amplify add hosting

# Again, you'll be prompted to supply some configuration options.

# Now, everything is set up, and we can publish the app:

amplify publish
amplify remove auth
amplify push

amplify status