Link Search Menu Expand Document
Next Right Now

v1-ssr-mst-aptd-gcms-lcz-sty

MST Amplitude GraphCMS Locize Sentry

DEPRECATED

OFFICIAL

March 2020

Table of contents

Overview

This preset has been deprecated in favor of v2-mst-aptd-gcms-lcz-sty

Preset Diff PR Pricing concerns
v1-ssr-mst-aptd-gcms-lcz-sty - Branch Identical Not free (Locize)

Built-in features

Feature Availability Notes about features
Rendering mode :warning: SSR SSR forced for all pages (through pages/_app), SSG not available
Tenancy :heavy_check_mark: MST (Hybrid) Deploys multiple tenants on different domains (ST), sharing the same DB and API endpoint (MT)
Analytics (Amplitude) :heavy_check_mark: Fine-grained analytics is processed in real-time (1mn graph latency on free plans)
GraphQL API (GraphCMS) :heavy_check_mark: Advanced GraphCMS support
Dynamic i18n support (GraphCMS) :heavy_check_mark: Content from GraphCMS is localised (db records)
Static i18n support (Locize) :heavy_check_mark: Content for the platform is localised using Locize (menu, links, etc.)
Monitoring (Sentry) :heavy_check_mark: Errors are sent to Sentry in real-time (both frontend and backend)

Demo

Tenancy

This preset uses a MST design.

Therefore, there are 2 different demo available at:

  1. https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c1.vercel.app/, and its preview at https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c1-preview.vercel.app/
  2. https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c2.vercel.app/, and its preview at https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c2-preview.vercel.app/

Both demo have been generated using the same source code, the two demo live in a completely separated server and won’t be affected by each other (MST design)

The same database is used by both tenants (MT design), but the displayed content is specific to each tenant (theme, logo, etc.) (ST design)

Overall, we use a hybrid tenancy design that we name MST, which is due to a compromise between complexity (only one DB/API (AKA MT)) and security/performances/risk (multiple servers to avoid massive downtime of all customers at once (AKA ST))

Server side rendering

Requests are performed in real-time (SSR), each request send a GraphQL query (put aside client/server caching)

Of course, if the DB itself gets down, all tenants would be impacted at once, which is quite a critical issue (we may protect ourselves against such an outage using a proxy server cache)

Built-in 3rd party vendors

The following vendors are built-in with the preset v1-ssr-mst-aptd-gcms-lcz-sty.

Vendor Tag Has free trial Has free plan Potential discounts Install guide
Vercel Built-in :x: :heavy_check_mark: Friendly pricing for non-commercial usage Guide
Amplitude aptd :x: :heavy_check_mark: Up to 10 million events a month
1st year free (for startups and non-profit) 		Don’t provide discounts Guide
GraphCMS gmcs :heavy_check_mark: 2 weeks on Growth plan :heavy_check_mark: 15% discount for NRN users + provides discounts for non-profit organisations Guide
Locize lcz :heavy_check_mark: 2 weeks :x: May provide discount for non-profit organisations, contact them at support@locize.com Guide
Sentry sty :heavy_check_mark: 2 weeks on any plan :heavy_check_mark: Don’t provide discounts Guide

Clone locally 

git clone https://github.com/UnlyEd/next-right-now.git nrn-v1-ssr-mst-aptd-gcms-lcz-sty && cd nrn-demo && git checkout v1-ssr-mst-aptd-gcms-lcz-sty

This will create a nrn-v1-ssr-mst-aptd-gcms-lcz-sty folder in your current directory and checkout the v1-ssr-mst-aptd-gcms-lcz-sty git branch automatically.

Local installation guide

This local installation guide is meant to guide you through the installation process on your own computer.

Pre-requisites

You must change the associated Vercel scope (it uses NRN own scope by default, because it’s required for our CI/CD Github Actions)

  • Remove the whole line "scope": "team_qnVfSEVc2WwmOE1OYhZr4VST", in all vercel.*.json files (this scope is NRN own scope, and you don’t have permissions to access it, so you must remove it manually. We keep it there to make our own CI/CD works)
    • Tip: Don’t forget vercel.json is a symlink and shouldn’t to be modified (run ln vercel.staging.json vercel.json if you messed it up :wink:)

You must be authenticated to Vercel from your local machine. Typically, if it’s the first time you use Vercel you’ll need to do it.

  • Run npx vercel login
  • Windows: You’ll need to run npx vercel login email@domain instead, because it doesn’t support interactive prompt.

You must configure all your Vercel secrets. The list of required secrets depends on your preset and are listed in the vercel*.json file you’re trying to deploy.

To create a new secret, use vercel secrets add nrn-secret secret-value. If you create a secret with a wrong value, you will have to delete it and create it again (there is no update feature). See vercel secrets --help

  • Tip: If you ever need to store files as secrets (such as ssh keys), see this solution

See each vendor documentation for additional information.

Install steps
  1. yarn - Installs all deps from package.json
  2. yarn start - Starts the app on http://localhost:8888/
    • Alternatively, on Windows, you need to run yarn start:windows

Awesome, the demo should be working on your computer now!

Note that it’s not yet linked onto your own vendor accounts, but it uses NRN defaults values instead. Configuring each vendor is probably the most time-consuming, but you don’t have to do it right away, it depends on whether you want to play around, or make a real project.

Vendors configuration

Create an account for all required 3rd party vendors below, and follow their installation guide

  1. Learn how to setup Vercel

  2. Learn how to setup GraphCMS

  3. Learn how to setup Locize

  4. Learn how to setup Sentry

  5. Learn how to setup Cypress

  6. Learn how to setup GitHub Actions

Advanced configuration