├── src
├── assets
│ └── .gitkeep
├── app
│ ├── app.component.scss
│ ├── index.ts
│ ├── app.component.html
│ ├── app.component.ts
│ ├── app.module.ts
│ └── app.component.spec.ts
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── styles.scss
├── typings.d.ts
├── index.html
├── main.ts
├── tsconfig.json
├── polyfills.ts
└── test.ts
├── .dockerignore
├── e2e
├── app.po.ts
├── tsconfig.json
└── app.e2e-spec.ts
├── .editorconfig
├── docker-compose.yml
├── .gitignore
├── Dockerfile
├── protractor.conf.js
├── LICENSE
├── karma.conf.js
├── angular-cli.json
├── package.json
├── tslint.json
└── README.md
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/src/app/index.ts:
--------------------------------------------------------------------------------
1 | export * from './app.component';
2 | export * from './app.module';
3 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amrtgaber/angular2-cli-webpack-docker/HEAD/src/favicon.ico
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | @import "../node_modules/bootstrap/scss/bootstrap.scss"
4 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | // Typings reference file, you can add your own global typings here
2 | // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
3 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{title}}
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss']
7 | })
8 | export class AppComponent {
9 | title = 'app works!';
10 | }
11 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, element, by } from 'protractor';
2 |
3 | export class Angular2CliWebpackDockerPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = 0
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular2CliWebpackDocker
6 |
7 |
8 |
9 |
10 |
11 |
12 | Loading...
13 |
14 |
15 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '2'
2 | services:
3 | angular2-cli-webpack-docker:
4 | container_name: angular2-cli-webpack-docker
5 | build: .
6 | command: "npm start -- --host=0.0.0.0"
7 | ports:
8 | - 4200:4200
9 | - 49152:49152
10 | volumes:
11 | - .:/home/app/angular2-cli-webpack-docker
12 | - /home/app/angular2-cli-webpack-docker/node_modules
13 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './polyfills.ts';
2 |
3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4 | import { enableProdMode } from '@angular/core';
5 | import { environment } from './environments/environment';
6 | import { AppModule } from './app/';
7 |
8 | if (environment.production) {
9 | enableProdMode();
10 | }
11 |
12 | platformBrowserDynamic().bootstrapModule(AppModule);
13 |
--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "module": "commonjs",
8 | "moduleResolution": "node",
9 | "outDir": "../dist/out-tsc-e2e",
10 | "sourceMap": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "../node_modules/@types"
14 | ]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { Angular2CliWebpackDockerPage } from './app.po';
2 |
3 | describe('angular2-cli-webpack-docker App', function() {
4 | let page: Angular2CliWebpackDockerPage;
5 |
6 | beforeEach(() => {
7 | page = new Angular2CliWebpackDockerPage();
8 | });
9 |
10 | it('should display message saying app works', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('app works!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "",
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "lib": ["es6", "dom"],
8 | "mapRoot": "./",
9 | "module": "es6",
10 | "moduleResolution": "node",
11 | "outDir": "../dist/out-tsc",
12 | "sourceMap": true,
13 | "target": "es5",
14 | "typeRoots": [
15 | "../node_modules/@types"
16 | ]
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # IDEs and editors
12 | /.idea
13 | /.vscode
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 |
20 | # misc
21 | /.sass-cache
22 | /connect.lock
23 | /coverage/*
24 | /libpeerconnection.log
25 | npm-debug.log
26 | testem.log
27 | /typings
28 |
29 | # e2e
30 | /e2e/*.js
31 | /e2e/*.map
32 |
33 | #System Files
34 | .DS_Store
35 | Thumbs.db
36 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:6.9.1
2 |
3 | RUN useradd --user-group --create-home --shell /bin/false app
4 |
5 | ENV APP_NAME "angular2-cli-webpack-docker"
6 | ENV APP_USER "app"
7 | ENV HOME /home/$APP_USER
8 | ENV APP_DIR $HOME/$APP_NAME
9 |
10 | RUN npm install --global angular-cli
11 |
12 | WORKDIR $APP_DIR
13 | COPY package.json $APP_DIR/package.json
14 | RUN npm install && npm cache clean
15 | COPY . $APP_DIR
16 | RUN chown -R $APP_USER:$APP_USER $HOME/*
17 |
18 | USER $APP_USER
19 | WORKDIR $APP_DIR
20 |
21 | EXPOSE 4200 49152
22 |
23 | CMD ["npm", "start", "--host=0.0.0.0"]
24 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { HttpModule } from '@angular/http';
5 | import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
6 |
7 | import { AppComponent } from './app.component';
8 |
9 | @NgModule({
10 | declarations: [
11 | AppComponent
12 | ],
13 | imports: [
14 | BrowserModule,
15 | FormsModule,
16 | HttpModule,
17 | NgbModule.forRoot()
18 | ],
19 | providers: [],
20 | bootstrap: [AppComponent]
21 | })
22 | export class AppModule { }
23 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | // This file includes polyfills needed by Angular 2 and is loaded before
2 | // the app. You can add your own extra polyfills to this file.
3 | import 'core-js/es6/symbol';
4 | import 'core-js/es6/object';
5 | import 'core-js/es6/function';
6 | import 'core-js/es6/parse-int';
7 | import 'core-js/es6/parse-float';
8 | import 'core-js/es6/number';
9 | import 'core-js/es6/math';
10 | import 'core-js/es6/string';
11 | import 'core-js/es6/date';
12 | import 'core-js/es6/array';
13 | import 'core-js/es6/regexp';
14 | import 'core-js/es6/map';
15 | import 'core-js/es6/set';
16 | import 'core-js/es6/reflect';
17 |
18 | import 'core-js/es7/reflect';
19 | import 'zone.js/dist/zone';
20 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/docs/referenceConf.js
3 |
4 | /*global jasmine */
5 | var SpecReporter = require('jasmine-spec-reporter');
6 |
7 | exports.config = {
8 | allScriptsTimeout: 11000,
9 | specs: [
10 | './e2e/**/*.e2e-spec.ts'
11 | ],
12 | capabilities: {
13 | 'browserName': 'chrome'
14 | },
15 | directConnect: true,
16 | baseUrl: 'http://localhost:4200/',
17 | framework: 'jasmine',
18 | jasmineNodeOpts: {
19 | showColors: true,
20 | defaultTimeoutInterval: 30000,
21 | print: function() {}
22 | },
23 | useAllAngular2AppRoots: true,
24 | beforeLaunch: function() {
25 | require('ts-node').register({
26 | project: 'e2e'
27 | });
28 | },
29 | onPrepare: function() {
30 | jasmine.getEnv().addReporter(new SpecReporter());
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | import './polyfills.ts';
2 |
3 | import 'zone.js/dist/long-stack-trace-zone';
4 | import 'zone.js/dist/proxy.js';
5 | import 'zone.js/dist/sync-test';
6 | import 'zone.js/dist/jasmine-patch';
7 | import 'zone.js/dist/async-test';
8 | import 'zone.js/dist/fake-async-test';
9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 |
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare var __karma__: any;
17 | declare var require: any;
18 |
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 |
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 | BrowserDynamicTestingModule,
25 | platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | let context = require.context('./', true, /\.spec\.ts/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Amr Gaber
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { AppComponent } from './app.component';
5 |
6 | describe('AppComponent', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | });
13 | });
14 |
15 | it('should create the app', async(() => {
16 | let fixture = TestBed.createComponent(AppComponent);
17 | let app = fixture.debugElement.componentInstance;
18 | expect(app).toBeTruthy();
19 | }));
20 |
21 | it(`should have as title 'app works!'`, async(() => {
22 | let fixture = TestBed.createComponent(AppComponent);
23 | let app = fixture.debugElement.componentInstance;
24 | expect(app.title).toEqual('app works!');
25 | }));
26 |
27 | it('should render title in a h1 tag', async(() => {
28 | let fixture = TestBed.createComponent(AppComponent);
29 | fixture.detectChanges();
30 | let compiled = fixture.debugElement.nativeElement;
31 | expect(compiled.querySelector('h1').textContent).toContain('app works!');
32 | }));
33 | });
34 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', 'angular-cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-remap-istanbul'),
12 | require('angular-cli/plugins/karma')
13 | ],
14 | files: [
15 | { pattern: './src/test.ts', watched: false }
16 | ],
17 | preprocessors: {
18 | './src/test.ts': ['angular-cli']
19 | },
20 | mime: {
21 | 'text/x-typescript': ['ts','tsx']
22 | },
23 | remapIstanbulReporter: {
24 | reports: {
25 | html: 'coverage',
26 | lcovonly: './coverage/coverage.lcov'
27 | }
28 | },
29 | angularCli: {
30 | config: './angular-cli.json',
31 | environment: 'dev'
32 | },
33 | reporters: config.angularCli && config.angularCli.codeCoverage
34 | ? ['progress', 'karma-remap-istanbul']
35 | : ['progress'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false
42 | });
43 | };
44 |
--------------------------------------------------------------------------------
/angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "project": {
3 | "version": "1.0.0-beta.20-4",
4 | "name": "angular2-cli-webpack-docker"
5 | },
6 | "apps": [
7 | {
8 | "root": "src",
9 | "outDir": "dist",
10 | "assets": [
11 | "assets",
12 | "favicon.ico"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "test": "test.ts",
17 | "tsconfig": "tsconfig.json",
18 | "prefix": "app",
19 | "mobile": false,
20 | "styles": [
21 | "styles.scss",
22 | "../node_modules/animate.css/animate.css"
23 | ],
24 | "scripts": [],
25 | "environments": {
26 | "source": "environments/environment.ts",
27 | "dev": "environments/environment.ts",
28 | "prod": "environments/environment.prod.ts"
29 | }
30 | }
31 | ],
32 | "addons": [],
33 | "packages": [],
34 | "e2e": {
35 | "protractor": {
36 | "config": "./protractor.conf.js"
37 | }
38 | },
39 | "test": {
40 | "karma": {
41 | "config": "./karma.conf.js"
42 | }
43 | },
44 | "defaults": {
45 | "styleExt": "scss",
46 | "prefixInterfaces": false,
47 | "inline": {
48 | "style": false,
49 | "template": false
50 | },
51 | "spec": {
52 | "class": false,
53 | "component": true,
54 | "directive": true,
55 | "module": false,
56 | "pipe": true,
57 | "service": true
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular2-cli-webpack-docker",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "angular-cli": {},
6 | "scripts": {
7 | "start": "ng serve",
8 | "lint": "tslint \"src/**/*.ts\"",
9 | "test": "ng test",
10 | "pree2e": "webdriver-manager update",
11 | "e2e": "protractor"
12 | },
13 | "private": true,
14 | "dependencies": {
15 | "@angular/common": "~2.0.0",
16 | "@angular/compiler": "~2.0.0",
17 | "@angular/core": "~2.0.0",
18 | "@angular/forms": "~2.0.0",
19 | "@angular/http": "~2.0.0",
20 | "@angular/platform-browser": "~2.0.0",
21 | "@angular/platform-browser-dynamic": "~2.0.0",
22 | "@angular/router": "~3.0.0",
23 | "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.7",
24 | "animate.css": "^3.5.2",
25 | "bootstrap": "^4.0.0-alpha.5",
26 | "core-js": "^2.4.1",
27 | "rxjs": "5.0.0-beta.12",
28 | "ts-helpers": "^1.1.1",
29 | "zone.js": "^0.6.23"
30 | },
31 | "devDependencies": {
32 | "@types/jasmine": "^2.2.30",
33 | "@types/node": "^6.0.42",
34 | "angular-cli": "1.0.0-beta.17",
35 | "codelyzer": "~0.0.26",
36 | "jasmine-core": "2.4.1",
37 | "jasmine-spec-reporter": "2.5.0",
38 | "karma": "1.2.0",
39 | "karma-chrome-launcher": "^2.0.0",
40 | "karma-cli": "^1.0.1",
41 | "karma-jasmine": "^1.0.2",
42 | "karma-remap-istanbul": "^0.2.1",
43 | "protractor": "4.0.9",
44 | "ts-node": "1.2.1",
45 | "tslint": "3.13.0",
46 | "typescript": "2.0.2"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "class-name": true,
7 | "comment-format": [
8 | true,
9 | "check-space"
10 | ],
11 | "curly": true,
12 | "eofline": true,
13 | "forin": true,
14 | "indent": [
15 | true,
16 | "spaces"
17 | ],
18 | "label-position": true,
19 | "label-undefined": true,
20 | "max-line-length": [
21 | true,
22 | 140
23 | ],
24 | "member-access": false,
25 | "member-ordering": [
26 | true,
27 | "static-before-instance",
28 | "variables-before-functions"
29 | ],
30 | "no-arg": true,
31 | "no-bitwise": true,
32 | "no-console": [
33 | true,
34 | "debug",
35 | "info",
36 | "time",
37 | "timeEnd",
38 | "trace"
39 | ],
40 | "no-construct": true,
41 | "no-debugger": true,
42 | "no-duplicate-key": true,
43 | "no-duplicate-variable": true,
44 | "no-empty": false,
45 | "no-eval": true,
46 | "no-inferrable-types": true,
47 | "no-shadowed-variable": true,
48 | "no-string-literal": false,
49 | "no-switch-case-fall-through": true,
50 | "no-trailing-whitespace": true,
51 | "no-unused-expression": true,
52 | "no-unused-variable": true,
53 | "no-unreachable": true,
54 | "no-use-before-declare": true,
55 | "no-var-keyword": true,
56 | "object-literal-sort-keys": false,
57 | "one-line": [
58 | true,
59 | "check-open-brace",
60 | "check-catch",
61 | "check-else",
62 | "check-whitespace"
63 | ],
64 | "quotemark": [
65 | true,
66 | "single"
67 | ],
68 | "radix": true,
69 | "semicolon": [
70 | "always"
71 | ],
72 | "triple-equals": [
73 | true,
74 | "allow-null-check"
75 | ],
76 | "typedef-whitespace": [
77 | true,
78 | {
79 | "call-signature": "nospace",
80 | "index-signature": "nospace",
81 | "parameter": "nospace",
82 | "property-declaration": "nospace",
83 | "variable-declaration": "nospace"
84 | }
85 | ],
86 | "variable-name": false,
87 | "whitespace": [
88 | true,
89 | "check-branch",
90 | "check-decl",
91 | "check-operator",
92 | "check-separator",
93 | "check-type"
94 | ],
95 |
96 | "directive-selector-prefix": [true, "app"],
97 | "component-selector-prefix": [true, "app"],
98 | "directive-selector-name": [true, "camelCase"],
99 | "component-selector-name": [true, "kebab-case"],
100 | "directive-selector-type": [true, "attribute"],
101 | "component-selector-type": [true, "element"],
102 | "use-input-property-decorator": true,
103 | "use-output-property-decorator": true,
104 | "use-host-property-decorator": true,
105 | "no-input-rename": true,
106 | "no-output-rename": true,
107 | "use-life-cycle-interface": true,
108 | "use-pipe-transform-interface": true,
109 | "component-class-suffix": true,
110 | "directive-class-suffix": true,
111 | "templates-use-public": true,
112 | "invoke-injectable": true
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular 2 Cli with Webpack and Docker
2 |
3 | [](https://opensource.org/licenses/MIT)
4 |
5 | Hello! :wave:
6 |
7 | This is a dockerized project generated with [angular-cli](https://github.com/angular/angular-cli) version **1.0.0-beta.20-4**. Along with great built in angular 2 and webpack features (e.g. hot module reloading), this starter also has [scss](https://github.com/sass/sass), [bootstrap 4](https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.5), [ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap) and [animate.css](https://github.com/daneden/animate.css) pre-installed and allows you to continue to use the cli to generate components. :ok_hand:
8 |
9 | ## Please Note
10 |
11 | This is very much an experimental project and is intended to be more of an educational tool than a starter pack. Feel free to fork and set up your own project name, styling and responsive dependencies if you're looking for something different (e.g. [angular material](https://github.com/angular/material2))!
12 |
13 | Well that's great but, *Doesn't this kind of defeat the purpose of command line scaffolding for a new project* :question: ... Yes! but I wanted a resuable dockerized starter for this amazing tech stack and until the cli can deliver this is my stopgap.
14 |
15 | Also **I am not an expert** in all of these technologies; I'm just doing my best with what I know (which is admittedly very little). Please remember that many of these technologies are releasing new versions all the time so don't be surprised if things change or break! That said, I will do my best to keep this project as robust and up to date as possible.
16 |
17 | Feel free to ask me any questions you have and any help or feedback is always appreciated! :raised_hands:
18 |
19 | ## Table of Contents
20 |
21 | * [Getting Started](#getting-started)
22 | * [Install angular-cli](#install-angular-cli)
23 | * [Build and serve](#build-and-serve)
24 | * [See it in action](#see-it-in-action)
25 | * [Installing dependencies](#installing-dependencies)
26 | * [Dockerize your own angular-cli project](#dockerize-your-own-angular-cli-project)
27 | * [Angular Cli](#angular-cli)
28 |
29 | ## Getting Started
30 |
31 | #### You should have
32 | * Docker
33 | * Docker Compose
34 | * Node v4 or greater
35 | * NPM v3 or greater
36 |
37 | Not only will having these make development a lot easier, but also *the instructions will assume you have these installed*.
38 |
39 | #### If not, then at least have
40 | * Docker
41 |
42 | If this is all you have on your system you can still build the image using the Dockerfile. Then you can run a container, shell into it and use the angular-cli in the container.
43 |
44 | ### Install angular-cli
45 |
46 | ```bash
47 | sudo npm install -g angular-cli
48 | ```
49 |
50 | ### Build and serve
51 |
52 | ```bash
53 | git clone git@github.com:amrtgaber/angular2-cli-webpack-docker.git
54 | cd angular2-cli-webpack-docker
55 | docker-compose up
56 | # wait a little while
57 | ```
58 |
59 | Nice and easy! :tada: :sparkles: :sparkles:
60 |
61 | ## See it in action
62 |
63 | Navigate to `localhost:4200` in your browser.
64 |
65 | **NOTE**: For docker toolbox you must replace 'localhost' with the machine ip. You can get the machine ip with the following command.
66 |
67 | ```bash
68 | docker-machine ip angular2-cli-webpack-docker
69 | ```
70 |
71 | ## Installing dependencies
72 |
73 | ```bash
74 | npm install --save
75 | docker-compose down
76 | docker-compose up --build
77 | ```
78 |
79 | ## Dockerize your own angular-cli project
80 |
81 | You can grab the files needed to dockerize your own angular-cli project along with instructions from this repository: [angular2-cli-docker-files](https://github.com/amrtgaber/angular2-cli-docker-files).
82 |
83 | ## Angular Cli
84 |
85 | This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.20-4.
86 |
87 | ### Development server
88 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
89 |
90 | ### Code scaffolding
91 |
92 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
93 |
94 | ### Build
95 |
96 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
97 |
98 | ### Running unit tests
99 |
100 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
101 |
102 | ### Running end-to-end tests
103 |
104 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
105 | Before running the tests make sure you are serving the app via `ng serve`.
106 |
107 | ### Deploying to Github Pages
108 |
109 | Run `ng github-pages:deploy` to deploy to Github Pages.
110 |
111 | ### Further help
112 |
113 | To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
114 |
--------------------------------------------------------------------------------