Deployment of site with SSR functionality

[vs-it-admin]

The documentation on deployment uses bridgetown deploy to generate the static output directory, and the section on SSR doesn't talk about deployment, so I'm unclear on the correct way to handle this.

I'm specifically looking to host on render.com (the bundled config for Render works fine for a static site without SSR functionality, but then of course the SSR parts don't work).

[jaredcwhite]

Hi @vs-it-admin — I recently moved my own business site onto Render, and it's a simple example of using both a static and a server endpoint in a single config (aka a hybrid deployment), so I'll share it below:

services:
  - type: web
    name: whitefusion-site
    env: static
    buildCommand: bin/bridgetown deploy
    staticPublishPath: ./output
    pullRequestPreviewsEnabled: true
    envVars:
      - key: BRIDGETOWN_ENV
        value: production
      - fromGroup: whitefusion-prod-envs
    headers:
      - path: /*
        name: X-Frame-Options
        value: DENY
      - path: /*
        name: X-XSS-Protection
        value: "1; mode=block"
      - path: /*
        name: X-Content-Type-Options
        value: "nosniff"
      - path: /*
        name: Strict-Transport-Security
        value: "max-age=15552000; includeSubDomains"
      - path: /*
        name: Referrer-Policy
        value: "no-referrer-when-downgrade"
      - path: /*
        name: Cache-Control
        value: "public, max-age=86400, s-max-age=86400"
    routes:
      - type: rewrite
        source: /contact-form/*
        destination: https://whitefusion-site-api.onrender.com/contact-form/*
      - type: rewrite
        source: /book-session/*
        destination: https://whitefusion-site-api.onrender.com/book-session/*
  - type: web
    name: whitefusion-site-api
    env: ruby
    buildCommand: bundle install && yarn install && bin/bridgetown frontend:build
    startCommand: bin/bridgetown start
    envVars:
      - key: BRIDGETOWN_ENV
        value: production
      - fromGroup: whitefusion-prod-envs

There's actually some interesting problems getting solved here, which is why I haven't gotten a full guide written up yet along with an update to the automated Render config to handle hybrid deployments. Basically, the goal is to punch a few "holes" through the CDN of the static site, so that it can reference the server endpoint. That way you don't need to worry about anything on the frontend with regards to sharing cookies cross-domain, CORS, etc. In this example, POSTing to https://www.whitefusion.studio/contact-form/ will essentially get rewritten under the hood to hit the server API.

My hope is come up with an automated solution where if you comment your Roda routes to generate a routes manifest, it can then update the YAML file automatically with all the rewrite paths. That way you won't have to manually track which paths need to be specified. Of course you could always put all your SSR'd paths under a top-level name like api and then just rewrite /api/*, but I feel that's a bit constraining.

Let me know if that makes sense…

[vs-it-admin]

Thanks, that's really helpful.

Out of interest, what is the benefit of running it as 2 services rather than just running the web service (since that still provides the entire site).

[vs-it-admin]

Actually, in addition to that, the redirects don't correctly keep the original source location (as used by Cloudfront's HTTP_CF_IPCOUNTRY header to pick up the country) - using the API site directly this works, but using the static site, it defaults back to US.

On a related note, I was also planning to use something similar for redirecting the root to the relevant language based on the browser language (rather than the default), but defining anything in Roda as the root doesn't work? Is there a way around that?

[jaredcwhite]

You're welcome to use just the web service, it just means the burden is on you to handle (aka scale and pay for) higher traffic loads even on the static pages since it will all be going to the app endpoints.

I'm afraid I'm not following what you're saying about the "On a related note"… it sounds like maybe you're wanting to wrap a locale prefix around some Roda routes?

[vs-it-admin]

A fair point.

Regarding my later comment, I was trying to redirect the root url to an appropriate locale prefix (based on the user browser language rather than a fixed default), and I was thinking that defining that in Roda using the r.root config (rather than r.get etc) would be the best approach, but that doesn't seem to work, as it will load the index.html file (or error if that doesn't exist). Like so:

  route do |r|
    # route: GET /
    r.root do
      r.redirect r.env['HTTP_ACCEPT_LANGUAGE']
    end
  end

This is over-simplified since you'd need to pull a supported locale out of the header, but that's the idea. But it is completely ignored. It works if I change to get /some-other-route

That's probably a different issue but I figured I'd ask. Maybe I'm just going about it wrong.

[vs-it-admin]

Actually, redirecting the root via SSR by any means would probably defeat the benefits of having a static site in the first place.
Netlify's language-based redirects would likely serve better. Too bad render doesn't support that.