Deploying an ES6 React Static Site to S3 -- Requirements and Lessons Learned

Nice work on this project, guys! :thumbsup:

My serverless front-end is a ReactJS ES6 Static S3 site. I've learned a number of things along the way that might be of value:

1) Static Site Boilerplate Check out React Static Boilerplate. This is the most robust boilerplate for an S3 static site I’ve found so far. While its webpack is a bit complicated to digest at first, the architecture of the project is well done. Additional points:

• Supports hot-loader for debugging • Supports browser sync for multi-device debugging • Multi-page router support • Uses a static directory for assets (convenient) • Bundles and compresses very nicely for a single directory simple S3 deployment

2) Deployment to a pre-existing named buckets is important Not sure if I misunderstood the conversation, but I think I read that buckets would conform to a serverless naming convention. That won't work when Route 53 binds the domain to the bucket. Further, if everything is configured already, you don't want to rebuild but rather update with overwrite or ignore, depending upon the file / directory. If I misunderstood the conversation on this topic, then please disregard this point.

3) Metadata and zero-length files are required for scaling and working around an Android SMS link bug Real-world static websites often require parameters to be passed via hash or query strings. However, many Android devices truncate hash and query strings from the urls sent via SMS, which means you must use subdirectory/sub-path redirect to re-populate the hash and query strings (much like bit.ly). Additionally, if an SPA has pseudo-pages such as a blog (like the boilerplate, above), there will likely be a need for redirects as the site matures.

It would be of value to have something like the json below to create zero-length file redirects, and set metadata on other file copied:

“filename” :  {
    “metadata” : {
        “redirect” : “http://domain.com?param=1”,
        “expires” : “time”,
        ...
    },
    “content” : “hello world”  (optional)
}

NOTE: You could also use API Gateway + Lambda to return a dynamically generated html string that passes though on GET, but then the entire execution environment must fire up increasing latency and cost. At this point S3 redirect seems more appealing.

Thoughts?

serverless / serverless-client-s3

Deploying an ES6 React Static Site to S3 -- Requirements and Lessons Learned #5