mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 01:54:15 +00:00
84
README.md
84
README.md
@@ -8,7 +8,7 @@ You can find additional information on the [wiki](https://wiki.duraspace.org/dis
|
||||
If you're looking for the 2016 Angular 2 DSpace UI prototype, you can find it [here](https://github.com/DSpace-Labs/angular2-ui-prototype)
|
||||
|
||||
## Quick start
|
||||
**Make sure you have Node version >= 5.0 and NPM >= 3**
|
||||
**Ensure you're running [Node](https://nodejs.org) >= `v5.x`, [npm](https://www.npmjs.com/) >= `v3.x` and [yarn](https://yarnpkg.com) >= `v0.20.x`**
|
||||
|
||||
```bash
|
||||
# clone the repo
|
||||
@@ -18,19 +18,19 @@ git clone https://github.com/DSpace/dspace-angular.git
|
||||
cd dspace-angular
|
||||
|
||||
# install the global dependencies
|
||||
npm run global
|
||||
yarn run global
|
||||
|
||||
# install the local dependencies
|
||||
npm install
|
||||
yarn install
|
||||
|
||||
# start the server
|
||||
npm start
|
||||
yarn start
|
||||
```
|
||||
Then go to [http://localhost:3000](http://localhost:3000) in your browser
|
||||
|
||||
NOTE: currently there's not much to see at that URL. We really do need your help. If you're interested in jumping in, and you've made it this far, please look at the [the project board (waffle.io)](https://waffle.io/DSpace/dspace-angular), grab a card, and get to work. Thanks!
|
||||
|
||||
Not sure where to start? watch the training videos linked in the [Introduction to the technology](#introduction-to-the-technology) section below.
|
||||
Not sure where to start? watch the training videos linked in the [Introduction to the technology](#introduction-to-the-technology) section below.
|
||||
|
||||
## Table of Contents
|
||||
* [Introduction to the technology](#introduction-to-the-technology)
|
||||
@@ -53,14 +53,14 @@ Not sure where to start? watch the training videos linked in the [Introduction t
|
||||
You can find more information on the technologies used in this project (Angular 2, Typescript, Angular Universal, RxJS, etc) on the [DuraSpace wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+UI+Technology+Stack)
|
||||
|
||||
## Requirements
|
||||
* [Node.js](https://nodejs.org) and [npm](https://www.npmjs.com/)
|
||||
* Ensure you're running node >= `v5.x` and npm >= `v3.x`
|
||||
* [Node.js](https://nodejs.org), [npm](https://www.npmjs.com/), and [yarn](https://yarnpkg.com)
|
||||
* Ensure you're running node >= `v5.x`, npm >= `v3.x` and yarn >= `v0.20.x`
|
||||
|
||||
If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-windows`](https://github.com/coreybutler/nvm-windows) installed, which is highly recommended, you can run `nvm install --lts && nvm use` to install and start using the latest Node LTS.
|
||||
|
||||
## Installing
|
||||
* `npm run global` to install the required global dependencies
|
||||
* `npm install` to install the local dependencies
|
||||
* `yarn run global` to install the required global dependencies
|
||||
* `yarn install` to install the local dependencies
|
||||
|
||||
## Configuring
|
||||
Default configuration file is located in `config/` folder.
|
||||
@@ -68,38 +68,38 @@ Default configuration file is located in `config/` folder.
|
||||
To change the default configuration values, create local files that override the parameters you need to change:
|
||||
* Create a new `environment.dev.js` file in `config/` for `devel` environment;
|
||||
* Create a new `environment.prod.js` file in `config/` for `production` environment;
|
||||
|
||||
|
||||
To use the configuration parameters in your component:
|
||||
```bash
|
||||
import { GlobalConfig } from "../config";
|
||||
```
|
||||
|
||||
## Running the app
|
||||
After you have installed all dependencies you can now run the app. Run `npm run watch:dev` to start a local server which will watch for changes, rebuild the code, and reload the server for you. You can visit it at `http://localhost:3000`.
|
||||
After you have installed all dependencies you can now run the app. Run `yarn run watch:dev` to start a local server which will watch for changes, rebuild the code, and reload the server for you. You can visit it at `http://localhost:3000`.
|
||||
|
||||
## Running in production mode
|
||||
When building for production we're using Ahead of Time (AoT) compilation. With AoT, the browser downloads a pre-compiled version of the application, so it can render the application immediately, without waiting to compile the app first. The compiler is roughly half the size of Angular itself, so omitting it dramatically reduces the application payload.
|
||||
|
||||
To build the app for production and start the server run:
|
||||
```bash
|
||||
npm start
|
||||
yarn start
|
||||
```
|
||||
If you only want to build for production, without starting, run:
|
||||
```bash
|
||||
npm run build:prod:ngc:json
|
||||
yarn run build:prod:ngc:json
|
||||
```
|
||||
This will build the application and put the result in the `dist` folder
|
||||
|
||||
## Cleaning
|
||||
```bash
|
||||
# clean everything, including node_modules. You'll need to run npm install again afterwards.
|
||||
npm run clean
|
||||
# clean everything, including node_modules. You'll need to run yarn install again afterwards.
|
||||
yarn run clean
|
||||
|
||||
# clean files generated by the production build (.ngfactory files, css files, etc)
|
||||
npm run clean:prod
|
||||
yarn run clean:prod
|
||||
|
||||
# cleans the distribution directory
|
||||
npm run clean:dist
|
||||
yarn run clean:dist
|
||||
```
|
||||
|
||||
## Testing
|
||||
@@ -111,32 +111,29 @@ To executing tests whenever any file changes you can modify the 'autoWatch' opti
|
||||
A coverage report is also available at:
|
||||
http://localhost:9876/
|
||||
after you run:
|
||||
`npm run coverage`.
|
||||
`yarn run coverage`.
|
||||
|
||||
To correctly run the tests you need to run the build once with:
|
||||
`npm run build`.
|
||||
`yarn run build`.
|
||||
|
||||
The default browser is Google Chrome.
|
||||
|
||||
Place your tests in the same location of the application source code files that they test.
|
||||
|
||||
and run:
|
||||
`npm run test`
|
||||
`yarn run test`
|
||||
|
||||
### E2E test
|
||||
E2E tests use Protractor + Selenium server + browsers. You can find the configuration file at the same level of this README file:
|
||||
`./protractor.conf.js`
|
||||
Protractor is installed as 'local' as a dev dependency.
|
||||
If you are going to execute tests locally you need to run (once time only):
|
||||
`npm run webdriver:update`
|
||||
(for your convenience this command is now auto runned each time 'e2e' command is called).
|
||||
|
||||
If you are going to use a remote test enviroment you need to edit the './protractor.conf.js'. Follow the instructions you will find inside it.
|
||||
|
||||
The default browser is Google Chrome.
|
||||
|
||||
Protractor needs a functional instance of the DSpace interface to run the E2E tests, so you need to run:
|
||||
`npm run watch:dev`
|
||||
`yarn run watch:dev`
|
||||
|
||||
or any command that bring up the DSpace interface.
|
||||
|
||||
@@ -144,17 +141,17 @@ Place your tests at the following path:
|
||||
`./e2e`
|
||||
|
||||
and run:
|
||||
`npm run e2e`
|
||||
`yarn run e2e`
|
||||
|
||||
### Continuous Integration (CI) Test
|
||||
To run all the tests (e.g.: to run tests with Continuous Integration software) you can execute:
|
||||
`npm run ci`
|
||||
`yarn run ci`
|
||||
Keep in mind that this command prerequisites are the sum of unit test and E2E tests.
|
||||
|
||||
## Other commands
|
||||
There are many more commands in the `scripts` section of `package.json`. Most of these are executed by one of the commands mentioned above.
|
||||
|
||||
A command with a name that starts with `pre` or `post` will be executed automatically before or after the script with the matching name. e.g. if you type `npm run start` the `prestart` script will run first, then the `start` script will trigger.
|
||||
A command with a name that starts with `pre` or `post` will be executed automatically before or after the script with the matching name. e.g. if you type `yarn run start` the `prestart` script will run first, then the `start` script will trigger.
|
||||
|
||||
|
||||
## Recommended Editors/IDEs
|
||||
@@ -183,7 +180,6 @@ dspace-angular
|
||||
├── e2e * Folder for e2e test files
|
||||
├── karma.conf.js * Unit Test configuration file
|
||||
├── nodemon.json * Nodemon (https://nodemon.io/) configuration
|
||||
├── npm-shrinkwrap.json * Npm dependency lockfile (https://docs.npmjs.com/cli/shrinkwrap)
|
||||
├── package.json * This file describes the npm package for this project, its dependencies, scripts, etc.
|
||||
├── postcss.config.json * PostCSS (http://postcss.org/) configuration file
|
||||
├── protractor.conf.js * E2E tests configuration file
|
||||
@@ -198,7 +194,7 @@ dspace-angular
|
||||
│ ├── browser.module.ts * The root module for the client
|
||||
│ ├── client.aot.ts * The bootstrap file for the client, in production
|
||||
│ ├── client.ts * The bootstrap file for the client, during development
|
||||
│ ├── config.ts * File that loads environmental and shareable settings and makes them available to app components
|
||||
│ ├── config.ts * File that loads environmental and shareable settings and makes them available to app components
|
||||
│ ├── index-aot.html * The index.html file, for production
|
||||
│ ├── index.html * The index.html file, for development
|
||||
│ ├── node.module.ts * The root module for the server
|
||||
@@ -212,6 +208,7 @@ dspace-angular
|
||||
├── tsconfig.aot.json * TypeScript config for production builds
|
||||
├── tsconfig.json * TypeScript config for development build
|
||||
├── tslint.json * TSLint (https://palantir.github.io/tslint/) configuration
|
||||
├── yarn.lock * Yarn lockfile (https://yarnpkg.com/en/docs/yarn-lock)
|
||||
├── webpack.config.ts * Webpack (https://webpack.github.io/) config for development builds
|
||||
├── webpack.test.config.ts * Webpack (https://webpack.github.io/) config for testing
|
||||
└── webpack.prod.config.ts * Webpack (https://webpack.github.io/) config for production builds
|
||||
@@ -219,13 +216,13 @@ dspace-angular
|
||||
|
||||
## 3rd Party Library Installation
|
||||
|
||||
Install your library via `npm install lib-name --save` and import it in your code. `--save` will add it to `package.json`.
|
||||
Install your library via `yarn add lib-name --save` and import it in your code. `--save` will add it to `package.json`.
|
||||
|
||||
If the library does not include typings, you can install them using npm:
|
||||
If the library does not include typings, you can install them using yarn:
|
||||
|
||||
```bash
|
||||
npm install d3 --save
|
||||
npm install @types/d3 --save-dev
|
||||
yarn add d3 --save
|
||||
yarn add @types/d3 --save-dev
|
||||
```
|
||||
|
||||
If the library doesn't have typings available at `@types/`, you can still use it by
|
||||
@@ -253,12 +250,12 @@ If you're importing a module that uses CommonJS you need to import as
|
||||
import * as _ from 'lodash';
|
||||
```
|
||||
|
||||
## npm-shrinkwrap
|
||||
This project makes use of [npm-shrinkwrap](https://docs.npmjs.com/cli/shrinkwrap) to ensure that the exact same dependency versions are used every time you install it.
|
||||
## yarn lockfile
|
||||
This project makes use of yarn to ensure that the exact same dependency versions are used every time you install it.
|
||||
|
||||
npm-shrinkwrap creates the file `npm-shrinkwrap.json` to track those versions. That file is updated automatically every time you install a new dependency from the commandline (by using `npm install some-lib --save` or `npm install some-lib --save-dev`).
|
||||
yarn creates the file [`yarn.lock`](https://yarnpkg.com/en/docs/yarn-lock) to track those versions. That file is updated automatically every time you install a new dependency from the commandline (by using `yarn add some-lib --save` or `yarn add some-lib --save-dev`).
|
||||
|
||||
If you manually add a package or change a version in `package.json` you'll have to update npm-shrinkwrap's lock file as well. You can do so by running `npm run rewrap`
|
||||
If you manually add a package or change a version in `package.json` you'll have to update yarn's lock file as well. You can do so by running `yarn upgrade`
|
||||
|
||||
## Frequently asked questions
|
||||
* Why is my service, aka provider, is not injecting a parameter correctly?
|
||||
@@ -268,11 +265,16 @@ If you manually add a package or change a version in `package.json` you'll have
|
||||
* How do I start the app when I get `EACCES` and `EADDRINUSE` errors?
|
||||
* The `EADDRINUSE` error means the port `3000` is currently being used and `EACCES` is lack of permission to build files to `./dist/`
|
||||
* What are the naming conventions for Angular 2?
|
||||
* See [the official angular 2 style guide](https://angular.io/styleguide)
|
||||
* See [the official angular 2 style guide](https://angular.io/styleguide)
|
||||
* Why is the size of my app larger in development?
|
||||
* The production build uses a whole host of techniques (ahead-of-time compilation, rollup to remove unreachable code, minification, etc.) to reduce the size, that aren't used during development in the intrest of build speed.
|
||||
* node-pre-gyp ERR in npm install (Windows)
|
||||
* install Python x86 version between 2.5 and 3.0 on windows. See [this issue](https://github.com/AngularClass/angular2-webpack-starter/issues/626)
|
||||
* The production build uses a whole host of techniques (ahead-of-time compilation, rollup to remove unreachable code, minification, etc.) to reduce the size, that aren't used during development in the intrest of build speed.
|
||||
* node-pre-gyp ERR in yarn install (Windows)
|
||||
* install Python x86 version between 2.5 and 3.0 on windows. See [this issue](https://github.com/AngularClass/angular2-webpack-starter/issues/626)
|
||||
* How do I handle merge conflicts in yarn.lock?
|
||||
* first check out the yarn.lock file from the branch you're merging in to yours: e.g. `git checkout --theirs yarn.lock`
|
||||
* now run `yarn install` again. Yarn will create a new lockfile that contains both sets of changes.
|
||||
* then run `git add yarn.lock` to stage the lockfile for commit
|
||||
* and `git commit` to conclude the merge
|
||||
|
||||
|
||||
## License
|
||||
|
6577
npm-shrinkwrap.json
generated
6577
npm-shrinkwrap.json
generated
File diff suppressed because it is too large
Load Diff
59
package.json
59
package.json
@@ -9,7 +9,7 @@
|
||||
"scripts": {
|
||||
"clean:log": "rimraf *.log*",
|
||||
"clean:dist": "rimraf dist/*",
|
||||
"clean:node": "rimraf node_modules/*",
|
||||
"clean:node": "rimraf node_modules",
|
||||
"clean:ngc": "rimraf **/*.ngfactory.ts",
|
||||
"clean:json": "rimraf *.records.json",
|
||||
"clean:css": "rimraf src/**/*.css",
|
||||
@@ -18,52 +18,59 @@
|
||||
"clean:css:shim:ts": "rimraf src/**/*.css.shim.ts",
|
||||
"clean:scss:shim:ts": "rimraf src/**/*.scss.shim.ts",
|
||||
"clean:coverage": "rimraf coverage",
|
||||
"clean:prod": "npm run clean:ngc && npm run clean:json && npm run clean:css && npm run clean:css:ts && npm run clean:scss:ts && npm run clean:css:shim:ts && npm run clean:scss:shim:ts && npm run clean:dist",
|
||||
"clean": "npm run clean:log && npm run clean:prod && npm run clean:coverage && npm run clean:node",
|
||||
"clean:prod": "yarn run clean:ngc && yarn run clean:json && yarn run clean:css && yarn run clean:css:ts && yarn run clean:scss:ts && yarn run clean:css:shim:ts && yarn run clean:scss:shim:ts && yarn run clean:dist",
|
||||
"clean": "yarn run clean:log && yarn run clean:prod && yarn run clean:coverage && yarn run clean:node",
|
||||
"sass": "node-sass src -o src --include-path node_modules --output-style compressed -q",
|
||||
"postcss": "node node_modules/postcss-cli/bin/postcss -c postcss.config.json",
|
||||
"style": "npm run sass && npm run postcss",
|
||||
"style:watch": "nodemon -e scss -w src -x \"npm run style\"",
|
||||
"style": "yarn run sass && yarn run postcss",
|
||||
"style:watch": "nodemon -e scss -w src -x \"yarn run style\"",
|
||||
"rollup": "rollup -c rollup-server.js && rollup -c rollup-client.js",
|
||||
"prebuild": "npm run clean:dist && npm run style",
|
||||
"prebuild": "yarn run clean:dist && yarn run style",
|
||||
"build": "webpack --progress",
|
||||
"build:prod": "webpack --config webpack.prod.config.ts",
|
||||
"build:prod:rollup": "npm run build:prod && npm run rollup",
|
||||
"build:prod:ngc": "npm run clean:prod && npm run style && npm run ngc && npm run build:prod:rollup",
|
||||
"build:prod:ngc:json": "npm run clean:prod && npm run style && npm run ngc && npm run build:prod:json:rollup",
|
||||
"build:prod:rollup": "yarn run build:prod && yarn run rollup",
|
||||
"build:prod:ngc": "yarn run clean:prod && yarn run style && yarn run ngc && yarn run build:prod:rollup",
|
||||
"build:prod:ngc:json": "yarn run clean:prod && yarn run style && yarn run ngc && yarn run build:prod:json:rollup",
|
||||
"build:prod:json": "webpack --config webpack.prod.config.ts --json | webpack-bundle-size-analyzer",
|
||||
"build:prod:json:rollup": "npm run build:prod:json && npm run rollup",
|
||||
"build:prod:json:rollup": "yarn run build:prod:json && yarn run rollup",
|
||||
"ngc": "ngc -p tsconfig.aot.json",
|
||||
"prestart": "npm run build:prod:ngc:json",
|
||||
"prestart": "yarn run build:prod:ngc:json",
|
||||
"server": "node dist/server/build.js",
|
||||
"server:dev": "node dist/server/index.js",
|
||||
"server:dev:watch": "nodemon --debug dist/server/index.js",
|
||||
"start": "npm run server",
|
||||
"start:dev": "npm run clean:prod && npm run build && npm run server:dev",
|
||||
"watch": "webpack -w & npm run style:watch",
|
||||
"start": "yarn run server",
|
||||
"start:dev": "yarn run clean:prod && yarn run build && yarn run server:dev",
|
||||
"watch": "webpack -w & yarn run style:watch",
|
||||
"watch:dev:server": "concurrently \"yarn run server:dev:watch\" \"yarn run watch\"",
|
||||
"watch:dev": "yarn run clean:prod && yarn run build && yarn run watch:dev:server",
|
||||
"watch:prod:server": "concurrently \"yarn run server\" \"yarn run watch\"",
|
||||
"watch:prod": "yarn run build:prod:ngc:json && yarn run watch:prod:server",
|
||||
"predebug": "yarn run build",
|
||||
"start": "yarn run server",
|
||||
"start:dev": "yarn run clean:prod && yarn run build && yarn run server:dev",
|
||||
"watch": "webpack -w & yarn run style:watch",
|
||||
"watch:dev:server": "npm-run-all -p server:dev:watch watch",
|
||||
"watch:dev": "npm run clean:prod && npm run build && npm run watch:dev:server",
|
||||
"watch:dev": "yarn run clean:prod && yarn run build && yarn run watch:dev:server",
|
||||
"watch:prod:server": "npm-run-all -p server watch",
|
||||
"watch:prod": "npm run build:prod:ngc:json && npm run watch:prod:server",
|
||||
"predebug": "npm run build",
|
||||
"watch:prod": "yarn run build:prod:ngc:json && yarn run watch:prod:server",
|
||||
"predebug": "yarn run build",
|
||||
"debug": "node --debug-brk dist/server/index.js",
|
||||
"debug:server": "node-nightly --inspect --debug-brk dist/server/index.js",
|
||||
"debug:start": "npm run build && npm run debug:server",
|
||||
"debug:start": "yarn run build && yarn run debug:server",
|
||||
"debug:build": "node-nightly --inspect --debug-brk node_modules/webpack/bin/webpack.js",
|
||||
"debug:build:prod": "node-nightly --inspect --debug-brk node_modules/webpack/bin/webpack.js --config webpack.prod.config.ts",
|
||||
"docs": "typedoc --options typedoc.json ./src",
|
||||
"lint": "tslint \"src/**/*.ts\" || true",
|
||||
"global": "npm install -g angular-cli nodemon npm-check-updates rimraf ts-node typedoc typescript webpack webpack-bundle-size-analyzer rollup marked node-gyp",
|
||||
"ci": "npm run lint && npm run build:prod:ngc:json && npm run test && npm-run-all -p -r server e2e",
|
||||
"global": "npm install -g @angular/cli nodemon npm-check-updates rimraf ts-node typedoc typescript webpack webpack-bundle-size-analyzer rollup marked node-gyp",
|
||||
"ci": "yarn run lint && yarn run build:prod:ngc:json && yarn run test && npm-run-all -p -r server e2e",
|
||||
"protractor": "node node_modules/protractor/bin/protractor",
|
||||
"pree2e": "npm run webdriver:update",
|
||||
"e2e": "npm run protractor",
|
||||
"pree2e": "yarn run webdriver:update",
|
||||
"e2e": "yarn run protractor",
|
||||
"test": "karma start --single-run",
|
||||
"test:watch": "karma start --no-single-run --auto-watch",
|
||||
"coverage": "http-server -c-1 -o -p 9875 ./coverage",
|
||||
"webdriver:start": "node node_modules/protractor/bin/webdriver-manager start --seleniumPort 4444",
|
||||
"webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone",
|
||||
"rewrap": "npm run clean && npm install --no-optional && npm shrinkwrap --dev"
|
||||
"webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "2.2.3",
|
||||
@@ -90,7 +97,6 @@
|
||||
"angular2-platform-node": "2.1.0-rc.1",
|
||||
"angular2-universal": "2.1.0-rc.1",
|
||||
"angular2-universal-polyfills": "2.1.0-rc.1",
|
||||
"autoprefixer": "^6.5.4",
|
||||
"body-parser": "1.15.2",
|
||||
"bootstrap": "4.0.0-alpha.5",
|
||||
"cerialize": "^0.1.13",
|
||||
@@ -117,7 +123,8 @@
|
||||
"@types/express": "4.0.34",
|
||||
"@types/express-serve-static-core": "4.0.39",
|
||||
"@types/hammerjs": "2.0.33",
|
||||
"@types/jasmine": "^2.2.34",
|
||||
"@types/jasmine": "2.5.41",
|
||||
"@types/lodash": "ts2.0",
|
||||
"@types/memory-cache": "0.0.29",
|
||||
"@types/mime": "0.0.29",
|
||||
"@types/morgan": "1.7.32",
|
||||
|
Reference in New Issue
Block a user