Add a custom rendering server (#506)

- added a Node-based rendering server
- refactored build process (added dedicated script files for development and production build)
- refactored routing, so that it can be reused both on the client and on the server side
- added Page-type components for every app; currently they are the only components that run on the server and add the dynamic meta tags to the page
- updated redux code so that it doesn't try to access browser-specific apis during the startup
Co-authored-by: Kamal Dodiya <kamal@ebi.ac.uk>

.gitlab-ci.yml

@@ -11,7 +11,8 @@ stages:
   - deploy
 
 variables:
-  CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}
+  CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:nginx-${CI_COMMIT_SHORT_SHA}
+  CONTAINER_NODE_IMAGE: ${CI_REGISTRY_IMAGE}:node-${CI_COMMIT_SHORT_SHA}
   KUBE_CONTEXT: ens-dev-ctx
   DEPLOYENV: dev
   ENVIRONMENT: production
@@ -20,11 +21,11 @@ variables:
 # Template to build static assets
 .build-static:
   stage: test_build_static
-  image: node:14.16.0
+  image: node:14.17.0
 
   before_script:
   - cd src/ensembl
-  - npm install --global npm@7.7.4
+  - npm install --global npm@7.12.1
   - npm ci
 
   script:
@@ -32,13 +33,15 @@ variables:
   - npm run build
 
   artifacts:
-    name: static_assets
+    name: build_artifacts
     paths:
     - src/ensembl/dist/
+    - src/ensembl/package.json
+    - src/ensembl/package-lock.json
 
 # Template to build nginx docker image for WP k8s cluster
 # WP k8s cluster uses ingress
-.build-nginx-wp:
+.build-nginx:
   image: docker
 
   services:
@@ -53,14 +56,15 @@ variables:
     - apk update && apk add git
     - git clone --depth 1 https://github.com/Ensembl/ensembl-2020-static-assests.git
     - git clone https://gitlab.ebi.ac.uk/kamal/ensembl-client-nginx.git
-    - git -C ensembl-client-nginx checkout migration/wp-hx/ingress
+    - git -C ensembl-client-nginx checkout migration/ssr
     - docker build -t ${CONTAINER_IMAGE} -f ensembl-client-nginx/Dockerfile --no-cache .
     - docker push ${CONTAINER_IMAGE}
     - docker rmi ${CONTAINER_IMAGE}
     - docker logout $CI_REGISTRY
 
-# Template to build nginx docker image for EHK k8s cluster
-.build-nginx-ehk:
+# Template to build node docker image for WP k8s cluster
+# WP k8s cluster uses ingress
+.build-node:
   image: docker
 
   services:
@@ -72,54 +76,39 @@ variables:
     - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
 
   script:
-  - apk update && apk add git
-  - git clone --depth 1 https://github.com/Ensembl/ensembl-2020-static-assests.git
-  - git clone https://gitlab.ebi.ac.uk/kamal/ensembl-client-nginx.git
-  - sed -i "s/<DEPLOYMENT_ENV>/${DEPLOYENV}/g" ensembl-client-nginx/config/conf.d/local.conf
-  - docker build -t ${CONTAINER_IMAGE} -f ensembl-client-nginx/Dockerfile --no-cache .
-  - docker push ${CONTAINER_IMAGE}
-  - docker rmi ${CONTAINER_IMAGE}
-  - docker logout "$CI_REGISTRY"
-
-  needs:
-    - Test_N_Build
-
-# Template to deploy to WP k8s cluster
-.deploy-wp:
-  stage: deploy
-  image: dockerhub.ebi.ac.uk/ensembl-web/deploy-tools:0.1
-  script:
-  - git clone https://gitlab.ebi.ac.uk/kamal/ensembl-client-caas-deploy.git
-  - git -C ensembl-client-caas-deploy/ checkout migration/wp-hx
-  - sed -i "s#<DOCKER_IMAGE>#${CONTAINER_IMAGE}#g" ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-  - kubectl apply -f ensembl-client-caas-deploy/ensembl_client_deployment.yaml
+    - docker build -t ${CONTAINER_NODE_IMAGE} -f src/ensembl/Dockerfile.node --no-cache .
+    - docker push ${CONTAINER_NODE_IMAGE}
+    - docker rmi ${CONTAINER_NODE_IMAGE}
+    - docker logout $CI_REGISTRY
 
 # Template to deploy to WP k8s cluster
