Skip to content
Snippets Groups Projects
Commit 48b4f13e authored by Lotte Hofstede's avatar Lotte Hofstede
Browse files

Merge branch 'master' into w2p-38248_PageNotFound-component

parents 26c2eae1 1c4e4c96
Branches
Tags
No related merge requests found
......@@ -5,6 +5,11 @@
/tsd_typings/
npm-debug.log
/config/environment.dev.js
/config/environment.prod.js
/coverage
/dist/
/coverage/
......
......@@ -32,6 +32,7 @@ Then go to [http://localhost:3000](http://localhost:3000) in your browser
* [Introduction to the technology](#introduction-to-the-technology)
* [Requirements](#requirements)
* [Installing](#installing)
* [Configuring](#configuring)
* [Running the app](#running-the-app)
* [Running in production mode](#running-in-production-mode)
* [Cleaning](#cleaning)
......@@ -57,6 +58,17 @@ If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-w
* `npm run global` to install the required global dependencies
* `npm install` to install the local dependencies
## Configuring
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`.
......@@ -131,6 +143,7 @@ and run:
## 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.
......@@ -153,41 +166,45 @@ See [the guide on the wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+-
## File Structure
```
dspace-angular
├── README.md * This document
├── app.json * Application manifest file
├── e2e * Folder for e2e test files
├── karma.conf.js * Unit Test configuration file
├── nodemon.json * Nodemon (https://nodemon.io/) configuration
├── 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
├── resources * Folder for static resources
│ ├── i18n * Folder for i18n translations
│ └── images * Folder for images
├── rollup-client.js * Rollup (http://rollupjs.org/) configuration for the client
├── rollup-server.js * Rollup (http://rollupjs.org/) configuration for the server
├── src * The source of the application
│ ├── app * The location of the app module, and root of the application shared by client and server
│ ├── backend * Folder containing a mock of the REST API, hosted by the express server
│ ├── 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
│ ├── 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
│ ├── server.aot.ts * The express (http://expressjs.com/) config and bootstrap file for the server, in production
│ ├── server.routes.ts * The routes file for the server
│ ├── server.ts * The express (http://expressjs.com/) config and bootstrap file for the server, during development
│ ├── styles * Folder containing global styles.
│ │ ├── main.scss * Global scss file
│ │ └── variables.scss * Global sass variables file
│ └── typings.d.ts * File that allows you to add custom typings for libraries without TypeScript support
├── tsconfig.aot.json * TypeScript config for production builds
├── tsconfig.json * TypeScript config for development build
├── tslint.json * TSLint (https://palantir.github.io/tslint/) configuration
├── 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
├── README.md * This document
├── app.json * Application manifest file
├── config * Folder for configuration files
│ └── environment.default.js * Default configuration files
├── 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
├── resources * Folder for static resources
│ ├── i18n * Folder for i18n translations
│ └── images * Folder for images
├── rollup-client.js * Rollup (http://rollupjs.org/) configuration for the client
├── rollup-server.js * Rollup (http://rollupjs.org/) configuration for the server
├── src * The source of the application
│ ├── app * The location of the app module, and root of the application shared by client and server
│ ├── backend * Folder containing a mock of the REST API, hosted by the express server
│ ├── 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
│ ├── 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
│ ├── server.aot.ts * The express (http://expressjs.com/) config and bootstrap file for the server, in production
│ ├── server.routes.ts * The routes file for the server
│ ├── server.ts * The express (http://expressjs.com/) config and bootstrap file for the server, during development
│ ├── styles * Folder containing global styles.
│ │ ├── main.scss * Global scss file
│ │ └── variables.scss * Global sass variables file
│ └── typings.d.ts * File that allows you to add custom typings for libraries without TypeScript support
├── tsconfig.aot.json * TypeScript config for production builds
├── tsconfig.json * TypeScript config for development build
├── tslint.json * TSLint (https://palantir.github.io/tslint/) configuration
├── 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
```
## 3rd Party Library Installation
......@@ -226,6 +243,13 @@ 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.
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`).
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`
## Frequently asked questions
* Why is my service, aka provider, is not injecting a parameter correctly?
* Please use `@Injectable()` for your service for typescript to correctly attach the metadata
......
module.exports = {
"production": false,
// The REST API Location.
"rest": {
// NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
"nameSpace": "/api",
"baseURL": "http://localhost:3000"
},
// Path and Port in use for this Angular2 UI
"ui": {
"nameSpace": "/",
"baseURL": "http://localhost:3000"
}
}
This diff is collapsed.
......@@ -21,7 +21,7 @@
"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",
"sass": "node-sass src -o src --include-path node_modules --output-style compressed -q",
"postcss": "node_modules/postcss-cli/bin/postcss -c postcss.config.json",
"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\"",
"rollup": "rollup -c rollup-server.js && rollup -c rollup-client.js",
......@@ -36,11 +36,12 @@
"ngc": "ngc -p tsconfig.aot.json",
"prestart": "npm run build:prod:ngc:json",
"server": "node dist/server/build.js",
"server:dev": "nodemon --debug dist/server/index.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",
"start:dev": "npm run clean:prod && npm run build && npm run server:dev",
"watch": "webpack -w & npm run style:watch",
"watch:dev:server": "concurrently \"npm run server:dev\" \"npm run watch\"",
"watch:dev:server": "concurrently \"npm run server:dev:watch\" \"npm run watch\"",
"watch:dev": "npm run clean:prod && npm run build && npm run watch:dev:server",
"watch:prod:server": "concurrently \"npm run server\" \"npm run watch\"",
"watch:prod": "npm run build:prod:ngc:json && npm run watch:prod:server",
......@@ -59,7 +60,8 @@
"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"
"webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone",
"rewrap": "npm run clean && npm install --no-optional && npm shrinkwrap --dev"
},
"dependencies": {
"@angular/common": "2.2.3",
......
......@@ -4,6 +4,8 @@
<main>
<p>{{ 'example.with.data' | translate:data }}</p>
<p>{{ example }}</p>
<h2 *ngIf="!env" style="color:green">development</h2>
<h2 *ngIf="env" style="color:red">production</h2>
<router-outlet></router-outlet>
</main>
</div>
......@@ -9,6 +9,7 @@ import { TranslateService } from "ng2-translate";
import { HostWindowState } from "./shared/host-window.reducer";
import { Store } from "@ngrx/store";
import { HostWindowResizeAction } from "./shared/host-window.actions";
import { GlobalConfig } from "../config";
@Component({
changeDetection: ChangeDetectionStrategy.Default,
......@@ -27,6 +28,12 @@ export class AppComponent implements OnDestroy, OnInit {
recipient: 'World'
};
env: string = GlobalConfig.production;
styles = {
color: 'red'
};
constructor(
private translate: TranslateService,
private store: Store<HostWindowState>
......
// Look in ./config folder for config
const path = require('path');
let configContext = require.context("../config", false, /js$/);
let EnvConfig : any = {};
let EnvConfigFile : string;
let DefaultConfig : any = {};
try {
DefaultConfig = configContext('./environment.default.js');
} catch (e) {
throw new Error(`Cannot find file "${path.resolve('config', './environment.default.js')}"`);
}
switch (process.env.NODE_ENV) {
case 'prod':
case 'production':
EnvConfigFile = './environment.prod.js';
break;
case 'dev':
case 'development':
default:
EnvConfigFile = './environment.dev.js';
}
try {
EnvConfig = configContext(EnvConfigFile);
} catch (e) {
EnvConfig = {};
}
const GlobalConfig = Object.assign(DefaultConfig, EnvConfig);
export {GlobalConfig}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment