MST Amplitude GraphCMS Locize Sentry
- Built-in features
- Storybook - UI components documentation
- Built-in 3rd party vendors
- Clone locally
- Local installation guide
- Advanced configuration
|Preset||Diff PR||Pricing concerns|
||Compared to ||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.
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).
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||MST (Hybrid)||Deploys multiple tenants on different domains (ST), sharing the same DB and API endpoint (MT)|
|Analytics (Amplitude)||Fine-grained analytics is processed in real-time (1mn graph latency on free plans)|
|GraphQL API (GraphCMS)||Advanced GraphCMS support|
|Dynamic i18n support (GraphCMS)||Content from GraphCMS is localised (db records)|
|Static i18n support (Locize)||Content for the platform is localised using Locize (menu, links, etc.)|
|Monitoring (Sentry)||Errors are sent to Sentry in real-time (both frontend and backend)|
This preset uses a MST design.
Therefore, there are 2 different demo available at:
- 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/
- 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))
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).
Check out the online Storybook documentation for this preset.
Each preset has its own Storybook documentation, because a few components are different.
The following vendors are built-in with the preset
|Vendor||Tag||Has free trial||Has free plan||Potential discounts||Install guide|
|Vercel||Built-in||Friendly pricing for non-commercial usage||Guide|
Up to 10 million events a month |
1st year free (for startups and non-profit)
|Don’t provide discounts||Guide|
|GraphCMS|| ||2 weeks on Growth plan||15% discount for NRN users + provides discounts for non-profit organisations||Guide|
|Locize|| ||2 weeks||May provide discount for non-profit organisations, contact them at firstname.lastname@example.org||Guide|
|Sentry|| ||2 weeks on any plan||Don’t provide discounts||Guide|
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
This local installation guide is meant to guide you through the installation process on your own computer.
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
scopeis 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.jsonis a symlink and shouldn’t to be modified (run
ln vercel.staging.json vercel.jsonif you messed it up )
- Tip: Don’t forget
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.
npx vercel login
Windows: You’ll need to run
npx vercel login email@domaininstead, 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.
yarn- Installs all deps from
yarn start- Starts the app on http://localhost:8888/
- Alternatively, on Windows, you need to run
- Alternatively, on Windows, you need to run
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.
Create an account for all required 3rd party vendors below, and follow their installation guide
- Using WebStorm IDE? Check out our “How to setup” Guide
- If you use NVM (Node Version Manager) then running
nvm usewill select the right node.js version based on the
- If you get stuck then ask for help on github issues.
- If the preset does too many things to your taste, check our “How to remove X” guides (e.g: “How to remove Locize”)