-.deploy-wp-feature:
+.deploy:
   stage: deploy
   image: dockerhub.ebi.ac.uk/ensembl-web/deploy-tools:0.1
   script:
-  - git clone https://gitlab.ebi.ac.uk/kamal/ensembl-client-caas-deploy.git
-  - git -C ensembl-client-caas-deploy/ checkout deployfeature
-  - sed -i "s#<DEPLOYMENT_ENV>#${CI_COMMIT_REF_SLUG}#g" ensembl-client-caas-deploy/ensembl_client_deployment.yaml 
-  - sed -i "s#<DOCKER_IMAGE>#${CONTAINER_IMAGE}#g" ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-  - sed -i "s#<DEPLOYMENT_ENV>#${CI_COMMIT_REF_SLUG}#g" ensembl-client-caas-deploy/ensembl_client_service_node.yaml
-  - kubectl apply -f ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-  - kubectl apply -f ensembl-client-caas-deploy/ensembl_client_service_node.yaml
+  - git clone https://gitlab.ebi.ac.uk/ensembl-web/ensembl-k8s-manifests.git
+  - git -C ensembl-k8s-manifests/ checkout wp-k8s
+  - sed -i "s#<DOCKER_IMAGE>#${CONTAINER_IMAGE}#g" ensembl-k8s-manifests/ensembl_client_nginx_deployment.yaml
+  - sed -i "s#<DOCKER_IMAGE>#${CONTAINER_NODE_IMAGE}#g" ensembl-k8s-manifests/ensembl_client_node_deployment.yaml
+  - kubectl apply -f ensembl-k8s-manifests/ensembl_client_nginx_deployment.yaml
+  - kubectl apply -f ensembl-k8s-manifests/ensembl_client_node_deployment.yaml
 
 # Template to deploy review-app to WP k8s cluster
-.deploy-wp-review:
+.deploy-review:
   stage: deploy
   image: dockerhub.ebi.ac.uk/ensembl-web/deploy-tools:0.1
   script:
-  - git clone https://gitlab.ebi.ac.uk/kamal/ensembl-client-caas-deploy.git
-  - git -C ensembl-client-caas-deploy/ checkout wp-review-apps
-  - sed -i "s#<DEPLOYMENT_ENV>#${CI_COMMIT_REF_SLUG}#g" ensembl-client-caas-deploy/ensembl_client_deployment.yaml 
-  - sed -i "s#<DOCKER_IMAGE>#${CONTAINER_IMAGE}#g" ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-  - kubectl apply -f ensembl-client-caas-deploy/ensembl_client_deployment.yaml
+  - git clone https://gitlab.ebi.ac.uk/ensembl-web/ensembl-k8s-manifests.git
+  - git -C ensembl-k8s-manifests/ checkout wp-k8s-review
+  - sed -i "s#<DEPLOYMENT_ENV>#${CI_COMMIT_REF_SLUG}#g" ensembl-k8s-manifests/ensembl_client_nginx_deployment.yaml
+  - sed -i "s#<DOCKER_IMAGE>#${CONTAINER_IMAGE}#g" ensembl-k8s-manifests/ensembl_client_nginx_deployment.yaml
+  - sed -i "s#<DEPLOYMENT_ENV>#${CI_COMMIT_REF_SLUG}#g" ensembl-k8s-manifests/ensembl_client_node_deployment.yaml
+  - sed -i "s#<DOCKER_IMAGE>#${CONTAINER_NODE_IMAGE}#g" ensembl-k8s-manifests/ensembl_client_node_deployment.yaml
+  - kubectl apply -f ensembl-k8s-manifests/ensembl_client_nginx_deployment.yaml
+  - kubectl apply -f ensembl-k8s-manifests/ensembl_client_node_deployment.yaml
 
 # Template for stopping review app - Do cleanup here 
