Exclude Cypress and Karma from docker images (#2309)

Author: ArnaudPel

.docker/Dockerfile_dev

@@ -1,4 +1,4 @@
-FROM node:8.6
+FROM node:9.11
 
 WORKDIR /home/node/angular-seed
 
@@ -10,10 +10,13 @@ COPY gulpfile.ts .
 COPY tsconfig.json .
 COPY tslint.json .
 COPY tools ./tools/
-COPY cypress ./cypress/
+COPY .docker/rm.optional.deps.js ./.docker/rm.optional.deps.js
 
 # before switching to non-root user, change ownership of home
 RUN chown -R node:node .
 USER node
 
-RUN npm install
+# NB: this is a workaround due to the fact that npm '--no-optional' flag doesn't work (open script below for more)
+RUN node .docker/rm.optional.deps.js
+
+RUN npm install --no-optional

.docker/Dockerfile_prod

@@ -1,4 +1,4 @@
-FROM node:8.6 as builder
+FROM node:9.11 as builder
 
 WORKDIR /home/node/angular-seed
 
@@ -9,8 +9,12 @@ COPY . .
 RUN chown -R node:node .
 USER node
 
-RUN npm install
-RUN npm run build.prod
+# NB: this is a workaround due to the fact that npm '--no-optional' flag doesn't work (open script below for more)
+RUN node .docker/rm.optional.deps.js
+RUN rm -r cypress && rm cypress.json
+
+RUN npm install --no-optional
+RUN npm run build.prod.rollup.aot
 
 FROM nginx:1.13
 COPY --from=builder /home/node/angular-seed/dist/prod /var/www/dist/prod

.docker/rm.optional.deps.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+
+/**
+ * This is a workaround due to 'npm install --no-optional' not working as expected:
+ * https://github.com/npm/npm/issues/17633
+ * https://github.com/npm/npm/issues/20769
+ * To be used when building docker images, since they don't need test libraries installed
+ */
+// package.json
+const npmPackage = JSON.parse(fs.readFileSync('package.json'));
+delete npmPackage['optionalDependencies'];
+fs.writeFileSync('package.json', JSON.stringify(npmPackage, null, 2));
+
+/**
+ * Todo is there a better way to handdle optional types in tsconfig.json ?
+ */
+let tsConfigJson = 'src/client/tsconfig.json';  // only copied in the prod image
+if (fs.existsSync(tsConfigJson)) {
+  const tsConfig = JSON.parse(fs.readFileSync(tsConfigJson));
+  tsConfig['compilerOptions']['types'] = tsConfig['compilerOptions']['types'].filter(t => t !== 'jasmine');
+  fs.writeFileSync(tsConfigJson, JSON.stringify(tsConfig, null, 2));
+}

.dockerignore

@@ -14,19 +14,25 @@ bower_components
 .classpath
 *.launch
 .settings/
+.editorconfig
 
 # misc
 .sass-cache
 connect.lock
 coverage/*
+coverage_js/*
 libpeerconnection.log
 npm-debug.log
 testem.log
 typings
 
-# e2e
+# test
+*.spec.ts
 e2e/*.js
 e2e/*.map
+test-config.js
+test-main.js
+karma.conf.js
 
 #System Files
 .DS_Store

README.md

@@ -131,6 +131,12 @@ The application provides full Docker support. You can use it for both developmen
 Please note that prod and dev are built into their own separate image, which can lead to unexpected differences in the
 npm dependencies and the state of the sources in the container, if you are not familiar with Docker. See below.
 
+Please also note that karma tests (`npm test`) are independent from the docker environment.
+Even if an angular-seed container is up and running, karma will run in the context of your **local** npm install,
+which may differ from that of the container. In fact, the docker containers don't have karma installed at all.
+
+Cypress tests are however fully supported and recommended to test the app served by either the dev or prod docker containers.  
+
 ## Development build and deployment
 
 The dev image only contains the npm libraries installed, but not the sources. The sources are mounted at runtime,

package.json

@@ -50,11 +50,23 @@
     "node": ">=6.9.0",
     "npm": ">=3.10.3"
   },
+  "optionalDependencies": {
+    "@bahmutov/add-typescript-to-cypress": "^2.0.0",
+    "@types/jasmine": "^2.8.6",
+    "cypress": "^3.0.1",
+    "jasmine-core": "^3.1.0",
+    "jasmine-spec-reporter": "^4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.1.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-remap-istanbul": "^0.6.0"
+  },
   "devDependencies": {
     "@angular/compiler-cli": "^6.0.1",
     "@angular/language-service": "^6.0.1",
     "@angular/platform-server": "^6.0.1",
-    "@bahmutov/add-typescript-to-cypress": "^2.0.0",
     "@compodoc/compodoc": "^1.1.1",
     "@types/async": "^2.0.48",
     "@types/browser-sync": "^0.0.41",
@@ -65,7 +77,6 @@
     "@types/gulp-load-plugins": "^0.0.31",
     "@types/gulp-sass": "^0.0.31",
     "@types/gulp-util": "^3.0.34",
-    "@types/jasmine": "^2.8.6",
     "@types/node": "^10.3.5",
     "@types/rimraf": "2.0.2",
     "@types/run-sequence": "^0.0.30",
@@ -77,7 +88,6 @@
     "codelyzer": "^4.2.1",
     "connect-history-api-fallback": "^1.5.0",
     "cssnano": "^3.10.0",
-    "cypress": "^3.0.1",
     "deep-extend": "^0.6.0",
     "event-stream": "^3.3.4",
     "express": "~4.16.3",
@@ -107,14 +117,6 @@
     "gulp-watch": "^5.0.0",
     "is-ci": "^1.1.0",
     "isstream": "^0.1.2",
-    "jasmine-core": "^3.1.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "~2.0.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage": "^1.1.1",
-    "karma-jasmine": "^1.1.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-remap-istanbul": "^0.6.0",
     "merge-stream": "^1.0.1",
     "minimatch": "^3.0.4",
     "node-sass-magic-importer": "^5.1.3",