Link Search Menu Expand Document
Next Right Now

v2-mst-aptd-gcms-lcz-sty

MST Amplitude GraphCMS Locize Sentry

OFFICIAL

May 2020

Table of contents

Overview

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

It is very similar to v2-mst-aptd-at-lcz-sty which came out in July, 2020. Which uses a REST-ish API (featuring Airtable vendor) instead of GraphQL (featuring GraphCMS vendor).

Depending on what you need/like the most (GraphQL vs REST), you may choose one or the other.

Please note v2-mst-aptd-at-lcz-sty has since become the main preset, and provides a few very advanced features (e.g: Markdown as JSX), and a much better CMS (featuring Stacker CMS).

Built-in features

List of built-in features specific to this preset.

For an overview of features included in all presets, check out the “Benefits” section.

Feature Availability Notes about features
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-v2-mst-aptd-gcms-lcz-sty-c1.vercel.app/, and its preview at https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-preview.vercel.app/
  2. https://nrn-v2-mst-aptd-gcms-lcz-sty-c2.vercel.app/, and its preview at https://nrn-v2-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))

Static pages

Most pages are built statically (SSG), there are some SSR pages to showcase hybrid usage (per-page rendering mode).

Due to SSG, the whole app is extremely fast, and very resilient. It basically cannot crash on SSG pages, even if our underlying providers are taken down.

Even if critical vendors are being used (e.g: Locize, GraphCMS, Airtable - because they hold our data), it doesn’t matter if there is an outage on their side because we only depend on them during build time.

Also, the cost is reduced when using SSG, compared to using SSR because we avoid real-time requests to extra services (e.g: Locize, Vercel, GraphCMS).

Storybook - UI components documentation

Check out the online Storybook documentation for this preset.

Each preset has its own Storybook documentation, because a few components are different.

Built-in 3rd party vendors

The following vendors are built-in with the preset v2-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-v2-mst-aptd-gcms-lcz-sty && cd nrn-v2-mst-aptd-gcms-lcz-sty && git checkout v2-mst-aptd-gcms-lcz-sty

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

Cloning it once is enough, but it may be simpler to use one clone per preset if you’re trying out multiple presets locally :wink:

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