## frontend-salessheets

### Setup

Make sure your NPM and Node versions are up to date.

```bash
cp .env.shadow .env # initialize environment configuration
nvm use
yarn install # installs all package.json dependencies
yarn start # starts dev server
```

### Development

#### Tasks

* `npm start` runs local development server at localhost:8080
* `npm test` to run the linter and unit tests
* `npm run lint` to run only the linter
* `npm run test:unit` to run only the unit tests
* `npm run watch` to run unit tests every time a change is saved
* `npm run bundle` bundles all application js into build/bundle.js

Note: to see all available tasks, run `npm run`.

#### Adding a new dependency

When adding a new node module dependency, for both dev and production, run `npm shrinkwrap --dev` to update `npm-shrinkwrap.json`.

By locking down versions, we can make sure that each branch installs exactly what it needs in both development and CI. It's a time saving replacement for `rm -rf node_modules && npm install`.


#### Internationalization

Support for Internationalization is done using [react-intl](https://github.com/yahoo/react-intl)
and you can find an example in [hello-world](/theorchard/docs/blob/master/boilerplates/react-webpack/src/components/example/hello-world.js).

Run the build to create the components and generate the list of strings:
```
$ npm run webpack
```

Prepare and export the strings to POEditor:
```
$ export POEDITOR_PROJECT_ID=<project_id>
$ export API_KEY=<api_key>
$ npm run i18n:export
```

Download the latest version of all the strings:
```
$ export POEDITOR_PROJECT_ID=<project_id>
$ export API_KEY=<api_key>
$ npm run i18n:import
```

All the above:
```
$ npm run i18n
```

To create the localized bundles (bundles that have both the right locale code)
and translation messages:

```
$ npm run build
```

If you wish to add support for a new locale, add in `/locale/` the following
folder structure: `<locale>/LC_MESSAGES/` and create in it a `messages.json` file.
 Note: the `<locale>` has to match the value in POEditor.

So if you wish to add French (`fr`), it will look like this:

```
$ cat react-webpack/locale/fr/LC_MESSAGES/message.json
{}
```