roast logo

Angular Hosting

{this.props.name} logo

Roast.io is a CDN static web host for Angular 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

Angular Social Media Unfurls (Link Previews)#

before hosting on roast.io
Links to Angular 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 Angular 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

Modern Angular

Modern Angular users use the platform-browser/Meta service for managing these meta tags.

AngularJS (v1)

AngularJS users use the ngMeta library for managing these meta tags.

Angular 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 Angular apps render up to 2.5x faster because the browser doesn't need to execute the JavaScript to render the first load.

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

Preboot#

Angular doesn't have a mechanism like ReactJS for reusing an existing SSR'd DOM, instead, the browser client rebuilds the DOM which often causes a brief blink/flash during this transition. Hence, the Preboot library.

Preboot is an optional feature you can use when doing full page SSR on Roast.io. It's merely a JavaScript snippet that forces the client to build the app in a hidden div and when it's finished, replaces the server-side rendered div with the client-side rendered div.

Roast.io can automatically configure Preboot v4 (not the latest) for you. We use this older version of Preboot because it's simple, and it works for non-Angular projects too.

Modern Angular

Just add the prerendercloud-preboot-app-root attr to your app root. e.g.: <app-root prerendercloud-preboot-app-root></app-root>

AngularJS (v1)

AngularJS v1 users must be using ui-view or ng-view and the ng-app must be within the <body> tag


  

You can read more detail about this integration from Prerender.cloud's docs on preboot