Serverless React App Workshop

This workshop is designed to help you start building Serverless React Apps using the AWS services. You will have the following infrastructure running on your local setup:

The same setup in the AWS infrastructure looks like this:

For simplification purposes we will be creating a basic Contact Us application. The application will be implemented using a 3 Tier Architecture:

• Presentation using ReactJS This tier is also known as Front-end.
  • A page with a contact form with a name, email and message.
  • A page with a list of received contacts.
• Logic using AWS Lambda This tier is also known as Back-end.
  • Two endpoints for submitting the form and reading all contacts.
• Data using AWS DynamoDB and AWS DynamoDB-local This tier is also known as Persistency.
  • A database to store all contacts.

What will not be covered (for now)

• Authentication
• Authorization
• Deployment to AWS

Table of Contents

• Pre-requisites
• Running locally
• Essentials

Pre-requisites

You should be familiar with the Composition Pattern because React recommends it. Please have a look at the Composition vs Inheritance page from the React docs.

Although we will not cover deployment into AWS in this workshop, you still need to create an AWS Free Tier account in order to use the local stack.

After creating your account and installing the software from the Logic section, please run the following command to configure your local default settings:

aws configure

Presentation

For the presentation tier we will be using:

• Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine.
• Bootstrap - A front-end component library.
• npm 5.2+ - Package manager and software registry for JavaScript.

Via npm (already in package.json):

• ReactJS - A JavaScript library for building user interfaces.
• React Router - Declarative routing for React.
• React Router Dom - DOM bindings for React Router.
• cross-env - Set and use environment variables across platforms.

Logic

For the backend tier we will be using:

• Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine.
• Docker - Runtime virtualization using containers.
• AWS cli - Unified command line interface to Amazon Web Services.
• AWS SAM - An open-source framework for building serverless applications in AWS.

Via npm (already in package.json):

• AWS SDK - AWS SDK for JavaScript.
• Axios - Promise based HTTP client for the browser and node.js.

Data

For the data tier we will be using:

• Docker - Runtime virtualization using containers.
• DynamoDB - A fast and flexible NoSQL database service for any scale.
• DynamoDB local - A downloadable version of DynamoDB that enables developers to develop and test applications using a version of DynamoDB running in your own development environment.
• Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine.
• npm 5.2+ - Package manager and software registry for JavaScript.

Via npm (already in package.json):

• AWS SDK - AWS SDK for JavaScript.
• cross-env - Set and use environment variables across platforms.

Running Locally

To run this project in development mode you need to:

1. clone the repository

   git clone https://github.com/rafaelspinto/workshop-serverless-react-app

2. if you are using Linux or MacOS you can run the start.sh script at the root of the project:

   ./start.sh

or

2. start the 3 tiers independently (using the following commands):

• Starting the Presentation tier

  cd presentation
  npm install # only required in the first time
  npm start

• Starting the Logic tier

  cd logic
  cd handlers; npm install; cd .. # only required in the first time
  sam local start-api --docker-network lambda-local

• Starting the Data tier

  docker run -d --rm --name dynamodb-local --network lambda-local -p 8000:8000 amazon/dynamodb-local
  cd data 
  npm install # only required in the first time
  npm run create-local-db

3. Stopping the Data tier

   docker stop dynamodb-local
   

Essentials

Code changes

The tools used here support hot reloading, which means that everytime you change the code it will automatically be reflected on the local application.

Note: changes to the SAM template.yaml file will only be reflected when you restart the sam local start-api... command.

AWS

• You need at least an AWS Free Tier account in order to use the local or cloud stack.
• To configure locally your AWS account run the command aws configure:
  • Credentials will be stored in ~/.aws/credentialsand are a set of access_key_id + secret_access_key.
  • Configuration will be stored in ~/.aws/configand requires at least the region.

Docker

• A local docker network called lambda-local needs to be created to easily support communication between lambda and dynamodb.

JavaScript

• Promises are a mechanism used to support asynchronous operations, that gives you resolve and reject functions to handle the result after it was processed. A good example of this is the axios http client:

  axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

AWS SDK

• Documentation for AWS SDK

ReactJS

ReactJS

• Composition over Inheritance, see Composition vs Inheritance.
• Updates and renders the right components on data change.
• JSX syntax (xml-like):

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

• props holds the Component attributes.
• state holds the Component state.
• MUST know methods:
  • render() - defines how a Component shall be rendered.
  • componentWillMount() - perform actions before component is mounted (e.g.: fetch data)
  • componentWillUnmount() - perform actions before component unmounted (e.g.: clear timers)
• It is configured to run locally at Port 3001 | http://localhost:3001

AWS Lambda

AWS Lambda

• Local usage is possible with the docker image lambci/lambda:nodejs8.10.
• It is configured to run locally at Port 3000 | http://localhost:3000

AWS Serverless Application Model (SAM)

AWS SAM

• Relies on a file called template.yaml that specifies the Resources (Functions, Database, APIs, etc). This is an extension to CloudFormation.
• Has a command line tool sam that uses the aws-cli as a base.

AWS DynamoDB

DynamoDB

• Local usage is possible with the docker image amazon/dynamodb-local.
• It is configured to run locally at Port 8000 | http://localhost:8000

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing

For security reasons, browsers restrict HTTP requests initiated from within scripts.