New preset with hybrid SSG/SSR (replaces SSR-only with hybrid rendering modes support)

.env.build.example

@@ -9,7 +9,7 @@ NODE_ENV=development
 APP_STAGE=development
 
 # The NRN preset used for the demo
-NRN_PRESET=v1-ssr-mst-aptd-gcms-lcz-sty
+NRN_PRESET=v1-hyb-mst-aptd-gcms-lcz-sty
 
 # The customer that is being deployed
 CUSTOMER_REF=customer1

.github/workflows/deploy-zeit-production.yml

@@ -13,13 +13,13 @@ jobs:
   # Configures the deployment environment, install dependencies (like node, npm, etc.) that are requirements for the upcoming jobs
   # Ex: Necessary to run `yarn deploy`
   setup-environment:
-    name: Setup deployment environment (Ubuntu 18.04 - Node 10.x)
+    name: Setup deployment environment (Ubuntu 18.04 - Node 12.x)
     runs-on: ubuntu-18.04
     steps:
       - name: Installing node.js
         uses: actions/setup-node@v1 # Used to install node environment - XXX https://github.com/actions/setup-node
         with:
-          node-version: '10.x' # Use the same node.js version as the one Zeit's uses (currently node10.x)
+          node-version: '12.x' # Use the same node.js version as the one Zeit's uses (currently node12.x)
 
   # Starts a Zeit deployment, using the production configuration file of the default institution
   # The default institution is the one defined in the `now.json` file (which is a symlink to the actual file)

.github/workflows/deploy-zeit-staging.yml

@@ -13,13 +13,13 @@ jobs:
   # Configures the deployment environment, install dependencies (like node, npm, etc.) that are requirements for the upcoming jobs
   # Ex: Necessary to run `yarn deploy`
   setup-environment:
-    name: Setup deployment environment (Ubuntu 18.04 - Node 10.x)
+    name: Setup deployment environment (Ubuntu 18.04 - Node 12.x)
     runs-on: ubuntu-18.04
     steps:
       - name: Installing node.js
         uses: actions/setup-node@v1 # Used to install node environment - XXX https://github.com/actions/setup-node
         with:
-          node-version: '10.x' # Use the same node.js version as the one Zeit's uses (currently node10.x)
+          node-version: '12.x' # Use the same node.js version as the one Zeit's uses (currently node12.x)
 
   # Starts a Zeit deployment, using the staging configuration file of the default institution
   # The default institution is the one defined in the `now.json` file (which is a symlink to the actual file)
