Hackathon workshop for Pearlhacks 2019 at UNC Chapel Hill
Learn about the world of serverless computing in this fast paced, bootstrapping workshop. In this session, hackers will learn about Lambda, load balancing, and serverless databases in Amazon Web Services. After this workshop, hackers will have an understanding of how to create backend API's and data tiers without needing to manage servers, operating systems, firewalls, or package managers. Combined with any number of front-end client technologies (HTML5/Javascript, Android, iOS, etc), participants should be able to create fully featured web applications that are highly scalable and super-cheap to run!
- Cognito - provides authentication and identity management (read: user logins!)
- API Gateway - provides a REST interface for the code you push into the cloud
- Lambda - a serverless runtime where your cloud functions run
- DynamoDB - a serverless NoSQL database
- S3 - static content storage; html, css, javascript, etc
- Amplify - a command line interface for provisioning all the above AWS resources with minimal effort
$ npm install -g @aws-amplify/cli
$ amplify configure
$ npx create-react-app amplify-web-app
$ cd amplify-web-app
$ npm install aws-amplify aws-amplify-react
$ npm start
$ amplify init
Alternatives to React:
$ amplify add auth
$ amplify push
import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)
import { withAuthenticator } from 'aws-amplify-react'
export default withAuthenticator(App, { includeGreetings: true });
$ amplify add api
? Please select from one of the below mentioned services REST
? Provide a friendly name for your resource to be used as a label for this category in the project: got
? Provide a path (e.g., /items) /people
? Choose a Lambda source Use a Lambda function already added in the current Amplify project
? Choose the Lambda function to invoke by this path gotpeople
? Restrict API access Yes
? Who should have access? Authenticated users only
? What kind of access do you want for Authenticated users read
? Do you want to add another path? No
app.get('/people', function(rqr, res) {
const people = [
{ name: 'Jon Snow', culture: 'Northmen' },
{ name: 'Daenerys Targaryen', culture: "Valyrian"}
]
res.json({ people });
$ amplify push
import { API } from 'aws-amplify'
state = { people: [] }
async componentDidMount() {
const data = await API.get('peopleapi', '/people')
this.setState({ people: data.people })
}
...
<table>
<tr><th>Name</th><th>Culture</th></tr>
{
this.state.people.map((person, i) => (
<tr>
<td>{ person.name }</td>
<td>{ person.culture }</td>
</tr>
))
}
</table>
$ amplify add storage
? Please select from one of the below mentioned services NoSQL Database
? Please provide a friendly name for your resource that will be used to label this category in the project: gotparties
? Please provide table name: gotparties
You can now add columns to the table.
? What would you like to name this column: id
? Please choose the data type: string
? Would you like to add another column? No
$ amplify update api
? Please select from one of the below mentioned services REST
? Please select the REST API you would want to update got
? What would you like to do Add another path
? Provide a path (e.g., /items) /parties
? Choose a Lambda source Create a new Lambda function
? Provide a friendly name for your resource to be used as a label for this category in the project: gotparties
? Provide the AWS Lambda function name: gotparties
? Choose the function template that you want to use: CRUD function for Amazon DynamoDB table (Integration with Amazon API Gateway and Amazon Dynam
oDB)
? Choose a DynamoDB data source option Use DynamoDB table configured in the current Amplify project
? Choose from one of the already configured DynamoDB tables gotparties
? Do you want to edit the local lambda function now? Yes
? Press enter to continue
Succesfully added the Lambda function locally
? Restrict API access Yes
? Who should have access? Authenticated users only
? What kind of access do you want for Authenticated users read/write
? Do you want to add another path? No
Successfully updated resource
$ amplify push
post = async() => {
const response = await API.post('got', '/parties', {
body: {
id: JSON.stringify(new Date().getTime()),
subject: 'Viewing party 2',
attendees: []
}
});
alert(JSON.stringify(response, null, 2));
}
...
<button onClick={this.post}>Add viewing party</button>
(in amplify/backend/function/gotpeople/src/app.js)
var axios = require('axios')
app.get('/people', function(req, res) {
axios.get('https://anapioficeandfire.com/api/characters?page=11&pageSize=15')
.then(response => {
const people = response.data
res.json({ error: null, people })
})
.catch(err => {
console.log('Error fetching characters: ' + err)
res.json({error: err, people: null })
})
});
$ ( cd amplify/backend/function/gotpeople/src/; npm install axios )
$ amplify push
$ yarn start
$ amplify add hosting
$ amplify publish
MIT