-.stop-wp-review:
+.stop-review:
   stage: deploy
   image: dockerhub.ebi.ac.uk/ensembl-web/deploy-tools:0.1
   variables:
@@ -130,23 +119,6 @@ variables:
   - kubectl delete svc ensembl-client-${CI_COMMIT_REF_SLUG}-svc
   - kubectl delete deploy ensembl-client-${CI_COMMIT_REF_SLUG}-deployment
 
-# Template to deploy to EHK k8s cluster
-.deploy-ehk:
-  stage: deploy
-  image: dockerhub.ebi.ac.uk/ensembl-web/deploy-tools:0.1
-  before_script:
-  - export KUBECONFIG=/etc/deploy/config
-  - mkdir -p /etc/deploy
-  - echo ${EMBASSY_KUBECONFIG} | base64 -d > ${KUBECONFIG}
-  script:
-  - git clone https://gitlab.ebi.ac.uk/kamal/ensembl-client-caas-deploy.git
-  - git -C ensembl-client-caas-deploy checkout refactor-manifest
-  - sed -i "s/<VERSION>/${CI_COMMIT_SHORT_SHA}-${DEPLOYENV}/g" ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-  - sed -i "s/<DEPLOYMNET_ENV>/${DEPLOYENV}/g" ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-  - cat ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-  - kubectl config use-context ${KUBE_CONTEXT}
-  - kubectl apply -f ensembl-client-caas-deploy/ensembl_client_deployment.yaml
-
 Test:
   image: node:14.16.0
   stage: test
@@ -176,10 +148,6 @@ Test_N_Build:
     ENVIRONMENT: production
     API_HOST: ""
 
-  script:
-  - npm run test
-  - npm run build
-
   only:
   - dev
   - master
@@ -194,11 +162,6 @@ Test_N_Build:internal:
     ENVIRONMENT: internal
     API_HOST: ""
 
-  artifacts:
-    name: static_assets
-    paths:
-    - src/ensembl/dist/
-
   only:
   - master
 
@@ -213,30 +176,19 @@ Test_N_Build:review:
   - master
   - /^nodeploy\/.*$/
 
-# Job to build nginx docker image for staging environment (EHK k8s cluster)
-Nginx:Staging-EHK:
-  extends: .build-nginx-ehk
-  variables:
-    DEPLOYENV: staging
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-staging
+# Job to build nginx docker image for staging environment
+# dev branch -> Staging
+Nginx:Staging:
+  extends: .build-nginx
   only:
   - dev
+  needs:
+    - Test_N_Build
 
-# Job to build nginx docker image for live environment (EHK k8s cluster)
-Nginx:Live-EHK:
-  extends: .build-nginx-ehk
-  variables:
-    DEPLOYENV: prod
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-prod
-  only:
-  - master
-
-# Job to build nginx docker image for staging environment
+# Job to build node docker image for staging environment
 # dev branch -> Staging
-Nginx:Staging-WP:
-  extends: .build-nginx-wp
-  variables:
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-stage-ing
+Node:Staging:
+  extends: .build-node
   only:
   - dev
   needs:
@@ -244,44 +196,57 @@ Nginx:Staging-WP:
 
 # Job to build nginx docker image for live environment
 # master branch -> Live
-Nginx:Live-WP:
-  extends: .build-nginx-wp
+Nginx:Live:
+  extends: .build-nginx
   variables:
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-prod-ing
+    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-prod
+  only:
+  - master
+  needs:
+    - Test_N_Build
+
+# Job to build node docker image for live environment
+# master branch -> Live
+Node:Live:
+  extends: .build-node
+  variables:
+    CONTAINER_NODE_IMAGE: ${CI_REGISTRY_IMAGE}:node-${CI_COMMIT_SHORT_SHA}-prod
   only:
   - master
   needs:
     - Test_N_Build
 