@@ -46,13 +46,19 @@ jobs:
           else
             ZEIT_DEPLOYMENT_ALIAS=$(cat now.json | jq -r '.name')-${CURRENT_BRANCH##*/}
           fi
-
-          # Zeit alias only allows 53 characters in the domain name, so we only keep the first 46 characters (because Zeit needs 7 chars for ".now.sh" at the end of the domain name)
-          # Also, in order to remove forbidden characters, we create a sequence from ascii numbers using ranges of numbers (we forbid characters by using `seq X Y` and we add others by using ';'). 
-          # All special characters are converted to `-` (using `tr $0 $1` where $0 is replaced by $1), and only 0-9 and a-Z chars are kept intact. 
-          # We then use `awk` to convert "ascii numbers" back into actual characters.
-          # You can find the numbers equivalence by tapping `man ascii` and look at the "decimal" set. 
-          ZEIT_DEPLOYMENT_ALIAS=$(echo $ZEIT_DEPLOYMENT_ALIAS | head -c 46 | tr "`(seq 0 47 ; seq 58 64 ; seq 91 96 && seq 123 127) | awk '{printf("%c",$1)}'`" -).now.sh
+
+          # Zeit alias only allows 53 characters in the domain name, so we only keep the first 45 (45 = 53 - 7 - 1) characters (because Zeit needs 7 chars for ".now.sh" at the end of the domain name, and count starts at 1, not 0)
+          # Also, in order to remove forbidden characters, we transform every characters which are not a "alnum" and \n or \r into '-'
+
+          ZEIT_DEPLOYMENT_ALIAS=$(echo $ZEIT_DEPLOYMENT_ALIAS | head -c 45 | tr -c '[:alnum:]\r\n' - | tr '[:upper:]' '[:lower:]')
+
+          # Recursively remove any trailing dash ('-')
+          while [[ "$ZEIT_DEPLOYMENT_ALIAS" == *- ]]
+          do
+                  ZEIT_DEPLOYMENT_ALIAS=${ZEIT_DEPLOYMENT_ALIAS::-1}
+          done
+
+          ZEIT_DEPLOYMENT_ALIAS=$ZEIT_DEPLOYMENT_ALIAS.now.sh
           echo "::set-env name=ZEIT_DEPLOYMENT_ALIAS::https://$ZEIT_DEPLOYMENT_ALIAS"
 
           npx now alias $ZEIT_DEPLOYMENT_URL https://$ZEIT_DEPLOYMENT_ALIAS --token $ZEIT_TOKEN

.nowignore

@@ -12,3 +12,7 @@ README.md
 schema.graphql
 yarn.lock
 yarn-error.log
+
+# Avoid tests being deployed as Vercel Serverless Functions (increases bundle size, and count towards limits)
+src/pages/api/*.test.ts
+src/pages/api/**/*.test.ts

cypress/config-customer1.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c1.now.sh/",
+  "baseUrl": "https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1.now.sh/",
   "projectId": "4dvdog",
   "screenshotsFolder": "cypress/screenshots/customer1",
   "videosFolder": "cypress/videos/customer1",

cypress/config-customer2.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c2.now.sh/",
+  "baseUrl": "https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c2.now.sh/",
   "projectId": "4dvdog",
   "screenshotsFolder": "cypress/screenshots/customer2",
   "videosFolder": "cypress/videos/customer2",

cypress/integration/app/pages/index.js

@@ -22,15 +22,15 @@ describe('Index page', () => {
   /**
    * Navbar section
    */
-  it('should have 5 links in the navigation bar', () => {
-    cy.get('#nav a.nav-link').should('have.length', 5);
+  it('should have 6 links in the navigation bar', () => {
+    cy.get('#nav a.nav-link').should('have.length', 6);
   });
 
   it('should have a link in the navbar that redirects to the examples page', () => {
-    cy.url().should('eq', `${baseUrl}/`);
+    cy.url().should('eq', `${baseUrl}/en`);
     cy.get('#nav-link-examples')
       .should('have.text', 'Examples')
       .click();
-    cy.url().should('eq', `${baseUrl}/examples`);
+    cy.url().should('eq', `${baseUrl}/en/examples`);
   });
 });

next.config.js

@@ -1,11 +1,17 @@
 const withSourceMaps = require('@zeit/next-source-maps')();
-const withCSS = require('@zeit/next-css'); // Allows to import ".css" files, like bootstrap.css
 const packageJson = require('./package');
 const date = new Date();
+const i18nConfig = require('./src/i18nConfig');
+const supportedLocales = i18nConfig.supportedLocales.map((supportedLocale) => {
+  return supportedLocale.name;
+});
+const publicBasePaths = ['robots', 'static', 'favicon.ico']; // All items (folders, files) under /public directory should be added there, to avoid redirection when an asset isn't found
+const noRedirectBasePaths = [...supportedLocales, ...publicBasePaths]; // Will disable url rewrite for those items (should contain all supported languages and all public base paths)
 
 console.debug(`Building Next with NODE_ENV="${process.env.NODE_ENV}" APP_STAGE="${process.env.APP_STAGE}" for CUSTOMER_REF="${process.env.CUSTOMER_REF}"`);
 
-module.exports = withCSS(withSourceMaps({
+module.exports = withSourceMaps({
+  // target: 'serverless', // Automatically enabled on Vercel, you may need to manually opt-in if you're not using Vercel - See https://nextjs.org/docs/api-reference/next.config.js/build-target#serverless-target
   env: {
     // XXX Duplication of the environment variables, this is only used locally (See https://github.com/zeit/next.js#build-time-configuration)
     //  while now.json:build:env will be used on the Now platform (See https://zeit.co/docs/v2/build-step/#providing-environment-variables)
@@ -26,12 +32,58 @@ module.exports = withCSS(withSourceMaps({
     APP_VERSION: packageJson.version,
     UNLY_SIMPLE_LOGGER_ENV: process.env.APP_STAGE, // Used by @unly/utils-simple-logger - Fix missing staging logs because it believes we're in production
   },
+  experimental: {
+    redirects() {
+      const redirects = [
+        {
+          // Redirect root link with trailing slash to non-trailing slash, avoids 404 - See https://github.com/zeit/next.js/discussions/10651#discussioncomment-8270
+          source: '/:locale/',
+          destination: '/:locale',
+          permanent: process.env.APP_STAGE !== 'development', // Do not use permanent redirect locally to avoid browser caching when working on it
+        },
+        {
+          // Redirect link with trailing slash to non-trailing slash (any depth), avoids 404 - See https://github.com/zeit/next.js/discussions/10651#discussioncomment-8270
+          source: '/:locale/:path*/',
+          destination: '/:locale/:path*',
+          permanent: process.env.APP_STAGE !== 'development', // Do not use permanent redirect locally to avoid browser caching when working on it
+        },
+      ];
+
+      if (process.env.APP_STAGE === 'development') {
+        console.info('Using experimental redirects:', redirects);
+      }
+
+      return redirects;
+    },
+    rewrites() {
+      const rewrites = [
+        {
+          // XXX Doesn't work locally (maybe because of rewrites), but works online
+          source: '/',
+          destination: '/api/autoRedirectToLocalisedPage',
+        },
+        {
+          source: `/:locale((?!${noRedirectBasePaths.join('|')})[^/]+)(.*)`,
+          destination: '/api/autoRedirectToLocalisedPage',
+        },
+      ];
+
+      if (process.env.APP_STAGE === 'development') {
+        console.info('Using experimental rewrites:', rewrites);
+      }
+
+      return rewrites;
+    },
+  },
   webpack: (config, { isServer, buildId }) => {
     const APP_VERSION_RELEASE = `${packageJson.version}_${buildId}`;
-
-    // Dynamically add some "env" variables that will be replaced during the build
-    config.plugins[1].definitions['process.env.APP_RELEASE'] = JSON.stringify(buildId);
-    config.plugins[1].definitions['process.env.APP_VERSION_RELEASE'] = JSON.stringify(APP_VERSION_RELEASE);
+    config.plugins.map((plugin, i) => {
+      if (plugin.definitions) { // If it has a "definitions" key, then we consider it's the DefinePlugin where ENV vars are stored
+        // Dynamically add some "env" variables that will be replaced during the build in "DefinePlugin"
+        plugin.definitions['process.env.APP_RELEASE'] = JSON.stringify(buildId);
+        plugin.definitions['process.env.APP_VERSION_RELEASE'] = JSON.stringify(APP_VERSION_RELEASE);
+      }
+    });
 
     if (isServer) { // Trick to only log once
       console.debug(`[webpack] Building release "${APP_VERSION_RELEASE}"`);
@@ -64,4 +116,4 @@ module.exports = withCSS(withSourceMaps({
     return config;
   },
   poweredByHeader: 'NRN - With love',
-}));
+});

now.customer1.production.json

@@ -1,17 +1,17 @@
 {
   "version": 2,
-  "name": "nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c1",
+  "name": "nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1",
   "scope": "team_qnVfSEVc2WwmOE1OYhZr4VST",
   "env": {},
   "build": {
     "env": {
       "APP_STAGE": "production",
-      "NRN_PRESET": "v1-ssr-mst-aptd-gcms-lcz-sty",
+      "NRN_PRESET": "v1-hyb-mst-aptd-gcms-lcz-sty",
       "CUSTOMER_REF": "customer1",
       "GRAPHQL_API_ENDPOINT": "https://api-euwest.graphcms.com/v1/ck73ixhlv09yt01dv2ga1bkbp/master",
       "GRAPHQL_API_KEY": "@nrn-graphql-api-key",
       "LOCIZE_PROJECT_ID": "@nrn-locize-project-id",
-      "LOCIZE_API_KEY": "@nrn-locize-api-key",
+      "LOCIZE_API_KEY": "The Locize API Key shouldn't be used in production (see https://github.com/locize/i18next-locize-backend#backend-options) because it's related to development-only features, and it's sensitive.",
       "AMPLITUDE_API_KEY": "@nrn-amplitude-api-key-production",
       "SENTRY_DSN": "@nrn-sentry-dsn"
     }

now.customer1.staging.json

@@ -1,17 +1,17 @@
 {
   "version": 2,
-  "name": "nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c1",
+  "name": "nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1",
   "scope": "team_qnVfSEVc2WwmOE1OYhZr4VST",
   "env": {},
   "build": {
     "env": {
       "APP_STAGE": "staging",
-      "NRN_PRESET": "v1-ssr-mst-aptd-gcms-lcz-sty",
+      "NRN_PRESET": "v1-hyb-mst-aptd-gcms-lcz-sty",
       "CUSTOMER_REF": "customer1",
       "GRAPHQL_API_ENDPOINT": "https://api-euwest.graphcms.com/v1/ck73ixhlv09yt01dv2ga1bkbp/master",
       "GRAPHQL_API_KEY": "@nrn-graphql-api-key",
       "LOCIZE_PROJECT_ID": "@nrn-locize-project-id",
-      "LOCIZE_API_KEY": "@nrn-locize-api-key",
+      "LOCIZE_API_KEY": "@nrn-locize-api-key-staging",
       "AMPLITUDE_API_KEY": "@nrn-amplitude-api-key-staging",
       "SENTRY_DSN": "@nrn-sentry-dsn"
     }

now.customer2.production.json

@@ -1,17 +1,17 @@
 {
   "version": 2,
-  "name": "nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c2",
+  "name": "nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c2",
   "scope": "team_qnVfSEVc2WwmOE1OYhZr4VST",
   "env": {},
   "build": {
     "env": {
       "APP_STAGE": "production",
-      "NRN_PRESET": "v1-ssr-mst-aptd-gcms-lcz-sty",
+      "NRN_PRESET": "v1-hyb-mst-aptd-gcms-lcz-sty",
       "CUSTOMER_REF": "customer2",
       "GRAPHQL_API_ENDPOINT": "https://api-euwest.graphcms.com/v1/ck73ixhlv09yt01dv2ga1bkbp/master",
       "GRAPHQL_API_KEY": "@nrn-graphql-api-key",
       "LOCIZE_PROJECT_ID": "@nrn-locize-project-id",
-      "LOCIZE_API_KEY": "@nrn-locize-api-key",
+      "LOCIZE_API_KEY": "The Locize API Key shouldn't be used in production (see https://github.com/locize/i18next-locize-backend#backend-options) because it's related to development-only features, and it's sensitive.",
       "AMPLITUDE_API_KEY": "@nrn-amplitude-api-key-production",
       "SENTRY_DSN": "@nrn-sentry-dsn"
     }

now.customer2.staging.json

@@ -1,17 +1,17 @@
 {
   "version": 2,
-  "name": "nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c2",
+  "name": "nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c2",
   "scope": "team_qnVfSEVc2WwmOE1OYhZr4VST",
   "env": {},
   "build": {
     "env": {
       "APP_STAGE": "staging",
-      "NRN_PRESET": "v1-ssr-mst-aptd-gcms-lcz-sty",
+      "NRN_PRESET": "v1-hyb-mst-aptd-gcms-lcz-sty",
       "CUSTOMER_REF": "customer2",
       "GRAPHQL_API_ENDPOINT": "https://api-euwest.graphcms.com/v1/ck73ixhlv09yt01dv2ga1bkbp/master",
       "GRAPHQL_API_KEY": "@nrn-graphql-api-key",
       "LOCIZE_PROJECT_ID": "@nrn-locize-project-id",
-      "LOCIZE_API_KEY": "@nrn-locize-api-key",
+      "LOCIZE_API_KEY": "@nrn-locize-api-key-staging",
       "AMPLITUDE_API_KEY": "@nrn-amplitude-api-key-staging",
       "SENTRY_DSN": "@nrn-sentry-dsn"
     }

package.json

@@ -6,7 +6,7 @@
     "start": "now dev --listen 8888",
     "build": "yarn test:once && next build",
     "next": "next start",
-    "svg": "npx svgr -d src/svg src/svg --ext tsx --template ./src/utils/svgTemplate.ts",
+    "svg": "npx svgr -d src/svg src/svg --ext tsx --template src/utils/svg/svgTemplate.ts",
     "deploy": "yarn deploy:customer1",
     "deploy:all": "yarn deploy:customer1 && yarn deploy:customer2",
     "deploy:all:production": "yarn deploy:customer1:production && yarn deploy:customer2:production",
@@ -50,6 +50,7 @@
   },
   "dependencies": {
     "@amplitude/react-amplitude": "1.0.0",
+    "@apollo/react-hooks": "3.1.5",
     "@apollo/react-ssr": "3.1.4",
     "@emotion/core": "10.0.28",
     "@emotion/styled": "10.0.27",
@@ -59,6 +60,7 @@
     "@fortawesome/react-fontawesome": "0.1.9",
     "@sentry/browser": "5.15.4",
     "@sentry/node": "5.15.4",
+    "@types/lodash.filter": "4.6.6",
     "@unly/universal-language-detector": "2.0.3",
     "@unly/utils": "1.0.3",
     "@unly/utils-simple-logger": "1.4.0",
@@ -77,14 +79,13 @@
     "graphql": "15.0.0",
     "graphql-tag": "2.10.3",
     "i18next": "19.3.4",
-    "i18next-locize-backend": "3.1.1",
-    "i18next-node-locize-backend": "3.1.0",
-    "isomorphic-unfetch": "3.0.0",
+    "i18next-locize-backend": "4.0.7",
     "js-cookie": "2.2.1",
     "json-stringify-safe": "5.0.1",
     "locize-editor": "3.0.0",
-    "locize-node-lastused": "2.0.0",
+    "locize-lastused": "3.0.3",
     "lodash.clonedeep": "4.5.0",
+    "lodash.filter": "4.6.0",
     "lodash.find": "4.6.0",
     "lodash.get": "4.4.2",
     "lodash.includes": "4.3.0",
@@ -93,8 +94,11 @@
     "lodash.isplainobject": "4.0.6",
     "lodash.map": "4.6.0",
     "lodash.remove": "4.7.0",
+    "lodash.size": "4.2.0",
+    "lodash.some": "4.6.0",
+    "lodash.startswith": "4.2.1",
     "lodash.xorby": "4.7.0",
-    "next": "9.3.4",
+    "next": "9.4.0",
     "next-cookies": "2.0.3",
     "next-with-apollo": "5.0.0",
     "prop-types": "15.7.2",
@@ -125,17 +129,19 @@
     "@types/lodash.isplainobject": "4.0.6",
     "@types/lodash.map": "4.6.13",
     "@types/lodash.remove": "4.7.6",
+    "@types/lodash.size": "4.2.6",
+    "@types/lodash.some": "4.6.6",
+    "@types/lodash.startswith": "4.2.6",
     "@types/lodash.xorby": "4.7.6",
     "@types/react": "16.9.32",
     "@types/webfontloader": "1.6.29",
     "@types/webpack-env": "1.15.1",
     "@typescript-eslint/eslint-plugin": "2.26.0",
     "@typescript-eslint/parser": "2.26.0",
-    "@zeit/next-css": "1.0.1",
     "@zeit/next-source-maps": "0.0.4-canary.1",
     "concurrently": "5.1.0",
     "cross-env": "7.0.2",
-    "cypress": "4.3.0",
+    "cypress": "4.5.0",
     "del-cli": "3.0.0",
     "eslint": "6.8.0",
     "eslint-plugin-jest": "23.8.2",