Getting started with AWS amplify
Intro to AWS amplify and using it to simplify provisioning of required resources by using cloudformation and infrastructure as code.
It is a framework (Libraries, CLI, UI, Components) to simplify use of underlying aws services. There are no additional charges for using the amplify framework. So we can consider it as a utility to simplify creation of resources in the cloud using aws cloudformation and integrating them with our application.
Getting Started
- we will have to first install amplify cli
npm i -g @aws-amplify/cli
- Configure it with
amplify configure
- Now go to project and run
amplify init
- Now you can start adding the required features for eg auth
amplify add auth
- Once you answer all the questions of cli, it will create local backend resources.
- So the next step will be to push this to cloud and provision aws resources in the cloud for our project by running
amplify push
- If their is a build step involved to release next version of app then run
amplify publish
For a react application we can go with the following steps
yarn add aws-amplify @aws-amplify/ui-react -S
- In the app root which gets loaded first we need to import and initiate aws amplify service.
import Amplify, { Auth } from 'aws-amplify'
import awsconfig from '../aws-exports'
- Now we can wrap aur
App
withwithAuthenticator
HOC to provide us the login interface
import { withAuthenticator } from '@aws-amplify/ui-react'
...
export default withAuthenticator(App)
That’s it this will now give a login interface which will validate our users as per the user pool created during amplify add auth
step.
- For logout we can use
Auth
service of amplify like this
const handleLogout = () => {
Auth.signOut()
}
or make use of signout component provided by amplify
import { AmplifySignOut } from '@aws-amplify/ui-react'
...
<AmplifySignOut />
...
I however, ran into a painful issue -
When deploying the front-end app, aws-exports.js file is git ignored then build fails because this file is not found. Hence either do amplifyPush on the build step or use the better option I think and I use is to use values from aws-exports.js in an environment variable and then import that from env variable instead of from aws-export.js file
Let me know your feedback/suggestions in the comments.
- Ayush 🙂