#Setting up Serverless + Phenomic + S3 client
###Prerequisites:
- 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.
- 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
- Run
npm -v
and ensure npm is ^3.0.0 and runnode --version
and ensure node is ^4.2.0
###Installation:
- Serverless Installation
npm install -g serverless
serverless create --template aws-nodejs --path myApp
cd myApp
- Phenomic Installation
DIR=client
mkdir $DIR && cd $DIR && mkdir node_modules
npm install phenomic && ./node_modules/.bin/phenomic setup
npm install
- S3 Client Plugin Installation
cd ..
npm install https://github.com/kevzettler/serverless-client-s3.git#serverless_1.0_beta_compatibility
- 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
- 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);
};
serverless deploy
and copy and paste the GET endpoint returned- 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
npm run
- When localhost:3333 loads, click the button. You should see the
Yay!
message appear. Close the browser andctrl-x
the server.
cd client && npm run build
- Phenomic now takes the
client/src
directory and creates aclient/dist
directory that are the compiled static assets from the react app you have in theclient/src
directory.
cd ..
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!
- 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