Skip to content
Frontend Services for the Nimble Platform.
TypeScript HTML CSS Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
kubernetes
src
.angulardoc.json
.dockerignore
.gitignore
CHANGELOG.md
Jenkinsfile
LICENSE
README.md
bs-config.json
deploy.sh
package.json
pom.xml
tsconfig.aot.json
tsconfig.json
tslint.json
webpack.config.js

README.md

Frontend Service

Frontend Services for the Nimble Platform.

Development

The complete frontend is developed with Angular in TypeScript.

With Node.js (aka. full development)

For development purposes it is advisable to set up Node.js on your machine since it delivers all possibly required functionality and provides way faster build cycles.

The following versions are used for deployment:

  • Node.js: 10.16.0
  • NPM: 6.9.0

In order to install all the dependencies execute

npm install

In order to build the resources execute

npm run build:dev

for the development build or

npm run build:production

for the production build

In order to start the webpack-dev-server (any file changes will be deployed on the fly during development) execute

npm run start

The port can be adapted in package.json (default is 9092).

Without Node.js (aka. basic development / debugging only)

In case you don't want / need to set up a full-stack Node.js on your machine you can execute

mvn clean install

in order to install all the dependencies using a minified Node.js version pulled by Maven.

You can mount the generated WAR file on your preferred server or directly on Tomcat using Maven

mvn tomcat7:run-war

The port can be adapted in pom.xml (default is 9092).

Deployment

Local / Non-cloud

In order to install all the dependencies and build the WAR file (see target/frontend-service.war) for local deployment execute

mvn clean install

You can mount the WAR file on your preferred server or directly on Tomcat using Maven

mvn tomcat7:run-war

The port can be adapted in pom.xml (default is 9092).

Docker / Cloud

In order to build the docker image execute

./deploy.sh docker-build

Alternative:

mvn clean install
docker build -t nimbleplatform/frontend-service ./target

In order to run the docker image execute

./deploy.sh docker-run

Alternative:

docker run -it --rm -p 9092:8080 --name nimble-core_frontend-service nimbleplatform/frontend-service

Environments

There are various environment files for different build configurations. By default src/app/globals.ts and src/global-styles.css are used.

In case you want to build using a different environment file (see src/environments/globals.[ENVIRONMENT].ts and src/environments/global-styles.[ENVIRONMENT].css) execute

mvn clean install -Denv=[ENVIRONMENT]

or

./deploy.sh docker-build [ENVIRONMENT]

Internationalization / Localization

For Internationalization @ngx-translate/core is used.

Import the TranslateService for every component that requires translations and declare it to the constructor, e.g.

import {TranslateService} from '@ngx-translate/core';
constructor(private translate: TranslateService){}

Also make sure that the AppCommonModule is imported in the corresponding module.

The translations themself have to be added to src/assets/[LANG].json

Translating text in HTML

In order to translate text in HTML files wrap the text inside a (or other HTML tag) and make sure it does not contain any Angular variable bindings, e.g. convert

Hello {{user}} - Welcome to the NIMBLE platform!

to

<span [innerHTML]="'Hello' | translate"></span> {{user}} - <span [innerHTML]="'Welcome to the NIMBLE platform!' | translate"></span>

Translating HTML properties

In order to translate HTML properties (e.g. titles, placeholders, ...) use the following annotation:

<span [title]="'Some title' | translate"></span>

Translating dynamic values

In order to translate dynamic values or anything coming from TypeScript files use the following annotation:

translate.get('Some text').subscribe((res: string) => {
    console.log(res);
});

The project leading to this application has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 723810.

You can’t perform that action at this time.