-# Job to build nginx docker image for staging and internal environment
+# Job to build nginx docker image for internal environment at WP
 # master branch -> internal
-Nginx:Internal-EHK:
-  extends: .build-nginx-ehk
+Nginx:Internal:
+  extends: .build-nginx
   variables:
     DEPLOYENV: internal
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-internal
+    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:nginx-${CI_COMMIT_SHORT_SHA}-internal
   only:
   - master
   needs:
     - Test_N_Build:internal
 
-# Job to build nginx docker image for staging and internal environment at WP
+# Job to build node docker image for internal environment at WP
 # master branch -> internal
-Nginx:Internal-WP:
-  extends: .build-nginx-wp
+Node:Internal:
+  extends: .build-node
   variables:
     DEPLOYENV: internal
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-internal-ing
+    CONTAINER_NODE_IMAGE: ${CI_REGISTRY_IMAGE}:node-${CI_COMMIT_SHORT_SHA}-internal
   only:
   - master
   needs:
     - Test_N_Build:internal
 
+# Job to build nginx docker image for review environment at WP
+# all other branch -> dev
 Nginx:review:
-  extends: .build-nginx-wp
+  extends: .build-nginx
   variables:
     DEPLOYENV: dev
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-${CI_COMMIT_REF_SLUG}
+    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:nginx-${CI_COMMIT_SHORT_SHA}-${CI_COMMIT_REF_SLUG}
   except:
   - dev
   - master
@@ -290,59 +255,48 @@ Nginx:review:
   needs:
     - Test_N_Build:review
 
-# Job to deploy to staging environment (EHK k8s cluster)
-Staging:EHK-HH:
-  extends: .deploy-ehk
+# Job to build node docker image for review environment at WP
+# all other branch -> dev
+Node:review:
+  extends: .build-node
   variables:
-    DEPLOYENV: staging
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-staging
-    KUBE_CONTEXT: ens-stage-ctx
-  only:
+    DEPLOYENV: dev
+    CONTAINER_NODE_IMAGE: ${CI_REGISTRY_IMAGE}:node-${CI_COMMIT_SHORT_SHA}-${CI_COMMIT_REF_SLUG}
+  except:
   - dev
+  - master
+  - /^nodeploy\/.*$/
+
   needs:
-    - Nginx:Staging-EHK
+    - Test_N_Build:review
 
 # Job to deploy to staging environment (WP-HX k8s cluster)
-Staging:WP-HX:
-  extends: .deploy-wp
-  variables:
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-stage-ing
+Staging:HX:
+  extends: .deploy
   environment:
     name : wp-hx-staging
   only:
   - dev
   needs:
     - Test_N_Build
-    - Nginx:Staging-WP
+    - Nginx:Staging
+    - Node:Staging
 
-# Job to deploy to staging environment (WP-HH k8s cluster)
-Staging:WP-HH:
-  extends: .deploy-wp
-  variables:
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-stage-ing
+# Job to deploy to staging environment (WP-HL k8s cluster)
+Staging:HL:
+  extends: .deploy
   environment:
     name : wp-hh-staging
   only:
   - dev
   needs:
     - Test_N_Build
-    - Nginx:Staging-WP
-
-# Job to deploy to live environment (EHK k8s cluster)
-Live:EHK-HH:
-  extends: .deploy-ehk
-  variables:
-    DEPLOYENV: prod
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-prod
-    KUBE_CONTEXT: ens-prod-ctx
-  only:
-  - master
-  needs:
-    - Nginx:Live-EHK
+    - Nginx:Staging
+    - Node:Staging
 
 # Job to deploy to live environment (WP-HX k8s cluster)
