Getting Started

note

For this example we'll be using the React Rocks WebRender Deployment.

After Creating an account you'll be presented with a few deployment options

1) If you have your current files in any type of bucket (e.g. S3, Firebase Static Hosting, or Google Cloud Storage) select bucket.

2) If you have an existing website and plan on using WebRender via Workers, [email protected], in your nginx/apache config, or any other place where you'll only forward a portion of your traffic, select website.

3) If you have an existing web server that you want to place behind our reverse proxy, select website and enter the backend IP in the origin

4) If you want to create an API just to render pages, select API

Don't worry, you can change this later by switching out the origin.

img

Types of deployments

Bucket

A bucket creates a deployment with the following default settings. This is ideal if you want to avoid setting up servers and take full benefit of WebRender as your full production platform. Any 404 / not found request will be automatically redirected to index.html for rendering.

{
"origin": "http://{BUCKET}.s3-website-us-west-1.amazonaws.com/",
"redirectNotFound": "/",
"redirectUnauthorized": "/",
"cacheTtl": 30,
"renderSettings": [
{
"path": "/*",
"unfurlDelay": 1500,
"preRenderDelay": 3000
}
]
}

Existing Website

If you have an existing website and want to use WebRender as a reverse-proxy for part of your traffic, or all of it, and would like to keep your origin server, this is the best option.

If you only plan on hitting the reverse proxy when you detect a certain user agent via Cloudflare Workers, [email protected], nginx, apache, etc (the most cost efficient and common way) you can enter your current website.

{
"origin": "https://example.com",
"cacheTtl": 30,
"renderSettings": [
{
"path": "/*",
"unfurlDelay": 1500,
"preRenderDelay": 3000
}
]
}

If you plan on using WebRender in front of your existing web server for all your traffic, use a direct IP, otherwise you'll cause an infinite loop

{
"origin": "http://1.2.3.4",
"cacheTtl": 30,
"renderSettings": [
{
"path": "/*",
"unfurlDelay": 1500,
"preRenderDelay": 3000
}
]
}

API

You generally do not want to use the API set-up unless you are rendering websites you do not own. With a regular website or bucket deployment you'll get accesss to the Edge Cache API, which is what you'll want to use. If you want to set up via the API and render other people's websites please select API and then see Instant Render API for more documentation

note

You should now see your own reverse proxy url (the first part is your deployment ID).

It should behave like this example deployment: https://52aa03f21ea5465da916768f8705586e.webrender.io/

Now that you've created your deployment, let's dig into the individual settings