README.md 1.81 KB
Newer Older
Colin PUY's avatar
Colin PUY committed
1 2 3
# Front end
## Prerequisites

4
- Install node.js and yarn
Colin PUY's avatar
Colin PUY committed
5 6 7 8

- Install the local npm packages:

```shell
9
$ yarn install
Colin PUY's avatar
Colin PUY committed
10 11 12 13 14 15 16 17 18 19 20
```

- Install selenium and the chrome driver

```shell
$ ./node_modules/protractor/bin/webdriver-manager update
```

## Dev

```shell
21
$ yarn start
Colin PUY's avatar
Colin PUY committed
22
```
23
This starts a server on port 3000 which allows serving the development page (index.html)
Colin PUY's avatar
Colin PUY committed
24

julien-reboul's avatar
julien-reboul committed
25 26 27 28 29 30 31 32 33 34 35 36 37
## Format code

During build, a gulp task based on [JSCS](http://jscs.info/) is used to check the code is formatted properly.
It is based on the [BonitaBPM jscs preset](https://github.com/bonitasoft/jscs-preset-bonita).

Use the gulp task to format code :

```shell
$gulp jscs jscs:test
```

Fix code format issues by hand if the format error report shows any error.

Colin PUY's avatar
Colin PUY committed
38 39 40
## Build

```shell
41
$ yarn run build
Colin PUY's avatar
Colin PUY committed
42 43 44 45 46 47 48 49 50 51 52 53 54 55
```

## Start built files

```shell
$ gulp [default] serve:dist
```

This will serve the production page (build/dist/index.html), where the less files are compiled to css and all the source JS files are compiled to a single
minified file.

## Execute e2e tests

```shell
56
$ yarn run e2e
Colin PUY's avatar
Colin PUY committed
57 58 59 60 61 62 63 64 65 66 67 68 69 70
```
This generates the CSS, JS and html files, starts a selenium server on port 12001, executes the e2e tests, then
stops the server.

You can also start the app in e2e mode without launching e2e tests (if you want to launch e2e tests from your IDE)
```shell
$ gulp serve:e2e
```

## Execute unit-tests

### Single run

```shell
71
$ yarn test
Colin PUY's avatar
Colin PUY committed
72 73 74 75 76
```

### Watch source files and tests

```shell
77
$ yarn run test-watch
Colin PUY's avatar
Colin PUY committed
78 79 80 81 82 83 84
```

## Internationalization

Translatable text are extracted from sources during the build process. We use gettext technology which result in a .pot file. From that we can create a PO file for each supported language using a translation tool (e.g. Crowdin). 

At runtime the backend transform those PO files into [angular-gettext](https://angular-gettext.rocketeer.be/) friendly JSON files.