serverless_phenomic_s3.md

#Setting up Serverless + Phenomic + S3 client

###Prerequisites:

1. Sign up or log in to the AWS console and ensure you have a IAM user called serverless-admin with admin rights. (Obviously not a prod setting). A walkthrough is here.
2. Create a [profile-name] in your ~/.aws/credentials file with your newly created admin user:

[serverless-admin]
aws_access_key_id=XXX
aws_secret_access_key=XXX
region=us-west-2

3. Run npm -v and ensure npm is ^3.0.0 and run node --version and ensure node is ^4.2.0

###Installation:

1. Serverless Installation

• npm install -g serverless
• serverless create --template aws-nodejs --path myApp
• cd myApp

2. Phenomic Installation

• DIR=client
• mkdir $DIR && cd $DIR && mkdir node_modules
• npm install phenomic && ./node_modules/.bin/phenomic setup
• npm install

3. S3 Client Plugin Installation

• cd ..
• npm install https://github.com/kevzettler/serverless-client-s3.git#serverless_1.0_beta_compatibility

4. edit the serverless.yml file for first use

• provider should look like:

  provider:
    name: aws
    runtime: nodejs4.3
    stage: dev
    profile: serverless-admin
    region: us-west-2
  

• functions: should look like:

  functions:
    hello:
      handler: handler.hello
      events: # All events associated with this function
        - http: 
            method: GET
            path: hello
            cors: true
  

• underneath functions add these two sections

plugins:
  - serverless-client-s3

custom:
  client:
    bucketName: serverless-msp

• Save the serverless.yml file

5. Adjust the handler.js file with CORS headers

• Modify and save handler.js with the below:

'use strict';

 module.exports.hello = (event, context, callback) => {
    const response = {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin" : "*" // Required for CORS support to work
      },
      body: JSON.stringify({
        message: "Yay! It's a go for Serverless Minneapolis!",
        input: event
      }),
    };
    callback(null, response);
  };

6. serverless deploy and copy and paste the GET endpoint returned
7. Edit client/src/layouts/Homepage/index.js:

  import React from "react"
  import Button from "../../components/Button"
  import LatestPosts from "../../components/LatestPosts"
  import Page from "../Page"

  function _publicClick() {
    const _get = fetch("https://jxlgv9l3w7.execute-api.us-west-2.amazonaws.com/dev/hello", { method: "GET" });
    _get.then((response) => {
      response.json().then((data) => {
        document.getElementById("results").textContent = '';
        document.getElementById("results").textContent = data.message;
      });
    });
  }

  const _style = {
    cursor: "pointer"
    , border: "2px solid red"
  }

  const Homepage = (props) => {
    return (
      <Page { ...props }>
        <LatestPosts />
        <Button style={_style} onClick={_publicClick}>
          Invoke Public Hello Lambda
        </Button>
        <span id="results"></span>
      </Page>
    )
  }

  export default Homepage

8. npm run

• When localhost:3333 loads, click the button. You should see the Yay! message appear. Close the browser and ctrl-x the server.

9. cd client && npm run build

• Phenomic now takes the client/src directory and creates a client/dist directory that are the compiled static assets from the react app you have in the client/src directory.

10. cd ..
11. serverless client deploy

• The serverless client s3 plugin is now invoked to automatically sync your client/dist folder with your s3 bucket.
• In AWS -> S3, under properties of the bucket, in static website hosting, you'll find your URL (something like: http://serverless-msp.s3-website-us-west-2.amazonaws.com/ - go to the url and click your button, you should see the Yay! message) So Yay!

12. Removal:

• serverless remove will tear down the api gateway and the lambda.
• cd client && rm -fr dist && mkdir dist && cd .. && serverless client deploy will remove all the objects in your bucket