-Live:WP-HX:
-  extends: .deploy-wp
+Live:HX:
+  extends: .deploy
   variables:
     CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-prod-ing
   environment:
@@ -351,11 +305,11 @@ Live:WP-HX:
   - master
   needs:
     - Test_N_Build
-    - Nginx:Live-WP
+    - Nginx:Live
 
-# Job to deploy to live environment (WP-HH k8s cluster)
-Live:WP-HH:
-  extends: .deploy-wp
+# Job to deploy to live environment (WP-HL k8s cluster)
+Live:HL:
+  extends: .deploy
   variables:
     CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-prod-ing
   environment:
@@ -364,24 +318,11 @@ Live:WP-HH:
   - master
   needs:
     - Test_N_Build
-    - Nginx:Live-WP
-
-# Job to deploy to internal environment (EHK k8s cluster)
-Internal:EHK-HH:
-  extends: .deploy-ehk
-  variables:
-    DEPLOYENV: internal
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-internal
-    KUBE_CONTEXT: ens-dev-ctx
-  only:
-  - master
-  needs:
-    - Test_N_Build:internal
-    - Nginx:Internal-EHK
+    - Nginx:Live
 
 # Job to deploy to internal environment (WP-HX k8s cluster)
-Internal:WP-HX:
-  extends: .deploy-wp
+Internal:HX:
+  extends: .deploy
   variables:
     CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-internal-ing
   environment:
@@ -390,11 +331,11 @@ Internal:WP-HX:
   - master
   needs:
     - Test_N_Build:internal
-    - Nginx:Internal-WP
+    - Nginx:Internal
 
-# Job to deploy to internal environment (WP-HH k8s cluster)
-Internal:WP-HH:
-  extends: .deploy-wp
+# Job to deploy to internal environment (WP-HL k8s cluster)
+Internal:HL:
+  extends: .deploy
   variables:
     CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-internal-ing
   environment:
@@ -403,28 +344,10 @@ Internal:WP-HH:
   - master
   needs:
     - Test_N_Build:internal
-    - Nginx:Internal-WP
-
-Feature:EHK-HH:
-  extends: .deploy-ehk
-  variables:
-    DEPLOYENV: ${CI_COMMIT_REF_SLUG}
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-${CI_COMMIT_REF_SLUG}
-    KUBE_CONTEXT: ens-dev-ctx
+    - Nginx:Internal
 
-  except:
-  - dev
-  - master
-  - /^nodeploy\/.*$/
-
-  needs:
-    - Test_N_Build:review
-    - Nginx:review
-
-Review:WP-HX:
-  extends: .deploy-wp-review
-  variables:
-    CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}-${CI_COMMIT_REF_SLUG}
+Review:HX:
+  extends: .deploy-review
   environment:
     name: review/$CI_COMMIT_REF_SLUG
     url: http://$CI_COMMIT_REF_SLUG.review.ensembl.org
@@ -438,9 +361,10 @@ Review:WP-HX:
   needs:
     - Test_N_Build:review
     - Nginx:review
+    - Node:review
 
 stop_review:
-  extends: .stop-wp-review
+  extends: .stop-review
   environment:
     name: review/$CI_COMMIT_REF_SLUG
     action: stop

src/ensembl/.dockerignore

@@ -8,3 +8,4 @@ docker-compose*
 README.md
 LICENSE
 .vscode
+dist

src/ensembl/.env.example

@@ -10,5 +10,19 @@ GOOGLE_ANALYTICS_KEY="UA-58710484-17"
 # Base URL for the API endpoints
 API_HOST=""
 
-# GTI Genesearch API endpoint
+# GTI Genesearch API endpoint (used by Custom Download)
 GENESEARCH_API_ENDPOINT="http://gti-es-0.ebi.ac.uk:8080/api"
