roast logo

ReactJS Hosting

{this.props.name} logo

Roast.io is a CDN static web host for ReactJS sites/apps. We focus on speed, simplicity, and sensible defaults so you can run roast deploy and never think about hosting again.

  • automatic HTTPS certificate provisioning and rotation
  • better SEO with full-page server-side render (SSR) or just the title/meta tags
  • social media unfurls that "just work" because we inject screenshots for open graph
  • faster requests because we stream straight from memory on AWS' CDN
  • faster requests and reduced bandwidth because we use gzip compression
  • you can ignore cache invalidation (it "just works") because we use etags

Install our CLI tool with npm: npm i -g roast and deploy your build/dist directory with roast deploy

The only configuration you'll need to do is to rewrite 404s to /index.html. You can do this with a _redirects file at the root of your build/dist dir. It just needs one line: /* /index.html 200

React-Helmet Social Media Unfurls (Link Previews)#

before hosting on roast.io
Links to React apps do not unfurl
after hosting on roast.io
Unfurls work when hosted on Roast.io

Most bots/crawlers can't show unfurl link previews for React apps because they can't parse JavaScript. This means pasting a link to your app on Facebook, Twitter, Slack, etc. won't show a preview.

People typically solve this by either configuring their own server to server-side render each request or pre-render their apps at build/compile time.

Roast.io requires neither. Instead we'll do SSR for you using Prerender.cloud, an SSR API.

By default, we limit the SSR to the title and meta tags in the document <head>. You can opt-in to full-page SSR with a _ssr.json file at the root of your deploy.

<head> management libraries

React-helmet is the most popular library for managing the <head> of a React app.

React Auto-Generate Unfurls with Screenshots#

Server-side rendering won't solve unfurls if you don't have meta tags for open graph. In this case, we'll take a screenshot of the page, and inject the appropriate meta tags so your page unfurls correctly on Facebook, Twitter, Slack, etc.

This autoOg feature is enabled by default. You can disable it by adding a _ssr.json file at the root of your deploy and {"autoOg": false}.

before hosting on roast.iobefore hosting on roast.io
Sometimes you may not have configured your meta tags for a page
after hosting on roast.ioafter hosting on roast.io
When we detect missing meta tags, we take a screenshot of the page, host the image, and inject the meta tags

Better SEO and Performance with Server-Side Rendering (SSR)#

Googlebot can parse most JavaScript but sometimes they don't for lower-ranked sites and they definitely don't if your app makes slow AJAX/WebSocket requests. Most other search-engine bots and crawlers can't parse JavaScript at all. Server-side rendering makes your app/site compatible with all bots and crawlers.

To be clear, server-side rendering is not a SEO panacea. It is one tool among many for improving SEO.

before hosting on roast.iobefore hosting on roast.io
Without Full Page SSR
after hosting on roast.ioafter hosting on roast.io
With Full Page SSR

SSR'd React apps render up to 2.5x faster because the browser doesn't need to execute the JavaScript to render the first load.

Roast.io supports SSR'ing React apps on React versions >= 14. For versions 14 and 15, we'll generate the react-checksum. React 16 no longer uses the checksum (it's capable of attaching to an existing DOM).

If you're not using any asynchronous state (XHR or WebSockets), full-page SSRs should "just work".

You can enable full-page SSR by adding a _ssr.json file at the root of your deploy and setting {"metaOnly": false}.

Asynchronous State

Additional configuration is required if you're using AJAX or WebSockets (asynchronous state). You'll need to check if window.__PRELOADED_STATE__ has the data you need before making an XHR or WebSocket request and if it doesn't, then make the request and write the result to window.__PRELOADED_STATE__. This is a special variable that Prerender.cloud looks for during the SSR. If exists during the SSR, it be serialized so you can access it in non-SSRd environments.

See simple window.fetch example and a Redux example and a Mobx example and if you need more guidance, see Prerender.cloud docs for SSR State

Create-React-App (CRA)#

Roast.io itself is a create-react-app built site. Roast.io is a perfect create-react-app hosting solution because you won't have to manage unfurls or server-side rendering.

Simply npm run build and roast deploy -p build.

CRA Service Workers

Please note that some versions of CRA include a service-worker by default. This ends up causing some confusion with respect to SSR and routing issues. We recommend you disable the service worker until you're confident the app is working as expected.