chore(frontend): use shared folder

.travis.yml

@@ -97,15 +97,15 @@ jobs:
             condition: "$DEPLOY_WORKER = true"
     - name: frontend
       before_install:
+        - cd $TRAVIS_BUILD_DIR/shared && npm install
         - cd $TRAVIS_BUILD_DIR/frontend
       install:
         - npm install
       script:
-        - npx lockfile-lint --type npm --path package-lock.json -o "https:" -o "file:" --allowed-hosts npm
-        - npm run compile
-        - npm run lint-no-fix
         - CI=false npm run build
         - npm run test
+        - npx lockfile-lint --type npm --path package-lock.json -o "https:" -o "file:" --allowed-hosts npm
+        - npm run lint-no-fix
     - name: serverless-unsubscribe-digest
       before_install:
         - cd $TRAVIS_BUILD_DIR/serverless/unsubscribe-digest

amplify.yml

@@ -23,12 +23,12 @@ frontend:
           export REACT_APP_BACKEND_URL=${BACKEND_URL_STAGING} &&
           export REACT_APP_SENTRY_ENVIRONMENT="staging";
           fi
-        - cd frontend
-        - npm ci
+        - cd shared && npm ci && cd ..
+        - cd frontend && npm ci && cd ..
         - export REACT_APP_SENTRY_RELEASE=$(npm run --silent get-sentry-release)
     build:
       commands:
-        - npm run build
+        - cd frontend && npm run build
         - npm run upload-source-map
   artifacts:
     # IMPORTANT - Please verify your build output directory

frontend/config-overrides.js

@@ -0,0 +1,31 @@
+/* eslint-disable */
+const fs = require('fs')
+const {
+  aliasDangerous,
+  configPaths,
+} = require('react-app-rewire-alias/lib/aliasDangerous')
+
+const aliasMap = configPaths('./tsconfig.paths.json')
+
+module.exports = (config) => {
+  const modified = aliasDangerous(aliasMap)(config)
+  return modified
+}
+
+module.exports.jest = (config) => {
+  const aliasMap = {
+    '^config$': '<rootDir>/src/config',
+    '^test-utils/?(.*)': '<rootDir>/src/test-utils/$1',
+    '^assets/?(.*)': '<rootDir>/src/assets/$1',
+    '^classes/?(.*)': '<rootDir>/src/classes/$1',
+    '^components/?(.*)': '<rootDir>/src/components/$1',
+    '^contexts/?(.*)': '<rootDir>/src/contexts/$1',
+    '^locales/?(.*)': '<rootDir>/src/locales/$1',
+    '^routes/?(.*)': '<rootDir>/src/routes/$1',
+    '^services/?(.*)': '<rootDir>/src/services/$1',
+    '^styles/?(.*)': '<rootDir>/src/styles/$1',
+    '^@shared/?(.*)': '<rootDir>/../shared/src/$1',
+  }
+  const moduleNameMapper = { ...config.moduleNameMapper, ...aliasMap }
+  return { ...config, moduleNameMapper }
+}

frontend/package.json

@@ -3,9 +3,10 @@
   "version": "1.23.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
     "dev": "npm start",
-    "build": "npm run compile && INLINE_RUNTIME_CHUNK=false react-scripts build",
+    "prebuild": "npm run compile && tsc --build",
+    "build": "INLINE_RUNTIME_CHUNK=false react-app-rewired build",
     "eject": "react-scripts eject",
     "lint-no-fix": "tsc --noEmit && eslint --ext .js,.jsx,.ts,.tsx --cache . && prettier --check '**/*.{md,scss}'",
     "lint": "tsc --noEmit && eslint --ext .js,.jsx,.ts,.tsx --cache --fix . && prettier --write '**/*.{md,scss}' --loglevel warn",
@@ -14,7 +15,8 @@
     "upload-source-map": "node sentry.js",
     "extract": "lingui extract",
     "compile": "lingui compile",
-    "test": "react-scripts test --passWithNoTests"
+    "pretest": "tsc --build",
+    "test": "react-app-rewired test --passWithNoTests"
   },
   "dependencies": {
     "@lingui/react": "^3.5.1",
@@ -35,9 +37,9 @@
     "lottie-react": "^2.1.0",
     "moment": "^2.29.1",
     "papaparse": "^5.2.0",
-    "postman-templating": "file:../modules/postman-templating",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
+    "react-app-rewired": "^2.1.8",
     "react-dom": "^16.13.1",
     "react-draft-wysiwyg": "^1.14.6",
     "react-ga": "^2.7.0",
@@ -90,7 +92,8 @@
     "lint-staged": "^10.2.6",
     "msw": "^0.27.1",
     "node-sass": "^4.14.1",
-    "prettier": "^2.0.5"
+    "prettier": "^2.0.5",
+    "react-app-rewire-alias": "^1.0.3"
   },
   "eslintConfig": {
     "extends": [

frontend/src/services/validate-csv.service.ts

@@ -1,6 +1,6 @@
 import Papa from 'papaparse'
 import { keys, difference, uniq } from 'lodash'
-import { TemplateClient, TemplateError } from 'postman-templating'
+import { TemplateClient, TemplateError } from '@shared/templating'
 
 import { i18n } from '@lingui/core'
 import { ALLOWED_IMAGE_SOURCES } from 'config'

frontend/src/test-utils/api/index.ts

@@ -20,7 +20,7 @@ import {
   XSS_EMAIL_OPTION,
   XSS_SMS_OPTION,
   XSS_TELEGRAM_OPTION,
-} from 'postman-templating'
+} from '@shared/templating'
 import { union, difference } from 'lodash'
 
 const smsTemplateClient = new TemplateClient({ xssOptions: XSS_SMS_OPTION })

frontend/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./tsconfig.paths.json",
   "compilerOptions": {
     "target": "es5",
     "lib": [
@@ -19,12 +20,16 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "baseUrl": "src",
     "sourceMap": true,
     "inlineSources": true,
-    "sourceRoot": "/",
+    "sourceRoot": "/"
   },
   "include": [
     "src"
+  ],
+  "references": [
+    {
+      "path": "../shared"
+    }
   ]
 }

frontend/tsconfig.paths.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "*": ["src/*"],
+      "config": ["src/config"],
+      "classes/*": ["src/classes/*"],
+      "assets/*": ["src/assets/*"],
+      "components/*": ["src/components/*"],
+      "contexts/*": ["src/contexts/*"],
+      "locales/*": ["src/locales/*"],
+      "routes/*": ["src/routes/*"],
+      "services/*": ["src/services/*"],
+      "styles/*": ["src/styles/*"],
+      "@shared/*": ["../shared/src/*"]
+    }
+  }
+}