+
+# paths to different microservices
+SSR_THOAS_BASE_URL="https://staging-2020.ensembl.org/api/thoas"
+BROWSER_THOAS_BASE_URL="/api/thoas"
+
+SSR_GENOME_SEARCH_BASE_URL="https://staging-2020.ensembl.org/api/genomesearch"
+BROWSER_GENOME_SEARCH_BASE_URL="/api/genomesearch"
+
+SSR_DOCS_BASE_URL="https://staging-2020.ensembl.org/api/docs"
+BROWSER_DOCS_BASE_URL="/api/docs"
+
+GENOME_BROWSER_BASE_URL="/api/browser"
+
+REFGET_BASE_URL="/api/refget"

src/ensembl/.storybook/.babelrc

+{
+  "presets": [
+    "@babel/react",
+    "@babel/typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-private-methods"
+  ]
+}

src/ensembl/Dockerfile

-FROM node:14.16.0
+FROM node:14.17.0 AS builder
 
 ARG SOURCE_DIR="./"
 
@@ -6,8 +6,24 @@ RUN mkdir -p /srv/ensembl-client
 
 COPY ${SOURCE_DIR} /srv/ensembl-client/
 
-# NOTE: NODE_ENV=development before npm install ensures that dev dependencies won't get skipped
-RUN cd /srv/ensembl-client/ && \
-    npm install --global npm@7.6.2 && \
+WORKDIR /srv/ensembl-client/
+
+RUN npm install --global npm@7.12.1 && \
     npm ci && \
-    npm run test
+    npm run test && \
+    npm run build
+
+
+# PRODUCTION IMAGE
+FROM node:14.17.0-alpine AS runner
+
+WORKDIR /srv/ensembl-client/
+
+ENV NODE_ENV=production
+COPY --from=builder /srv/ensembl-client/package* .
+COPY --from=builder /srv/ensembl-client/dist ./dist
+
+RUN npm ci --only=production
+
+EXPOSE 8080
+CMD [ "node", "dist/server/server.js" ]

src/ensembl/Dockerfile.node

+# PRODUCTION IMAGE
+FROM node:14.17.0-alpine
+
+WORKDIR /srv/ensembl-client/
+
+ENV NODE_ENV=production
+COPY src/ensembl/package*.json ./
+COPY src/ensembl/dist ./dist/
+
+RUN npm ci --only=production
+
+EXPOSE 8080
+CMD [ "node", "dist/server/server.js" ]
\ No newline at end of file

src/ensembl/babel.config.js

-module.exports = {
-  presets: [
-    '@babel/react',
-    '@babel/typescript',
-    [
-      '@babel/env',
-      {
-        useBuiltIns: 'usage',
-        corejs: 3,
-        modules: false
-      }
-    ]
-  ],
-  env: {
-    test: {
-      presets: [
-        [
-          '@babel/env',
-          {
-            useBuiltIns: 'usage',
-            corejs: 3
-          }
-        ]
-      ]
-    },
-    production: {
-      plugins: [
-        ['react-remove-properties', { 'properties': [ 'data-test-id' ] }]
+const isTargetWeb = api =>
+  api.caller((caller) => caller && caller.target === 'web');
+
+module.exports = (api) => {
+  const targets = isTargetWeb(api) ? {
+    esmodules: true
+  } : {
+    node: 'current'
+  };
+
+  return {
+    presets: [
+      '@babel/react',
+      '@babel/typescript',
+      [
+        '@babel/env',
+        {
+          useBuiltIns: 'usage',
+          corejs: 3,
+          modules: false,
+          targets
+        }
       ]
+    ],
+    env: {
+      test: {
+        presets: [
+          [
+            '@babel/env',
+            {
+              useBuiltIns: 'usage',
+              corejs: 3
+            }
+          ]
+        ]
+      },
+      development: {
+        plugins: [
+          "@loadable/babel-plugin"
+        ]
+      },
+      production: {
+        plugins: [
+          ['react-remove-properties', { 'properties': [ 'data-test-id' ] }]
+        ]
+      }