Commit c458fdb4 authored by Konstantin Schulz's avatar Konstantin Schulz
Browse files

introducing docker and upgrade to angular 7

parent 1d4e6db2
FROM node:11.12.0-stretch
RUN useradd -ms /bin/bash mc
WORKDIR /home/mc
RUN apt-get update
RUN apt-get -yq install nginx
COPY . mc_frontend
COPY nginx.conf /etc/nginx/nginx.conf
RUN install -Dv /dev/null /run/nginx/nginx.pid
#RUN chown -R mc:mc ./
#USER mc
WORKDIR /home/mc/mc_frontend
RUN npm i -g cordova && cordova telemetry off && npm i -g ionic
# to get the version of the local CLI package, run: npm list @angular/cli | sed 's/[^0-9.]*//g' | sed -n 2p
RUN npm i -g @angular/cli
RUN npm install
# workaround to fix the missing binding issue for node-sass
RUN npm rebuild node-sass
RUN ionic cordova build browser --prod --release --max-old-space-size=4096
# TODO: for some reason, this does not work?!?!??!
COPY platforms/browser/config.xml www/config.xml
# Welcome to the frontend part of the project CALLIDUS!
## Installation
1. Install Node.js (https://nodejs.org/), including NPM.
2. Clone the git repository: `git clone https://scm.cms.hu-berlin.de/callidus/mc-frontend.git`
3. Go to the new directory: `cd mc-frontend`
4. Run `npm install`
5. Run `npm i -g ionic`. On UNIX system, you may need to prepend "sudo".
6. 1. Run `ionic serve --no-livereload --no-interactive --no-open` and enjoy!
2. To run it in the background, use: `ionic serve --no-livereload --no-interactive --no-open &`
##Building
To build the application for production use, run: `ionic cordova build browser --prod --release`
# Installation instructions (Docker):
1. Install Docker (https://docs.docker.com/v17.12/install/) and Docker-Compose (https://docs.docker.com/compose/install/)
2. Clone the repo:
#####################################
# TODO: CHANGE THE REMOTE URI #######################
#####################################
`git clone https://scm.cms.hu-berlin.de/callidus/mc_frontend.git`
3. Move to the newly created folder:
`cd mc_frontend`
4. Run `docker-compose build`.
Make sure to assign at least 4GB RAM (Memory) to the Docker container, otherwise the build will fail.
5. Run `docker-compose up -d` and enjoy!
----------------------------------------------------------------
##### Access to the Docker container
Use `docker-compose down` to stop and remove the currently running containers.
To access a running container directly, get the container ID via `docker ps` and connect via `docker exec -it CONTAINER_ID bash`. Or, for root access, use: `docker exec -u 0 -it CONTAINER_ID bash`
To snapshot a running container, use `docker commit CONTAINER_ID`. It returns a snapshot ID, which you can access via `docker run -it SNAPSHOT_ID`.
----------------------------------------------------------------
## Configuration
### Backend URL
To change the URL for the backend, use the `ionic.config.json` file (proxies > proxyUrl). By default, the system assumes that backend and frontend are installed on the same machine.
......
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
},
"app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>mcClient</name>
<name>mc_frontend</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
......@@ -18,6 +18,14 @@
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="browser">
<preference name="SplashScreen" value="assets/imgs/logo.png" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashScreenBackgroundColor" value="white" />
<preference name="ShowSplashScreen" value="true" />
<preference name="SplashScreenWidth" value="600" />
<preference name="SplashScreenHeight" value="300" />
</platform>
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
......@@ -79,6 +87,8 @@
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" />
<plugin name="cordova-plugin-ionic-webview" spec="^2.2.5" />
<engine name="android" spec="^7.1.4" />
<engine name="browser" spec="5.0.4" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<engine name="android" spec="7.1.4" />
<engine name="browser" spec="^5.0.4" />
</widget>
version: '3'
services:
mc_frontend:
build:
context: .
dockerfile: Dockerfile
command: nginx -g "daemon off;"
ports:
- "8100:8100"
restart: always
stdin_open: true
tty: true
volumes:
- .:/home/mc/mc_frontend
networks:
default:
external:
name: mc_backend_default
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
import { AppPage } from './app.po';
describe('new App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should be blank', () => {
page.navigateTo();
expect(page.getParagraphText()).toContain('The world is your oyster.');
});
});
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.deepCss('app-root ion-content')).getText();
}
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5"
}
}
{
"name": "mc_frontend",
"integrations": {
"cordova": {}
},
"name": "mcClient",
"proxies": [
{
"path": "/mc-service",
"proxyUrl": "http://localhost:5000/"
}
],
"type": "ionic-angular"
}
\ No newline at end of file
"type": "angular"
}
# /etc/nginx/nginx.conf
user mc;
# Set number of worker processes automatically based on number of CPU cores.
worker_processes auto;
# Enables the use of JIT for regular expressions to speed-up their processing.
pcre_jit on;
# Configures default error logger.
error_log /var/log/nginx/error.log warn;
# Includes files with directives to load dynamic modules.
include /etc/nginx/modules/*.conf;
events {
# The maximum number of simultaneous connections that can be opened by
# a worker process.
worker_connections 1024;
}
http {
server {
listen 8100;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /home/mc/mc_frontend/www;
index index.html index.htm;
rewrite ^(.*)mc-service(.*)^ http://localhost:5000$2 last;
}
location /mc-service/ {
proxy_pass http://mcserver:5000/;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# Includes mapping of file name extensions to MIME types of responses
# and defines the default type.
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Name servers used to resolve names of upstream servers into addresses.
# It's also needed when using tcpsocket and udpsocket in Lua modules.
#resolver 208.67.222.222 208.67.220.220;
# Don't tell nginx version to clients.
server_tokens off;
# Specifies the maximum accepted body size of a client request, as
# indicated by the request header Content-Length. If the stated content
# length is greater than this size, then the client receives the HTTP
# error code 413. Set to 0 to disable.
client_max_body_size 1m;
# Timeout for keep-alive connections. Server will close connections after
# this time.
keepalive_timeout 65;
# Sendfile copies data between one FD and other from within the kernel,
# which is more efficient than read() + write().
sendfile on;
# Don't buffer data-sends (disable Nagle algorithm).
# Good for sending frequent small bursts of data in real time.
tcp_nodelay on;
# Causes nginx to attempt to send its HTTP response head in one packet,
# instead of using partial frames.
#tcp_nopush on;
# Path of the file with Diffie-Hellman parameters for EDH ciphers.
#ssl_dhparam /etc/ssl/nginx/dh2048.pem;
# Specifies that our cipher suits should be preferred over client ciphers.
ssl_prefer_server_ciphers on;
# Enables a shared SSL cache with size that can hold around 8000 sessions.
ssl_session_cache shared:SSL:2m;
# Enable gzipping of responses.
#gzip on;
# Set the Vary HTTP header as defined in the RFC 2616.
gzip_vary on;
# Enable checking the existence of precompressed files.
#gzip_static on;
# Specifies the main log format.
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
# Sets the path, format, and configuration for a buffered log write.
access_log /var/log/nginx/access.log main;
# Includes virtual hosts configs.
include /etc/nginx/conf.d/*.conf;
}
This diff is collapsed.
{
"name": "mcclient",
"version": "0.6.4",
"name": "mc_frontend",
"version": "0.6.7",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"homepage": "https://ionicframework.com/",
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
"ng": "ng",
"start": "ng serve --port 8100",
"build": "ionic cordova build browser",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.2.4",
"@angular/common": "^7.2.4",
"@angular/compiler": "^7.2.4",
"@angular/compiler-cli": "^7.2.4",
"@angular/core": "^7.2.4",
"@angular/forms": "^7.2.4",
"@angular/http": "^7.2.4",
"@angular/platform-browser": "^7.2.4",
"@angular/platform-browser-dynamic": "^7.2.4",
"@ionic-native/core": "^5.0.0-beta.21",
"@ionic-native/ionic-webview": "^5.0.0-beta.21",
"@ionic-native/status-bar": "^5.0.0-beta.21",
"@ionic/storage": "^2.2.0",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^2.0.1",
"@types/d3": "^5.7.0",
"@types/xml2js": "^0.4.3",
"ajv": "^6.8.1",
"cordova-android": "^7.1.4",
"cordova-browser": "5.0.4",
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.0.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"ajv": "^6.9.1",
"cordova-android": "7.1.4",
"cordova-browser": "^5.0.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.5",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^2.3.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"fsevents": "^1.2.7",
"