Upgraded Dockerfile to implement multi-staged build. Fixed E2E tests. Fixed Travis CI build.

Author: Maksym Lanovyy

.travis.yml

@@ -7,11 +7,7 @@ cache:
     - node_modules
 
 addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable
+  chrome: stable
 
 node_js:
   - "6"
@@ -30,15 +26,5 @@ before_install:
 install:
   - npm install
 
-after_install:
-  - npm rebuild node-sass
-
-before_script:
-  - node ./node_modules/protractor/bin/webdriver-manager update
-  - npm rebuild node-sass
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
-  - sleep 3
-
 script:
   - npm run ci:travis

Dockerfile

@@ -15,31 +15,31 @@
 #    Run image as virtual host (read more: https://github.com/jwilder/nginx-proxy):
 #    docker run -e VIRTUAL_HOST=angular-starter.your-domain.com --name angular-starter angular-starter &
 
-FROM nginx:1.13.0-alpine
-
-# install console and node
-RUN apk add --no-cache bash=4.3.46-r5 &&\
-    apk add --no-cache openssl=1.0.2n-r0 &&\
-    apk add --no-cache nodejs
-
-# install npm ( in separate dir due to docker cache)
-ADD package.json /tmp/npm_inst/package.json
-RUN cd /tmp/npm_inst &&\
-    npm install &&\
-    mkdir -p /tmp/app &&\
-    mv /tmp/npm_inst/node_modules /tmp/app/
-
-# build and publish application
-ADD . /tmp/app
-RUN cd /tmp/app &&\
-    npm run build:aot &&\
-    mv ./dist/* /usr/share/nginx/html/
-
-# clean
-RUN rm -Rf /tmp/npm_inst  &&\
-    rm -Rf /tmp/app &&\
-    rm -Rf /root/.npm &&\
-    apk del nodejs
-
-# this is for virtual host purposes
-EXPOSE 80
+# Stage 1, based on Node.js, to build and compile Angular
+
+FROM node:8.9.4-alpine as builder
+
+COPY package.json ./
+
+## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
+RUN npm i && mkdir /ng-app && mv ./node_modules ./ng-app
+
+WORKDIR /ng-app
+
+COPY . .
+
+RUN npm run build:aot:prod
+
+# Stage 2, based on Nginx, to have only the compiled app, ready for production with Nginx
+
+FROM nginx:1.13.9-alpine
+
+COPY ./config/nginx-custom.conf /etc/nginx/conf.d/default.conf
+                                  
+## Remove default nginx website
+RUN rm -rf /usr/share/nginx/html/*
+
+## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
+COPY --from=builder /ng-app/dist /usr/share/nginx/html
+
+CMD ["nginx", "-g", "daemon off;"]

config/karma.conf.js

@@ -120,13 +120,14 @@ module.exports = function (config) {
      * available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      */
     browsers: [
-      'Chrome'
+      'Chrome',
+      'ChromeTravisCi'
     ],
 
     customLaunchers: {
       ChromeTravisCi: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox', '--disable-gpu']
       }
     },
 

config/nginx-custom.conf

@@ -0,0 +1,19 @@
+server {
+  listen 80;
+
+  gzip on;
+  gzip_http_version 1.1;
+  gzip_disable      "MSIE [1-6]\.";
+  gzip_min_length   1100;
+  gzip_vary         on;
+  gzip_proxied      expired no-cache no-store private auth;
+  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+  gzip_comp_level   9;
+
+  root /usr/share/nginx/html;
+
+  location / {
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+}

config/protractor.conf.js

@@ -17,24 +17,23 @@ exports.config = {
   ],
   exclude: [],
 
-  framework: 'jasmine2',
+  framework: 'jasmine',
 
-  allScriptsTimeout: 110000,
+  allScriptsTimeout: 11000,
 
   jasmineNodeOpts: {
     showTiming: true,
     showColors: true,
     isVerbose: false,
     includeStackTrace: false,
-    defaultTimeoutInterval: 400000
+    defaultTimeoutInterval: 40000
   },
-  directConnect: true,
 
+  directConnect: true,
   capabilities: {
-    'browserName': 'chrome',
-    'chromeOptions': {
-      //'args': ["--headless", "--disable-gpu", "--window-size=1280x800",  "--no-sandbox"]
-      'args': ['show-fps-counter=true']
+    browserName: 'chrome',
+    chromeOptions: {
+      args: [ "--headless", "--disable-gpu", "--window-size=800x600", "--no-sandbox" ]
     }
   },
 

package.json

@@ -23,11 +23,11 @@
     "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
     "build:prod": "npm run clean:dist && npm run webpack -- --config config/webpack.prod.js  --progress --profile --bail",
     "build": "npm run build:dev",
-    "ci:aot": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:aot && npm run e2e",
-    "ci:jit": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:prod && npm run e2e",
-    "ci:nobuild": "npm run lint && npm test && npm run e2e",
-    "ci:testall": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
-    "ci:travis": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:aot && npm run e2e:travis",
+    "ci:aot": "cross-env BUILD_E2E=1 npm run lint && npm run test:ci && npm run build:aot && npm run e2e",
+    "ci:jit": "cross-env BUILD_E2E=1 npm run lint && npm run test:ci && npm run build:prod && npm run e2e",
+    "ci:nobuild": "npm run lint && npm test:ci && npm run e2e",
+    "ci:testall": "cross-env BUILD_E2E=1 npm run lint && npm run test:ci && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
+    "ci:travis": "cross-env BUILD_E2E=1 npm run lint && npm run test:ci && npm run build:aot && npm run e2e:travis",
     "ci": "npm run ci:testall",
     "clean:dll": "npm run rimraf -- dll",
     "clean:aot": "npm run rimraf -- compiled",
@@ -64,7 +64,8 @@
     "start:hmr": "npm run server:dev:hmr",
     "start": "npm run server:dev",
     "start:aot": "npm run server:aot:dev",
-    "test": "npm run lint && karma start",
+    "test": "karma start",
+    "test:ci": "karma start --single-run --browsers ChromeTravisCi",
     "tslint": "tslint",
     "typedoc": "typedoc",
     "version": "npm run build",

src/app/home/home.e2e.ts

@@ -7,7 +7,8 @@ describe('Home', () => {
     /**
      * Change hash depending on router LocationStrategy.
      */
-    await browser.get('/#/home');
+    await browser.get('/');
+    await element(by.linkText('Home')).click();
   });
 
   it('should have a title', async () => {