|
1 | | -# Spring Cloud Data Flow Dashboard - Angular |
| 1 | +# Spring Cloud Data Flow Dashboard [](http://waffle.io/spring-cloud/spring-cloud-dataflow-ui) [](http://waffle.io/spring-cloud/spring-cloud-dataflow-ui) |
2 | 2 |
|
3 | | -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version `1.1.2`. |
| 3 | +[](https://travis-ci.org/spring-cloud/spring-cloud-dataflow-ui) |
| 4 | +[](https://ci.appveyor.com/project/ghillert/spring-cloud-dataflow-ui/branch/master) |
| 5 | +[](https://codecov.io/gh/spring-cloud/spring-cloud-dataflow-ui/branch/angular) |
| 6 | +[](https://www.versioneye.com/user/projects/5982002b0fb24f003b1f7de1) |
4 | 7 |
|
5 | | -## Development server |
| 8 | +This is the *Spring Cloud Data Flow Dashboard* user interface (UI). The UI uses [Angular][]. Source code documentation is available at http://cloud.spring.io/spring-cloud-dataflow-ui/. |
6 | 9 |
|
7 | | -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. |
| 10 | +> The Git repository for the main *Spring Cloud Data Flow* project is at: https://github.com/spring-cloud/spring-cloud-dataflow |
8 | 11 |
|
9 | | -## Code scaffolding |
| 12 | +# Building the Module |
10 | 13 |
|
11 | | -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`. |
| 14 | +Two build tool chains are supported. Primarily, the *Spring Cloud Data Flow UI* uses [npm][] ([Node.js][]-based) for managing dependencies and the execution of the build. In order to provide easier *Continuous Integration* (CI) support, [Maven][] can also be used to execute the build. |
12 | 15 |
|
13 | | -## Build |
| 16 | +The *Spring Cloud Data Flow Dashboard* uses [Maven][], specifically the [frontend-maven-plugin][] which will actually execute [npm][] underneath. Using the [frontend-maven-plugin][], however, the required tooling, including [Node.js][] will be downloaded, installed and executed for you. |
14 | 17 |
|
15 | | -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. |
| 18 | +## Requirements |
16 | 19 |
|
17 | | -## Running unit tests |
| 20 | +Using [Maven][] is also the easiest route for Java developers to get started, as the only requirements are: |
18 | 21 |
|
19 | | -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
| 22 | +* [Maven][] |
| 23 | +* [Git][] |
20 | 24 |
|
21 | | -## Running end-to-end tests |
| 25 | +## Building the Project using Maven |
22 | 26 |
|
23 | | -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). |
24 | | -Before running the tests make sure you are serving the app via `ng serve`. |
| 27 | + $ git clone https://github.com/spring-cloud/spring-cloud-dataflow-ui.git |
| 28 | + $ cd spring-cloud-dataflow-ui |
| 29 | + $ mvn clean package install |
25 | 30 |
|
26 | | -## Further help |
| 31 | +This will create `target/spring-cloud-dataflow-ui-2.0.0.BUILD-SNAPSHOT.jar` and also install the build artifact into the local Maven repository. |
27 | 32 |
|
28 | | -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). |
| 33 | +## Building the Project using npm |
| 34 | + |
| 35 | +For UI development purposes, we recommend using [npm][] directly. Please ensure that at a minimum [Node.js][], [npm][] and the [Angular CLI][] are available on your system. In order to execute the build simply do: |
| 36 | + |
| 37 | + $ git clone https://github.com/spring-cloud/spring-cloud-dataflow-ui.git |
| 38 | + $ cd spring-cloud-dataflow-ui/ui |
| 39 | + $ npm install |
| 40 | + $ ng build --prod |
| 41 | + |
| 42 | +**NOTE:** Before building be sure that the `ng-serve` development server has been shutdown. |
| 43 | + |
| 44 | +### Build fails after merging a branch or changing branches. |
| 45 | +In some cases the npm-modules or other dependencies may become inconsistent during branch changes. |
| 46 | +In order to resolve the problem we need to clean out inconsistent dependencies. |
| 47 | +The following instructions can be used to do this: |
| 48 | + |
| 49 | +* Shutdown the development server if it is running. |
| 50 | +* Commit or stash your changes |
| 51 | +* Execute the following: |
| 52 | + * `git clean -fx` |
| 53 | + * `npm install` |
| 54 | +* If you stashed your files execute the following: `git stash pop` |
| 55 | +* Now build the application by executing the following: `ng build --prod` |
| 56 | + |
| 57 | +## Important Build-related Configuration Files |
| 58 | + |
| 59 | +* **pom.xml** Maven config file |
| 60 | +* ui/**package.json** Node dependencies |
| 61 | + |
| 62 | +# Running Tests |
| 63 | + |
| 64 | +## Unit Tests |
| 65 | + |
| 66 | + $ ng test |
| 67 | + |
| 68 | +## E2E Tests |
| 69 | + |
| 70 | +In order to also execute the End-to-End (E2E) tests, please execute the UI build using: |
| 71 | + |
| 72 | + $ ng e2e |
| 73 | + |
| 74 | +Please ensure that a *Spring Cloud Data Flow* server instance is running at `http://localhost:9393/`. |
| 75 | + |
| 76 | +## Development |
| 77 | + |
| 78 | +For development, please ensure that a *Spring Cloud Data Flow* server instance is running at `http://localhost:9393/`. |
| 79 | + |
| 80 | +The execute: |
| 81 | + |
| 82 | + $ npm start |
| 83 | + |
| 84 | +The Dashboard will be running at `http://localhost:4200/`. The browser will automatically reload upon saving any changes to the application sources. |
| 85 | + |
| 86 | +## Dependency Management using Bower |
| 87 | + |
| 88 | +[npm][] is used for managing UI dependencies. |
| 89 | + |
| 90 | +### Install Build Dependency |
| 91 | + |
| 92 | + $ npm install --save-dev my-dependency |
| 93 | + |
| 94 | +## How to Update Node.js dependencies in package.json |
| 95 | + |
| 96 | +Use [https://github.com/tjunnone/npm-check-updates](https://github.com/tjunnone/npm-check-updates) |
| 97 | + |
| 98 | +[Angular]: http://angular.io/ |
| 99 | +[Angular CLI]: https://cli.angular.io/ |
| 100 | +[frontend-maven-plugin]: https://github.com/eirslett/frontend-maven-plugin |
| 101 | +[Git]: https://git-scm.com/ |
| 102 | +[Maven]: http://maven.apache.org/ |
| 103 | +[Node.js]: http://nodejs.org/ |
| 104 | +[npm]: https://www.npmjs.com/ |
| 105 | +[Protractor]: https://github.com/angular/protractor |
0 commit comments