Giter VIP home page Giter VIP logo

prerender-cloudfront's Introduction

prerender.io cloudfront example middleware

This is an example of integrating prerender.io and a SPA in S3 served over Cloudfront.

Instructions

  1. Upload prerender-cloudfront.yaml to Cloudformation as a new stack, that'll setup the example for you. Enter your prerender.io token when asked.
  2. Upload code.js and index.html to the S3 bucket created by Cloudformation in step 1.
  3. Change the read permissions for code.js and index.html to be publicly readable.

Testing

To see the page as rendered by prerender.io run:

curl -H 'User-Agent: Facebot' https://${CLOUDFRONT_DOMAIN}/over/here

The same page without pre-rendering:

curl https://${CLOUDFRONT_DOMAIN}/over/here

Implementation

Two Lambda@edge functions are used. The first detects bot requests on requests entering the system, it sets a header which Cloudfront uses to partition the cache. The second function, run after the cache, detects the presence of the header and, if present, routes the request to Prerender.io

Caching

By default, static resources from the bucket are cached for a long time period. This improves performance but means that the deploy process of any real app will need a Cloudfront purge step.

As prerender.io does NOT want any Cloudfront caching (see prerender/prerender#93 (comment)) we disable that by including a X-Prerender-Cachebuster header which effectively disables cloudfront caching.

NOTE: using X-Prerender-Cachebuster is probably not optimal, if you find a better way, please let me know.

prerender-cloudfront's People

Contributors

jinty avatar amshee avatar benjaminlong avatar brennick avatar theworkflow avatar thoop avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.