In Part1, we have learned and built the AWS services (API Gateway, Lambda, DynamoDB) specific components of the serverless architecture as shown below. We shall build the rest of the serverless architecture in this article. To sum it up, we will build Jotter (a note taking app) in React and use Amplify to talk to these AWS services. Finally we shall deploy the React app on S3 cloud storage.
After deployment:
Building the rest of the architecture
- Setting up a Cognito User Pool and Identity pool
- Building React application and configure Amplify.
- Create Sign-in, Sign-up using Cognito with Amplify.
- API Gateway integration.
- Secure the API Gateway with Cognito and test it.
- Deployment on S3 cloud storage.
Setting up a Cognito User Pool and Identity pool
Go to AWS console > Cognito > Create user pool.
Give the pool a name, and click on Review defaults.
This will show all the default settings for a cognito user pool, let’s go to each section on the left nav bar and modify accordingly such that it looks like below and create the cognito user pool.
Creating an App client. While creating an app client do not enable generate client secret.
After all modifications go to review and create pool. Now note down Pool Id, Pool ARN and App client Id.
More details on setting up an authentication service using Cognito can be found here.
Let us build an Identity pool, which we could use to access AWS services (API Gateway in our case). But before that let us understand the difference between user pool and identity pool. Below image accurately depicts how both the services are different and how they complement each other.
Now we need to specify what AWS resources are accessible for users with temporary credentials obtained from the Cognito Identity Pool. In our case we want to invoke API gateway. Below policy exactly does that.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"mobileanalytics:PutEvents",
"cognito-sync:*",
"cognito-identity:*"
],
"Resource": [
"*"
]
},
{
"Effect": "Allow",
"Action": [
"execute-api:Invoke"
],
"Resource": [
"arn:aws:executeapi:YOUR_API_GATEWAY_REGION:*:YOUR_API_GATEWAY_ID/*/*/*"
]
}
]
}Add your API Gateway region and gateway id in the resource ARN.
Copy paste the above policy, and click Allow. Click on edit identity pool and note down the Identity pool ID.
Building React application and configuring Amplify
Create a new react project:
create-react-app jotterNow go to project directory and run the app.
cd jotter
npm startYou should see your app running on local host port 3000. To start editing, open project directory in your favourite code editor.
Open up public/index.html and edit the title tag to:
<title>Jotter - A note taking app</title>Installing react-bootstrap:
We shall be using bootstrap for styling
npm install react-bootstrap --saveWe also need bootstrap CDN for the above library to work. Open up public/index.html file and add the below CDN link above title tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" />Handle Routes with React Router:
We are building a single page app, we are going to use React Router to handle routes/navigation.
Go to src/index.js replace
ReactDOM.render(<App />, document.getElementById('root'));with
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));Let us create a routes component.
routes.js:
import React from "react";
import CreateJot from './CreateJot';
import AllJotsList from './AllJotsList';
import Login from './Login';
import Signup from './Signup';
import NotFound from './NotFound';
import Viewjot from './Viewjot';
import { Route, Switch } from "react-router-dom";
export default () =>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/newjot" component={CreateJot} />
<Route exact path="/alljots" component={AllJotsList} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<Route exact path="/view" component={Viewjot}/>
<Route component={NotFound} />
</Switch>;If you observed we used a switch component here, which is more like an if else ladder statement, first match is rendered. If no path matches, then the last NotFound component is rendered. For now all the above components simply return <h1> tag with the name of the component. Create all the components like the following.
Signup.js
import React from 'react';
export default class Signup extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render(){
return (
<h1>Signup</h1>
);
}
}Lets us setup navigation and test our routes.
App.js
import React, {Fragment} from 'react';
import { Link, NavLink } from "react-router-dom";
import Routes from './components/Routes';
import { withRouter } from 'react-router';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false
}
}
render(){
return (
<Fragment>
<div className="navbar navbar-expand-lg navbar-light bg-light">
<Link to="/" className="navbar-brand" href="#"><h1>Jotter.io</h1></Link>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
{this.state.isAuthenticated ?
<Fragment>
<li className="nav-item">
<NavLink onClick={this.handleLogout}>Logout</NavLink>
</li>
<li className="nav-item">
<NavLink to="/newjot" className="nav-link">New Jot</NavLink>
</li>
<li className="nav-item">
<NavLink to="/alljots" className="nav-link">All Jots</NavLink>
</li>
<li className="nav-item">
<NavLink to="/viewjot" className="nav-link">View Jot</NavLink>
</li>
</Fragment> :
<Fragment>
<li className="nav-item">
<NavLink to="/login" className="nav-link">Login</NavLink>
</li>
<li className="nav-item">
<NavLink to="/signup" className="nav-link">Signup</NavLink>
</li>
</Fragment>
}
</ul>
</div>
</div>
<Routes/>
</Fragment>
);
}
}
export default withRouter(App);What we have done is initially set the isAuthenticated state to false. And conditionally render the navigation bar to show only those routes which are accessible when the user isn’t logged in and vice versa.
Let us test our routes now.
Now our routes are working fine. Though we conditionally rendered the navigation bar, all routes are still accessible via URL.
We shall work on securing our routes, once we configure Amplify. Let us build the Login and Signup components and then configure Amplify to secure our routes.
Login.js
import React, { Component } from "react";
import { FormGroup, FormControl, FormLabel, Button } from "react-bootstrap";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
validateForm() {
return this.state.email.length > 0 && this.state.password.length>0;
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = event => {
event.preventDefault();
console.log("Submitted",this.state.email,this.state.password);
}
render() {
return (
<div className="Home">
<div className="col-md-4">
<form >
<FormGroup controlId="email">
<FormLabel>Email</FormLabel>
<FormControl
autoFocus
type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="password" >
<FormLabel>Password</FormLabel>
<FormControl
value={this.state.password}
onChange={this.handleChange}
type="password"
/>
</FormGroup>
<Button onClick={this.handleSubmit}>
Login
</Button>
</form>
</div>
</div>
);
}
}Simple login page that logs user credentials on submit.
Signup.js
import React, { Component } from "react";
import { FormText, FormGroup, FormControl, FormLabel } from "react-bootstrap";
import React, { Component } from "react";
import { FormText, FormGroup, FormControl, FormLabel, Button } from "react-bootstrap";
export default class sample extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
confirmPassword: "",
confirmationCode: "",
newUser: null
};
}
validateForm() {
return (
this.state.email.length > 0 && this.state.password.length > 0 && this.state.password === this.state.confirmPassword);
}
validateConfirmationForm() {
return this.state.confirmationCode.length > 0;
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = async event => {
event.preventDefault();
}
handleConfirmationSubmit = async event => {
event.preventDefault();
}
render() {
return (
<div className="Signup">
{this.state.newUser === null ? this.renderForm() : this.renderConfirmationForm()}
</div>
);
}
renderConfirmationForm() {
return (
<div className="Home">
<div className="col-md-4">
<form onSubmit={this.handleConfirmationSubmit}>
<FormGroup controlId="confirmationCode" >
<FormLabel>Confirmation Code</FormLabel>
<FormControl
autoFocus
type="tel"
value={this.state.confirmationCode}
onChange={this.handleChange}
/>
<FormText>Please check your email for the code.</FormText>
</FormGroup>
<Button type="submit">
Verify
</Button>
</form>
</div>
</div>
);
}
renderForm() {
return (
<div className="Home">
<div className="col-md-4">
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="email" >
<FormLabel>Email</FormLabel>
<FormControl
autoFocus
type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="password" >
<FormLabel>Password</FormLabel>
<FormControl
value={this.state.password}
onChange={this.handleChange}
type="password"
/>
</FormGroup>
<FormGroup controlId="confirmPassword" >
<FormLabel>Confirm Password</FormLabel>
<FormControl
value={this.state.confirmPassword}
onChange={this.handleChange}
type="password"
/>
</FormGroup>
<Button type="submit">
Signup
</Button>
</form>
</div>
</div>
);
}
}Configuring Amplify:
Install aws-amplify.
npm install --save aws-amplifyCreate a config file with all the required details to connect to aws services we created earlier in part1.
config.js
export default {
apiGateway: {
REGION: "xx-xxxx-x",
URL: " https://xxxxxxxxxx.execute-api.xx-xxxx-x.amazonaws.com/dev/"
},
cognito: {
REGION: "xx-xxxx-x",
USER_POOL_ID: "xx-xxxx-x_yyyyyxxxx",
APP_CLIENT_ID: "xxxyyyxxyxyxyxxyxyxxxyxxyx",
IDENTITY_POOL_ID: "xx-xxxx-x:aaaabbbb-aaaa-cccc-dddd-aaaabbbbcccc"
}
};Import the config.js file and aws-amplify.
Open up index.js and add the configuration like this.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router} from "react-router-dom";
import config from "./config";
import Amplify from "aws-amplify";
Amplify.configure({
Auth: {
mandatorySignIn: true,
region: config.cognito.REGION,
userPoolId: config.cognito.USER_POOL_ID,
identityPoolId: config.cognito.IDENTITY_POOL_ID,
userPoolWebClientId: config.cognito.APP_CLIENT_ID
},
API: {
endpoints: [
{
name: "jotter",
endpoint: config.apiGateway.URL,
region: config.apiGateway.REGION
},
]
}
});
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
serviceWorker.unregister();Now we have successfully configured amplify, we could connect to and use aws services with ease. If you would like to use any other aws services, you know where to configure them.
App.js
import React, {Fragment} from 'react';
import { Link, NavLink } from "react-router-dom";
import Routes from './components/Routes';
import { withRouter } from 'react-router';
import { Auth } from "aws-amplify";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false
}
}
userHasAuthenticated = (value) => {
this.setState({ isAuthenticated: value });
}
handleLogout = async event => {
await Auth.signOut();
this.userHasAuthenticated(false);
this.props.history.push("/login");
}
async componentDidMount() {
try {
await Auth.currentSession();
this.userHasAuthenticated(true);
this.props.history.push("/alljots");
}
catch(e) {
if (e !== 'No current user') {
alert(e);
}
}
}
render(){
return (
<Fragment>
<div className="navbar navbar-expand-lg navbar-light bg-light">
<Link to="/" className="navbar-brand" href="#"><h1>Jotter.io</h1></Link>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
{this.state.isAuthenticated ?
<Fragment>
<li className="nav-item">
<NavLink onClick={this.handleLogout}>Logout</NavLink>
</li>
<li className="nav-item">
<NavLink to="/newjot" className="nav-link">New Jot</NavLink>
</li>
<li className="nav-item">
<NavLink to="/alljots" className="nav-link">All Jots</NavLink>
</li>
<li className="nav-item">
<NavLink to="/viewjot" className="nav-link">View Jot</NavLink>
</li>
</Fragment> :
<Fragment>
<li className="nav-item">
<NavLink to="/login" className="nav-link">Login</NavLink>
</li>
<li className="nav-item">
<NavLink to="/signup" className="nav-link">Signup</NavLink>
</li>
</Fragment>
}
</ul>
</div>
</div>
<Routes userHasAuthenticated={this.userHasAuthenticated} isAuthenticated = {this.state.isAuthenticated}/>
</Fragment>
);
}
}
export default withRouter(App);We did 3 things here:
- Checking if there is any session after the component is mounted, so the isAuthenticated state is set to true.
- Handling the logout click by clearing the session using Auth.signOut method.
- Passing the isAuthenticated state and userHasAuthenticated function as props to all the routes. By doing so Login and Signup component can update the isAuthenticated state and all the other components receive this state as props.
Routes.js
import React from "react";
import CreateJot from './CreateJot';
import AllJotsList from './AllJotsList';
import Login from './Login';
import Signup from './Signup';
import NotFound from './NotFound';
import Viewjot from './Viewjot';
import { Route, Switch } from "react-router-dom";
export default ( {childProps }) =>
<Switch>
<Route path="/" exact component={Login} props={childProps}/>
<Route exact path="/newjot" component={CreateJot} props={childProps}/>
<Route exact path="/alljots" component={AllJotsList} props={childProps}/>
<Route path="/login" exact component={Login} props={childProps}/>
<Route path="/signup" exact component={Signup} props={childProps} />
<Route path="/view" exact component={Viewjot}></Route>
<Route component={NotFound} />
</Switch>;Signup.js
import React, { Component } from "react";
import { FormText, FormGroup, FormControl, FormLabel, Button} from "react-bootstrap";
import { Auth } from "aws-amplify";
export default class Signup extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
confirmPassword: "",
confirmationCode: "",
newUser: null
};
}
validateForm() {
return (
this.state.email.length > 0 && this.state.password.length > 0 && this.state.password === this.state.confirmPassword);
}
validateConfirmationForm() {
return this.state.confirmationCode.length > 0;
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = async event => {
event.preventDefault();
try {
const newUser = await Auth.signUp({
username: this.state.email,
password: this.state.password
});
this.setState({newUser});
} catch (e) {
alert(e.message);
}
}
handleConfirmationSubmit = async event => {
event.preventDefault();
try {
await Auth.confirmSignUp(this.state.email, this.state.confirmationCode);
await Auth.signIn(this.state.email, this.state.password);
this.props.userHasAuthenticated(true);
this.props.history.push("/");
} catch (e) {
alert(e.message);
}
}
render() {
return (
<div className="Signup">
{this.state.newUser === null ? this.renderForm() : this.renderConfirmationForm()}
</div>
);
}
renderConfirmationForm() {
return (
<div className="Home">
<div className="col-md-4">
<form onSubmit={this.handleConfirmationSubmit}>
<FormGroup controlId="confirmationCode" >
<FormLabel>Confirmation Code</FormLabel>
<FormControl
autoFocus
type="tel"
value={this.state.confirmationCode}
onChange={this.handleChange}
/>
<FormText>Please check your email for the code.</FormText>
</FormGroup>
<Button type="submit">
Verify
</Button>
</form>
</div>
</div>
);
}
renderForm() {
return (
<div className="Home">
<div className="col-md-4">
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="email" >
<FormLabel>Email</FormLabel>
<FormControl
autoFocus
type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="password" >
<FormLabel>Password</FormLabel>
<FormControl
value={this.state.password}
onChange={this.handleChange}
type="password"
/>
</FormGroup>
<FormGroup controlId="confirmPassword" >
<FormLabel>Confirm Password</FormLabel>
<FormControl
value={this.state.confirmPassword}
onChange={this.handleChange}
type="password"
/>
</FormGroup>
<Button type="submit">
Signup
</Button>
</form>
</div>
</div>
);
}
}Let us test it.
Once user is successfully created, you shall see user appear in the User Pool.
You will be redirected to Login page. As we haven’t secured our routes and you should be seeing this.
Let’s create those routes now.
Routes.js
import React from "react";
import CreateJot from './CreateJot';
import AllJotsList from './AllJotsList';
import Login from './Login';
import Signup from './Signup';
import NotFound from './NotFound';
import Viewjot from './Viewjot';
import { Route, Switch } from "react-router-dom";
import AuthorizedRoute from "./AuthorizedRoute";
import UnAuthorizedRoute from "./UnAuthorizedRoute";
export default (cprops) =>
<Switch>
<UnAuthorizedRoute path="/login" exact component={Login} cprops={cprops}/>
<UnAuthorizedRoute path="/signup" exact component={Signup} cprops={cprops}/>
<AuthorizedRoute exact path="/newjot" component={CreateJot} cprops={cprops}/>
<AuthorizedRoute exact path="/alljots" component={AllJotsList} cprops={cprops}/>
<AuthorizedRoute exact path="/viewjot" component={Viewjot} cprops={cprops}/>
<AuthorizedRoute exact path="/" component={AllJotsList} cprops={cprops}/>
<Route component={NotFound} />
</Switch>;AuthorizedRoute.js
import React from 'react'
import { Redirect, Route } from 'react-router-dom'
const AuthorizedRoute = ({ component: Component, cprops, ...rest }) => {
// Add your own authentication on the below line.
return (
<Route {...rest} render={props =>
cprops.isAuthenticated ? <Component {...props} {...cprops} /> : <Redirect to="/login" />}
/>
)
}
export default AuthorizedRouteWhat we did here is if logged in then we simply redirect to the component or else to login.
UnAuthorizedRoute.js
import React from 'react'
import { Redirect, Route } from 'react-router-dom'
const UnAuthorizedRoute = ({ component: Component, cprops, ...rest }) => {
// Add your own authentication on the below line.
return (
<Route {...rest} render={props =>
!cprops.isAuthenticated ? <Component {...props} {...cprops} /> : <Redirect to="/" />}
/>
)
}
export default UnAuthorizedRouteWhat we did here is if not logged in then we simply redirect to login or else to the component. Let us add the login functionality to our login page using Auth.signIn method.
Login.js
import React, { Component } from "react";
import { FormGroup, FormControl, FormLabel, Button } from "react-bootstrap";
import { Auth } from "aws-amplify";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
validateForm() {
return this.state.email.length > 0 && this.state.password.length>0;
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleSubmit = async event => {
event.preventDefault();
try {
await Auth.signIn(this.state.email, this.state.password);
this.props.userHasAuthenticated(true);
this.props.history.push("/alljots");
} catch (e) {
alert(e.message);
}
}
render() {
return (
<div className="Home">
<div className="col-md-4">
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="email">
<FormLabel>Email</FormLabel>
<FormControl
autoFocus
type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="password" >
<FormLabel>Password</FormLabel>
<FormControl
value={this.state.password}
onChange={this.handleChange}
type="password"
/>
</FormGroup>
<Button type="submit">
Login
</Button>
</form>
</div>
</div>
);
}
}Securing API with Cognito:
Earlier in part1, we have created an API called jotter, now go to Authorizers section and create new Authorizer.
Once created, let us go to each resource and add authorization.
Do this for all the resources in the API.
API Gateway integration:
AllJotsList.js
import React from 'react';
import {Button} from 'react-bootstrap';
import {API, Auth} from 'aws-amplify';
import { Link } from "react-router-dom";
export default class AllJotsList extends React.Component{
constructor(props) {
super(props);
this.state = {
jotlist: []
}
};
handleDelete = async (index) => {
let djot = this.state.jotlist[index];
let sessionObject = await Auth.currentSession();
let idToken = sessionObject.idToken.jwtToken;
let userid = sessionObject.idToken.payload.sub;
try {
const status = await this.DeleteNote(djot.jotid,userid,idToken);
const jotlist = await this.jots(userid,idToken);
this.setState({ jotlist });
} catch (e) {
alert(e);
}
}
DeleteNote(jotid,userid,idToken) {
let path = "jot?jotid="+jotid+"&userid="+userid;
let myInit = {
headers: { Authorization: idToken }
}
return API.del("jotter", path,myInit);
}
handleEdit = async (index) => {
let jotlist = this.state.jotlist;
let sessionObject = await Auth.currentSession();
let idToken = sessionObject.idToken.jwtToken;
let userid = sessionObject.idToken.payload.sub;
let path = "/view?jotid="+jotlist[index].jotid+"&userid="+userid;
this.props.history.push(path);
}
async componentDidMount() {
if (!this.props.isAuthenticated) {
return;
}
try {
let sessionObject = await Auth.currentSession();
let idToken = sessionObject.idToken.jwtToken;
let userid = sessionObject.idToken.payload.sub;
const jotlist = await this.jots(userid,idToken);
this.setState({ jotlist });
} catch (e) {
alert(e);
}
}
jots(userid,idToken) {
let path = "/alljots?userid="+userid;
let myInit = {
headers: { Authorization: idToken }
}
return API.get("jotter", path, myInit);
}
render(){
if(this.state.jotlist == 0)
return(<h2>Please <Link to="/newjot">add jots</Link> to view.</h2>)
else
return(
<div className="col-md-6">
<table style={{"marginTop":"2%"}} className="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
{/* <th scope="col">Last modified</th> */}
<th scope="col">Title</th>
<th scope="col">Options</th>
</tr>
</thead>
<tbody>
{
this.state.jotlist.map((jot, index) => {
return(
<tr key={index}>
<td>{index+1}</td>
{/* <td>{jot.lastmodified}</td> */}
<td>{jot.title}</td>
<td>
<Button variant="outline-info" size="sm"
type="button"
onClick={()=>this.handleEdit(index)}
>Edit
</Button>
{" | "}
<Button variant="outline-danger" size="sm"
type="button"
onClick={()=>this.handleDelete(index)}
>Delete
</Button>
</td>
</tr>
)})
}}
</tbody>
</table>
</div>
);
}
}What we are doing here:
- An async call to our alljots api to get list of jots available for a given user, using API.get method.
- Since we have secured our API gateway with cognito, we need to send the id token in the Authorization header. Once we logged in Amplify automatically sets the session. We simply have to call the Auth.currentSession() method to get the session object. This session object contains all the data including tokens we need.
- Once we receive a successful response, if the list is empty we display a message “Please add jots to view.” Otherwise we iterate the list and display them as table.
- Each record in the table has an edit, and delete options. Edit option redirects to Viewjot component while delete is handled here itself using API.del method. After a successful response, 1-3 steps are repeated.
In the process of testing, I have deleted and created new jots. Now, you should be seeing a list of all jots of a logged in user.
For Viewjot and CreateJot we are using CKEditor.
Viewjot.js
import React, {Fragment} from 'react';
import {Button} from 'react-bootstrap';
import CKEditor from '@ckeditor/ckeditor5-react';
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';
import { API, Auth } from "aws-amplify";
import queryString from "query-string";
export default class ViewJot extends React.Component {
constructor(props, match) {
super(props,match);
this.state = {
titledata: "",
bodydata: "",
userid: "",
jotid: "",
edit: false
}
};
onTitleChange = (event, editor) => {
const data = editor.getData();
this.setState({
titledata: data
});
}
onBodyChange = (event, editor) => {
const data = editor.getData();
this.setState({
bodydata: data
});
}
validateJot = () => {
return this.state.titledata.length > 0 && this.state.bodydata > 0;
}
editJot = () => {
this.setState({edit:true})
}
saveJot = async event => {
event.preventDefault();
let note = {
title: this.state.titledata,
body: this.state.bodydata,
userid: this.state.userid,
jotid: this.state.jotid
};
try {
let sessionObject = await Auth.currentSession();
let idToken = sessionObject.idToken.jwtToken;
await this.saveNote(note,idToken);
this.props.history.push("/alljots");
}catch (e) {
alert(e);
}
}
saveNote(note, idToken) {
let myInit = {
headers: { Authorization: idToken},
body: note
}
return API.post("jotter", "/newjot", myInit)
}
async componentDidMount(){
try{
let sessionObject = await Auth.currentSession();
let idToken = sessionObject.idToken.jwtToken;
let jot = await this.getNote(idToken);
this.setState({
titledata: jot.title,
bodydata: jot.body,
userid: jot.userid,
jotid: jot.jotid
});
}catch(e){
alert(e);
}
}
getNote(idToken) {
let params = queryString.parse(this.props.location.search);
let path = "jot?jotid="+params.jotid+"&userid="+params.userid;
let myInit = {
headers: { Authorization: idToken }
}
return API.get("jotter", path,myInit);
}
render() {
return (
<Fragment>
{!this.state.edit &&
<div style={{marginTop: "1%", marginLeft: "5%"}}>
<Button
onClick={this.editJot}
>
Edit
</Button>
</div>}
{this.state.edit &&
<div style={{marginTop: "1%", marginLeft: "5%"}}>
<Button
onClick={this.saveJot}
>
Save
</Button>
</div>}
<div style={{marginTop: "1%", marginLeft: "5%", width: "60%",border: "1px solid #cccc", marginBottom: "1%"}}>
<CKEditor
data={this.state.titledata}
editor={BalloonEditor}
disabled={!this.state.edit}
onChange={(event, editor) => {
this.onTitleChange(event, editor);
}}/>
</div>
<div style={{marginLeft: "5%", width: "60%",border: "1px solid #cccc"}}>
<CKEditor
data={this.state.bodydata}
editor={BalloonEditor}
disabled={!this.state.edit}
onChange={(event, editor) => {
this.onBodyChange(event, editor);
}}/>
</div>
</Fragment>
);
}
}What we are doing here is:
- As we redirect from all jots table on edit, we send the jot id as path parameter and use this to get data from API using API.get method.
- We have 2 modes built using state. We then use CKEditor in disable mode to only view the jot.
- Edit mode to edit jot data and a post request to update the data using API.post method.
- Same thing with CreateJot but only edit mode.
CreateJot.js
import React, {Fragment} from 'react';
import {Button} from 'react-bootstrap';
import CKEditor from '@ckeditor/ckeditor5-react';
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';
import { API,Auth } from "aws-amplify";
const titlecontent = "Title..";
const bodycontent = "Start writing notes..";
export default class CreateJot extends React.Component {
constructor(props) {
super(props);
this.state = {
titledata: titlecontent,
bodydata: bodycontent,
}
};
onTitleChange = (event, editor) => {
const data = editor.getData();
this.setState({
titledata: data
});
}
onBodyChange = (event, editor) => {
const data = editor.getData();
this.setState({
bodydata: data
});
}
validateJot = () => {
return this.state.titledata.length > 0 && this.state.bodydata > 0;
}
createNew = async event => {
event.preventDefault();
let sessionObject = await Auth.currentSession();
let idToken = sessionObject.idToken.jwtToken;
let userid = sessionObject.idToken.payload.sub;
let note = {
title: this.state.titledata,
body: this.state.bodydata,
userid: userid,
jotid: this.createJotid()
};
try {
await this.createNote(note,idToken);
this.props.history.push("/");
}catch (e) {
alert(e);
}
}
createNote(note,idToken) {
let myInit = {
headers: { Authorization: idToken },
body: note
}
return API.post("jotter", "/newjot", myInit);
}
createJotid(){
let dt = new Date().getTime();
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
let r = (dt + Math.random()*16)%16 | 0;
dt = Math.floor(dt/16);
return (c=='x' ? r :(r&0x3|0x8)).toString(16);
});
return uuid;
}
render() {
return (
<Fragment>
<div style={{marginTop: "1%", marginLeft: "5%"}}>
<Button
onClick={this.createNew}
>
Create
</Button>
</div>
<div style={{marginTop: "1%", marginLeft: "5%", width: "60%",border: "1px solid #cccc", marginBottom: "1%"}}>
<CKEditor
data={titlecontent}
editor={BalloonEditor}
onChange={(event, editor) => {
this.onTitleChange(event, editor);
}}/>
</div>
<div style={{marginLeft: "5%", width: "60%",border: "1px solid #cccc"}}>
<CKEditor
data={bodycontent}
editor={BalloonEditor}
onChange={(event, editor) => {
this.onBodyChange(event, editor);
}}/>
</div>
</Fragment>
);
}
}Deployment on S3 cloud storage
Manual Deployment:
Create a public S3 bucket. Then build react application using the command:
npm run buildThis creates a folder named ‘build’ in the project directory with all the static files. Upload these files into the S3 bucket you created earlier.
After the upload is complete. Goto S3 bucket properties and enable Static website hosting. This will give you a URL endpoint to access the static files from browser. Now your web app is hosted on S3, and can be visited using the URL endpoint. You could also map a custom domain of yours to this endpoint. This way when users visit this custom domain, internally they are redirected to this endpoint.
Open Chrome or Firefox, and visit the endpoint. You should see your app running. Now your application is open to the world.
Auto Deployment:
What about code updates? Should i keep uploading static files to S3 manually again and again? No, you don’t have to. You could either build a sophisticated CI/CD pipeline which uses webhooks like Jenkins that pull code from Git events or automate the manual build and deploy to S3 process using react scripts with aws cli.
Thanks for the read, I hope it was helpful.
This story is authored by Koushik. He is a software engineer and a keen data science and machine learning enthusiast.
Comments