Name: aws-mobile-react-sample
Owner: Amazon Web Services - Labs
Owner: AWS Samples
Description: A React Starter App that displays how web developers can integrate their front end with AWS on the backend. The App interacts with AWS Cognito, API Gateway, Lambda and DynamoDB on the backend.
Created: 2017-06-26 23:34:27.0
Updated: 2018-01-13 16:48:50.0
Pushed: 2018-01-09 23:45:05.0
Size: 12338
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Bootstrap a React application on AWS. This sample automatically provisions a Serverless infrastructure with authentication, authorization, website hosting, API access and database operations. It also includes user registration and MFA support. The sample use case is a “Restaurant” ordering system where after a user registers and logs in they can view different restaurant menus, select items and place orders.
This starter uses the AWS Amplify JavaScript library to add cloud support to the application.
You will be building a React application with User Registration & Sign-in that allows you to perform CRUD operations against a DynamoDB table by using an Express application running in AWS Lambda. Lambda will be invoked by API Gateway using Proxy Integration with greedy paths that only authenticated users can access. The Express server is running with the AWS Serverless Express framework.
AWS Services used:
First clone this repo:
git clone https://github.com/awslabs/aws-mobile-react-sample
Set up your AWS resources using AWS Mobile Hub by clicking the button below:
Press Import project.
Before proceeding further, in the Mobile Hub console click the Cloud Logic tile and ensure that the API deployment status at the bottom shows CREATE_COMPLETE (this can take a few moments).
Install the AWS Mobile CLI and initialize the project (from the root project folder's client directory):
m install -g awsmobile-cli
client/
smobile init your-unique-mobile-hub-project-id
Choose src as your source directory, and build as your build (the defaults). This will download and initialize your local project with your AWS Mobile backend as well as download the aws-exports.js file to your client/src directory.
You can also download the aws-exports.js file and place it in client/src/aws-exports.js by clicking Configure on the left hand bar of the Mobile Hub console and selecting the Hosting and Streaming tile. Then, at the bottom of the page click Download aws-exports.js file. Copy this file into the ./aws-mobile-react-sample/client/src/ folder of the repo you cloned.
Alternatively using the AWS CLI:
d ../aws-mobile-react-sample/client/src/
ws s3api list-buckets --query 'Buckets[?starts_with(Name,`reactsample-hosting`)].Name' |grep reactsample |tr -d '"'
ws s3api get-object --bucket <YOUR_BUCKET_NAME> --key aws-exports.js ./aws-exports.js
Navigate into ./aws-mobile-react-sample/client and run:
$ awsmobile run
To publish your application to Amazon S3 and Amazon CloudFront:
$ awsmobile publish
Alternatively using NPM:
m install
m start
Done!
Open a browser to http://localhost:8080 and view the sample. Choose Sign Up Now and type in a username, password, email address and phone number.
You should recieve a 6-digit verification code via SMS. Type this into the screen and select Validate.
Now that you are registered you will be redirected to the Login page. Type in the username and password then select Login.
You will recieve another SMS verification code. This is the MFA flow upon user login. Enter the code into the screen and select Validate.
The application demonstrates both loading sample data into the database as well as listing data and navigation. As a first time user press Insert Restaurants to load sample restaurants into the application.
The sample data is stored inside the imported Lambda function (init.js). This demonstrates how Lambda code can be used with Express to insert records into DynamoDB. The request from the client to API Gateway is signed using AWS Signature Version 4 with the credentials returned from Amazon Cognito when the user logged into the application. Refer to the advanced section of this document for more information on using this in your designs.
Now that data has been loaded select List Restaurants to display the list of restaurants that were added in the previous step. This also uses the signing process described above.
Click on the name of a restaurant to see a menu.
Press Order to place an order in the system. This will add an order entry to a DynamoDB table as well as store information in the local browser for tracking.
Press Orders in the navigation bar. You will see some information immediately from local storage and other information returned asynchronously from a call to API Gateway.
The navigation bar is optimized to work across desktop and mobile browsers. It will show either at the top of the page or in a collapsible bar on the left for mobile form factors
Select Logout in the navigation bar to return the user to the home page.
The following steps outline how you can build and deploy the application using the S3 and CloudFront resources created by the Import phase above:
Navigate to ./aws-mobile-react-sample/client and build for production by running:
$ awsmobile publish
This will automatically run the npm run-script build command, upload your application to Amazon S3 and Amazon CloudFront, and open your default web browser to the Amazon S3 static web hosting page.
If you are using a CI/CD process you may choose to automate this process. The following shows how to use a webpack plugin with AWS Credentials to automate deployment to S3:
Navigate to ./aws-mobile-react-sample/client/ directory and edit webpack.config.js file. Add the following to the top of the file:
t S3Plugin = require('webpack-s3-plugin');
Add the following as an entry to the plugins:[] section towards the bottom:
S3Plugin({
// Only upload css and js
include: /.*\.(css|js)/,
// s3Options are required
s3Options: {
accessKeyId: AWS_ACCESS_KEY_ID,
secretAccessKey: AWS_SECRET_ACCESS_KEY,
},
s3UploadOptions: {
Bucket: 'MyBucket'
}
})
NOTE: Replace the AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY and MyBucket with appropriate values such as your account keys for automation and the S3 bucket created during the import process.
install --save webpack-s3-plugin
smobile publish
The Registration and Login components leverage AWS Amplify to make calls to Amazon Cognito User Pools and Amazon Cognito Federated Identities . As an example of using it in your own application first create a React application with Create React App:
install -g create-react-app
te-react-app my-app
y-app/
start
If the application runs successfully, copy the Auth, configuration and css folders from ./aws-mobile-react-sample/client/src to ./my-app/src that was created by Create React App. Next copy index.js and Main.jsx from ./aws-mobile-react-sample/client/src to ./my-app/src. Edit the copied Main.jsx so that the return() function matches the below code:
rn (
<div>
{
!logOut && (
<BrowserRouter>
<div>
<Navbar className='nav-bar' brand='WebApp' right>
<NavItem onClick={this.signOut}>Logout</NavItem>
</Navbar>
<App/>
</div>
</BrowserRouter>)
}
{
logOut && (<AppRoute authStatus={false}/>)
}
</div>
);
Next, from your ./my-app directory, run:
install --save aws-amplify react-router-dom react-materialize react-transition-group@^1.1.3 semantic-ui-react css-loader
Edit Main.jsx and comment out the following:
port Home from './Home';
port Menu from './API/Menu';
port Orders from './API/Order';
Also add import App from './App'; to the top of Main.jsx and save the file.
Edit index.js and replace the require('file-loader....') statement towards the top with:
ire('file-loader?name=[name].[ext]./index.html');
Finally to add the styling to the page edit ./my-app/public/index.html and add the following to the head:
k rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
k rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
k rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
And add the following to the body:
ipt src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
ipt src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
You can now run your application created with Create React App with a new login page added:
start
The application should start and allow you to register users and login taking you to the normal page created with Create React App.
The sample application uses API Gateway and Lambda to run an Express application which reads and writes to a DynamoDB table. Included in the sample is a helper function for making signed requests to API Gateway. We'll show how to use this helper for making unauthenticated requests to API Gateway below and you can use the Login example above to get authenticated credentials which this sample would use.
As with the previous section first create a React application with Create React App:
install -g create-react-app
te-react-app my-app
y-app/
start
If you didn't do the previous section, copy configuration from ./aws-mobile-react-sample/client/src to ./my-app/src.
Edit ./my-app/src/App.js with the following imports at the top:
rt Link from 'link-react';
rt { Table } from 'semantic-ui-react';
rt awsmobile from './configuration/aws-exports';
rt Amplify,{API} from 'aws-amplify';
ify.configure(awsmobile);
NOTE: To make calls to API Gateway through AWS Amplify, you need your IdentityPoolID in aws-exports.js. For further documentation, refer to AWS Amplify
Modify the App component like so (NOTE: you are NOT modifying the render function YET):
s App extends Component {
ate = {
data: []
tch = async () => {
this.setState(() => {
return {
loading: true
}
});
API.get('ReactSample','/items/restaurants')
.then(resp => {
this.setState({
data: resp
});
console.log("response is : ", resp);
}
)
.catch (err => console.log(err))
nder logic below
er()....more code
Now, change the render() function like so:
er() {
return (
<div className="App">
<Link onClick={this.fetch}>
List restaurants
</Link>
<div>
<div>
{(
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Address</Table.HeaderCell>
<Table.HeaderCell>Contact</Table.HeaderCell>
<Table.HeaderCell>Rating</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.state.data.map((data, idx) =>
<Table.Row key={idx}>
<Table.Cell>{data.name}</Table.Cell>
<Table.Cell>{data.address}</Table.Cell>
<Table.Cell>{data.phone}</Table.Cell>
<Table.Cell>{data.rating}</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
)}
</div>
</div>
</div>
);
rt default App;
Save the file. Finally install the dependencies:
install --save link-react semantic-ui-react
Depending on if you want to do Authenticated or UnAuthenticated requests to API Gateway, you will need the following modification:
Authenticated Requests
Note: If you are doing an authenticated, signed request you'll also need to perform a couple more steps. First install querystring-browser
install --save querystring-browser@^1.0.4
Next you will need to configure this as a webpack alias:
lve: {
extensions: ['.js', '.jsx'],
alias: {
querystring: 'querystring-browser'
}
For our Create React App sample you will need to modify either webpack.config.dev.js or webpack.config.prod.js in the ./my-app/node_modules/react-scripts/config directory. Look for the resolve: field inside module.exports and add the querystring: 'querystring-browser' entry under the alias field.
UnAuthenticated Requests
Navigate to the API Gateway console, click on the ReactSample-MobileHub API and select Resources on the left hand side of the page. Under the /items node select ANY and then click on Method Request in the right hand side of the console. Click the dropdown labeled Authorization and select NONE. Press the Update tick box to save your changes.
In the same part of the console, select the /items/{proxy +} node followed and click ANY and then Method Request. Repeat the process of setting Authorization to NONE and saving your change.
Next deploy your changes by select Actions at the top of the page, then Deploy API and select Development as the Deployment stage. Click Deploy.
Additionally you will need to make an alteration to the ./my-app/src/App.js by changing the this.setState() function from:
.setState({
ta: resp
To:
.setState({
ta: resp.data
Finally, after making your modifications for either the Authenticated or UnAuthenticated request run the following command to launch your Create React App again:
start
Click List restaurants at the top of the page to use the AWS Amplify API component.
The sample application invokes a Lambda function running Express which will make CRUD operations to DynamoDB depending on the route which is passed from the client application. You may wish to modify this backend behavior for your own needs. The steps outline how you could add functionality to “create a Restaurant” by showing what modifications would be needed in the Lambda function and the corresponding client modifications to make the request.
* Restaurant methods *putCallback = function(err, data) {
if (err) {
console.log(err)
}
tion createMenu(restaurant_id) {
var item1 = {}
item1.id = uuid.v1()
item1.restaurant_id = restaurant_id
item1.name = "Golden Ratio Bacon Skewers"
item1.description = "Fibonacci on a stick! Who doesn?t like bacon on a stick that keeps going?"
item1.photos = []
dynamoDb.put({
Item: item1,
TableName: MENU_TABLE_NAME
}, putCallback)
var item2 = {}
item2.id = uuid.v1()
item2.restaurant_id = restaurant_id
item2.name = "Abelian Cucumber Salad"
item2.description = "A cool and refreshing salad for any hot summer day."
item2.photos = []
dynamoDb.put({
Item: item2,
TableName: MENU_TABLE_NAME
}, putCallback)
var item3 = {}
item3.id = uuid.v1()
item3.restaurant_id = restaurant_id
item3.name = "Chili-Cucumber orientable Corn"
item3.description = "Feel like you?re connected to nature with corn that wraps around your belly."
item3.photos = []
dynamoDb.put({
Item: item3,
TableName: MENU_TABLE_NAME
}, putCallback)
var item4 = {}
item4.id = uuid.v1()
item4.restaurant_id = restaurant_id
item4.name = "Finite Short-Rib Fields"
item4.description = "No utensils! BBQ is finger food!"
item4.photos = []
dynamoDb.put({
Item: item4,
TableName: MENU_TABLE_NAME
}, putCallback)
var item5 = {}
item5.id = uuid.v1()
item5.restaurant_id = restaurant_id
item5.name = "Easy Fractal Salad"
item5.description = "This symmetric pasta salad features feta, artichoke hearts, and kale."
item5.photos = []
dynamoDb.put({
Item: item5,
TableName: MENU_TABLE_NAME
}, putCallback)
* Restaurant methods * comment) add in a new POST route:post('/items/restaurants/new', function(req, res){
var restaurant = {}
restaurant.id = uuid.v1()
restaurant.name = req.body.name
restaurant.description = req.body.description
restaurant.address = req.body.address
restaurant.phone = req.body.phone
restaurant.rating =req.body.rating
dynamoDb.put({
Item: restaurant,
TableName: RESTAURANTS_TABLE_NAME
}, function(err,data){
if (err){
res.json({ message: err })
}else {
res.json({
message: "New Restaurant added!"
})
}
})
createMenu(restaurant.id)
Save the file and in the Mobile Hub console for your project click the Cloud Logic card. Expand the View resource details section and note the name of the Lambda function in the list for the next step.
In a terminal navigate to ./aws-mobile-react-sample/backend/lambda and run:
-r lambda-archive.zip .
lambda update-function-code --function-name FUNCTION_NAME --zip-file fileb://lambda-archive.zip
REPLACE the FUNCTION_NAME with your Lambda function name from the previous step.
Alternatively you could click the Lambda function resource in the Mobile Hub console which opens the Lambda console and press the Upload button on that page to upload the lambda-archive.zip file.
./aws-mobile-react-sample/client/src directory edit Home.jsx with the following code BEFORE the render() method:wRestaurant = () => {
let body = JSON.stringify({
'name': 'New Name',
'description': 'New description',
'address': 'New address',
'phone': 'New phone',
'rating': 'New rating'
});
let requestParams = {
method: 'POST',
url: apiRestarauntUri + '/new',
headers: {'content-type': 'application/json'},
body
}
this.restResponse = restRequest(requestParams)
.then(data => {
sessionStorage.setItem('latestOrder', data.id);
console.log(data);
alert('Added successfully');
})
.catch (function(error){
console.log(error);
});
Note that url: apiRestarauntUri + '/new' matches the path you made for the Express route in the Lambda function you uploaded.
return statement of the render method add in a new button next to the others:ton primary onClick={this.newRestaurant}>
w Restaurant
tton>
Save your changes and run your application again with npm start. You should have a new button after logging in. Press New Restaurant and then List Restaurants to see the new entry in the system.
The website hosting location for this sample uses an S3 bucket as the CloudFront origin. The S3 bucket is by default configured as publicly accessable for testing purposes. To learn more about restricting this access further, see Amazon S3 Security Considerations and Amazon CloudFront Security Considerations.
This sample app uses sessionStorage to persist user tokens (accessKeyId, secretAccessKey and sessionToken). They are deleted when the browser is closed and not available when new tabs are opened. You can take further actions to secure these tokens by encrypting them.
The Lambda function in this sample will read and write to DynamoDB and it's role will be granted the appropriate permissions to perform such actions. If you wish to modify the sample to perform a more restricted set of actions see Authentication and Access Control for Amazon DynamoDB.