Commit 29d090ca authored by Saul Shanabrook's avatar Saul Shanabrook

Switch to Angular CLI

parent dcb0de2b
Pipeline #4967249 failed with stage
in 5 minutes and 58 seconds
node_modules
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = 0
trim_trailing_whitespace = false
# Logs
logs
*.log
# See http://help.github.com/ignore-files/ for more about ignoring files.
ios/build
# compiled output
/dist
/tmp
# Runtime data
pids
# dependencies
/node_modules
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
/bower_components
# Coverage directory used by tools like istanbul
coverage
# IDEs and editors
/.idea
/.vscode
.project
.classpath
*.launch
.settings/
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# e2e
/e2e/*.js
/e2e/*.map
# Compiled binary addons (http://nodejs.org/api/addons.html)
#System Files
build/Release
# Users Environment Variables
......
image: node:6
before_script:
- npm install --quiet
lint:
script:
- npm run lint
test:
script:
- npm test
e2e:
script:
- npm start &
- sleep 20
- npm run e2e
......@@ -4,7 +4,6 @@ RUN mkdir /dist
WORKDIR /dist
# Install Node deps
RUN npm install -g webpack webpack-dev-server typings karma-cli --loglevel warn
COPY package.json /dist/package.json
RUN npm install --loglevel warn
......
# Passit Front
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.19-3.
## organization
Functions are listed alphabetically in components
### To run
```
$ docker-compose build
$ docker-compose up
```
Then navigate to `localhost:8080` to view project
## Development server
Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
### To test
## Code scaffolding
Run `./node_modules/.bin/ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
unit:
```
$ npm run test
```
## Build
Run `./node_modules/.bin/ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
You can also run them on Saucelabs, which is what happens on Gitlab CI:
e2e:
(have front and back end running locally in other windows)
```bash
env CI=true SAUCE_USERNAME=... SAUCE_ACCESS_KEY=... npm test
```
$ npm run pretest
$ npm run e2e
## Running end-to-end tests
Run `npm run e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `npm start`
You can also run them on Saucelabs, which is what happens on Gitlab CI:
```bash
npm start
# in new window
env CI=true SAUCE_USERNAME=... SAUCE_ACCESS_KEY=... npm run e2e
```
To get more help on the `angular-cli` use `./node_modules/.bin/ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
## To Lint
```
$ npm run lint
```
This project now uses webpack.
The webpack.config.js file in root references webpack files in config/ directory for development, production or testing.
Webpack structure based on [angular.io docs](https://angular.io/docs/ts/latest/guide/webpack.html)
### Technologies used
......
{
"project": {
"version": "1.0.0-beta.19-3",
"name": "passit-frontend"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "../tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
],
"scripts": [
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [
],
"packages": [
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": true,
"pipe": true,
"service": true
}
}
}
var path = require("path");
var _root = path.resolve(__dirname, "..");
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [_root].concat(args));
}
exports.root = root;
Error.stackTraceLimit = Infinity;
require("core-js/es6");
require("core-js/es7/reflect");
require("zone.js/dist/zone");
require("zone.js/dist/long-stack-trace-zone");
require("zone.js/dist/proxy");
require("zone.js/dist/sync-test");
require("zone.js/dist/jasmine-patch");
require("zone.js/dist/async-test");
require("zone.js/dist/fake-async-test");
var appContext = require.context("../tests", true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require("@angular/core/testing");
var browser = require("@angular/platform-browser-dynamic/testing");
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
// var webpackConfig = require("./webpack.test");
module.exports = function (config) {
if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
console.log("Make sure the SAUCE_USERNAME and SAUCE_ACCESS_KEY environment variables are set.")
process.exit(1)
}
var customLaunchers = {
sl_chrome: {
base: "SauceLabs",
browserName: "chrome",
version: "53"
},
sl_firefox: {
base: "SauceLabs",
browserName: "firefox",
version: "49"
}
}
config.set({
sauceLabs: {
testName: "Passit FE Tests"
},
customLaunchers: customLaunchers,
browsers: Object.keys(customLaunchers),
reporters: ["dots", "saucelabs"],
files: [
{
pattern: "./config/karma-test-shim.js",
watched: false
}
],
frameworks: ["jasmine"],
singleRun: true,
webpack: {
module: {
loaders: [
{ test: /\.tsx?$/, loader: "ts-loader" }
],
},
watch: true,
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
},
webpackServer: {
noInfo: true
},
browserDisconnectTimeout: 10000,
browserDisconnectTolerance: 1,
browserNoActivityTimeout: 6*60*1000,
captureTimeout: 6*60*1000,
colors: true,
logLevel: config.LOG_INFO
});
};
require("ts-node/register");
var helpers = require("./helpers");
exports.config = {
baseUrl: "http://localhost:8080/",
// use `npm run e2e`
specs: [
helpers.root("src/**/**.e2e.ts"),
helpers.root("src/**/*.e2e.ts")
],
exclude: [],
framework: "jasmine2",
allScriptsTimeout: 110000,
jasmineNodeOpts: {
showTiming: true,
showColors: true,
isVerbose: false,
includeStackTrace: false,
defaultTimeoutInterval: 400000
},
directConnect: true,
capabilities: {
"browserName": "chrome",
"chromeOptions": {
"args": ["show-fps-counter=true"]
}
},
onPrepare: function() {
browser.ignoreSynchronization = true;
},
/**
* Angular 2 configuration
*
* useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
* `rootEl`
*/
useAllAngular2AppRoots: true
};
/*
* https://angular.io/docs/ts/latest/guide/webpack.html
*/
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var helpers = require("./helpers");
module.exports = {
/*
* entry point for bundle
* polyfills: standard polyfills required to run angular app in modern browsers
* vendor: vendor files we need, @angular etc.
* app: our app code
*/
entry: {
"polyfills": "./src/polyfills.ts",
"vendor": "./src/vendor.ts",
"app": "./src/main.ts"
},
/*
* resolve module file request by looking for matching files with
* ": explicit extension
*/
resolve: {
extensions: ["", ".js", ".ts"]
},
/*
* specify loaders
* from "specifiy the loaders" section in link listed at top of file:
* ts: a loader to transpile our Typescript code to ES5, guided by the tsconfig.json file
* angular2-template-loader: loads ng components template and styles
* html: for component templates
* images/fonts: Images and fonts are bundled as well.
* css: The pattern matches application-wide styles;
* the second handles component-scoped styles, specified in a component"s styleUrls metadata property
*/
module: {
loaders: [
{
test: /\.ts$/,
loaders: ["awesome-typescript-loader", "angular2-template-loader"]
},
{
test: /\.html$/,
loader: "html"
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: "file?name=assets/[name].[hash].[ext]"
},
{
test: /\.css$/,
exclude: helpers.root("src", "app"),
loader: ExtractTextPlugin.extract("style", "css?sourceMap")
},
{
test: /\.css$/,
include: helpers.root("src", "app"),
loader: "raw"
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ["raw-loader", "sass-loader"]
}
]
},
/*
* CommonsChunkPlugin:
* want app.js bundle to only contain app code
* vendor.js bundle to only contain vendor code
* CommonsChunkPlugin keeps vendor code out of app.js bundle
*
* HtmlWebpackPlugin:
* inject webpack generated js and css files into index.html
*/
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ["app", "vendor", "polyfills"]
}),
new HtmlWebpackPlugin({
template: "src/index.html"
})
]
};
var webpackMerge = require("webpack-merge");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var commonConfig = require("./webpack.common.js");
var helpers = require("./helpers");
/*
* dev server keeps all bundles in memory
* no files generated to dist in development
*/
module.exports = webpackMerge(commonConfig, {
devtool: "cheap-module-eval-source-map",
output: {
path: helpers.root("dist"),
publicPath: "http://localhost:8080/",
filename: "[name].js",
chunkFilename: "[id].chunk.js"
},
/*
* CSS in JS bundles by default
* ExtractTextPlugin extracts to external css files
* HtmlWebpackPlugin then adds as <link> to index.html
*/
plugins: [
new ExtractTextPlugin("[name].css")
],
devServer: {
inline: true,
historyApiFallback: true,
stats: "minimal"
}
});
var webpack = require("webpack");
var webpackMerge = require("webpack-merge");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var commonConfig = require("./webpack.common.js");
var helpers = require("./helpers");
const ENV = process.env.NODE_ENV = process.env.ENV = "production";
module.exports = webpackMerge(commonConfig, {
devtool: "source-map",
/*
* output files are put in the dist folder
* generates file names with cache-busting hash
* because using HtmlWebpackPlugin dont have to update index.html when hashes change
*/
output: {
path: helpers.root("dist"),
publicPath: "/",
filename: "[name].[hash].js",
chunkFilename: "[id].[hash].chunk.js"
},
htmlLoader: {
// workaround for ng2
minimize: false
},
/*
* production plugins:
* NoErrorsPlugin: stops build if there is an error
* DedupePlugin: detects identical (or almost identical) files and removes them from output
* UglifyJsPlugin: minifies bundles
* ExtractTextPlugin: extracts embedded css as external files, adds has to filename
* DefinePlugin: use to define env variables that we can reference within application
*/
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
// https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin("[name].[hash].css"),
new webpack.DefinePlugin({
"process.env": {
"ENV": JSON.stringify(ENV)
}
})
]
});
var helpers = require("./helpers");
module.exports = {
devtool: "inline-source-map",
resolve: {
extensions: ["", ".ts", ".js"]
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ["awesome-typescript-loader", "angular2-template-loader"]
},
{
test: /\.html$/,
loader: "html"
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: "null"
},
{
test: /\.css$/,
exclude: helpers.root("src", "app"),
loader: "null"
},
{
test: /\.css$/,
include: helpers.root("src", "app"),
loader: "raw"
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader']
}
]
}
}
......@@ -4,7 +4,7 @@ services:
build: .
volumes:
- .:/dist
command: webpack-dev-server --inline --config config/webpack.dev.js --progress --profile --colors --watch --display-error-details --display-cached --content-base src/ --host 0.0.0.0
command: npm start -- --host 0.0.0.0 --port 8080 --live-reload-port 3000
ports:
- "8080:8080"
- "3000:3000"
module.exports = require("./config/karma.conf.js");
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
var options = {
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: ['progress', 'karma-remap-istanbul'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
}
if (process.env.CI) {
console.log("KARMA: Using SauceLabs");
options.sauceLabs = {
testName: 'passit-frontend karma',
startConnect: true,
recordVideo: true,
recordScreenshots: true,
}
options.customLaunchers = {
sl_chrome: {
base: 'SauceLabs',
browserName: 'chrome',
version: '53'
},
sl_firefox: {
base: 'SauceLabs',
browserName: 'firefox',
version: '49'
}
};
options.browsers = Object.keys(options.customLaunchers);
options.reporters.push('saucelabs');
options.singleRun = true;
options.plugins.push(require('karma-sauce-launcher'));
options.browserDisconnectTimeout = 10000;
options.browserDisconnectTolerance = 1;
options.browserNoActivityTimeout = 10 * 60 *1000;
} else {
console.log("KARMA: Using local chrome");
options.plugins.push(require('karma-chrome-launcher'));
}
config.set(options);
};
{
"name": "passit-frontend",
"version": "1.0.0",
"angular-cli": {},
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"pretest": "./node_modules/protractor/bin/webdriver-manager update",
"postinstall": "typings install",
"e2e": "npm run protractor",
"protractor": "protractor",
"tslint": "tslint",
"lint": "npm run tslint \"src/**/*.ts\""
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"postinstall": "typings install; npm run fix-fernet",
"fix-fernet": "sed -i.bak \"s/require('crypto')/{randomBytes: require('randombytes')}/\" node_modules/fernet/fernet.js",
"pree2e": "[ -z \"$CI\" ] && webdriver-manager update || true",
"e2e": "protractor"
},
"license": "AGPL-3.0",
"homepage": "https://gitlab.com/burke-software/passit-frontend",
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/common": "~2.1.2",
"@angular/compiler": "~2.1.2",
"@angular/core": "~2.1.2",
"@angular/forms": "~2.1.2",
"@angular/http": "~2.1.2",
"@angular/platform-browser": "~2.1.2",
"@angular/platform-browser-dynamic": "~2.1.2",
"@angular/router": "~3.1.2",
"angular2-clipboard": "0.2.18",
"codelyzer": "^1.0.0-beta.0",
"breakpoint-sass": "^2.7.0",
"core-js": "^2.4.1",
"ng2-inline-svg": "^1.2.0",