npm package: @ied/dashboard
Description: [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
Latest version: 1.0.0-beta.8

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).

# How to initialize a new project ?

#### 1. Clone this repository
```sh
git clone git@github.com:inextensodigital/react-boilerplate.git my-project
```

#### 2. Switch the remote to your new project repository
```sh
git remote remove origin
git remote add origin git@github.com:inextensodigital/my-project.git
```

#### 3. Create and protect dev and master branches

<img src="protect-branch.png" width="700" />

#### 4. Edit pusher.json config to match your project infos

```js
{
  "type": "front-end",
  "domain": "inextenso.io",
  "appName": "react-boilerplate",
  "env": ["fr", "dk"]
}
```

# Sentry

If you're using this boilerplate you just need to update the `config url` from **step 3**, if you want to add **Sentry** to your project follow this guide.

## How to ?

1. Add **Raven** to your project `index.html`, it's our client for sending reports to **Sentry**


```diff
+ <script src="https://cdn.ravenjs.com/3.18.1/console/raven.min.js" crossorigin="anonymous"></script>
```

2. Add **Raven** global to your `.eslintrc`

```diff
+ "globals": {
+   "Raven": true
+ }
```

3. Initialize **Raven** in your root `index.js` with the correct project url

```diff
+ if (process.env.NODE_ENV === 'production') {
+   const options = {
+     release: process.env.REACT_APP_RELEASE,
+     tags: {
+       'app.env': process.env.REACT_APP_ENV,
+       'app.release': process.env.REACT_APP_RELEASE,
+     },
+   }
+   Raven.config(
+     'https://e63b70eab09b41108708d8c6207c128d@sentry.io/226827',
+     options,
+   ).install()
+ }
```

4. Use `componentDidCatch` at the root component it will catch any error in the components tree

```diff
+ componentDidCatch = (error, info) => {
+   Raven.captureException(error, {
+     extra: info,
+   })
+   console.error(error, info)
+ }
```

### Redux

If you're using **Redux** on your project you can [add a middleware](https://blog.sentry.io/2016/08/24/redux-middleware-error-logging) to get more insight.

# Code styling

We follow the javascript rules published by [airbnb](https://github.com/airbnb/javascript) with some adjustments you can explore [here](https://github.com/inextensodigital/react-boilerplate/blob/master/.eslintrc#L15-L52).

# CI/CD

In order to have a good continuous integration we aim to follow [A successful Git branching model](http://nvie.com/posts/a-successful-git-branching-model/), by ***Vincent Driessen***.

**All branches on the upstream will be tested and deployed to an S3 bucket automatically** in order to provide a testable version of the work in progress at any time.

# Infrastructure

## S3

All versions of an application are deployed to the same AWS S3 bucket at different paths.

```
my-bucket/master/FR
my-bucket/master/DK
my-bucket/dev/FR
my-bucket/dev/DK
```
## Cloudfront

Cloudfront is responsible to expose the application to the web, each applications as its own distribution.

# Libraries

A non exhaustive list of libraries we love, and we have crash tested.

#### Client
- [redux](https://github.com/reactjs/redux/) Predictable state container for JavaScript apps
- [react-relay](https://github.com/facebook/relay): Relay is a JavaScript framework for building data-driven React applications
- [react-transition-group](https://github.com/reactjs/react-transition-group): An easy way to perform animations when a React component enters or leaves the DOM
- [react-router-dom](https://github.com/ReactTraining/react-router): Declarative routing for React
- [styled-components](https://github.com/styled-components/styled-components): Visual primitives for the component age 💅
- [material-components](https://material.io/components/web/catalog/): Modular and customizable Material Design UI components for the web
- [date-fns](https://github.com/date-fns/date-fns): Modern JavaScript date utility library
- [marked](https://github.com/chjj/marked): A markdown parser and compiler. Built for speed

#### Server
- [express](https://github.com/expressjs/express): Fast, unopinionated, minimalist web framework for node
- [graphql-tools](https://github.com/apollographql/graphql-tools): Build and mock your GraphQL.js schema using the schema language
#### Both
- [faker](https://github.com/marak/Faker.js/): Generate massive amounts of fake data in Node.js and the browser
- [query-string](https://github.com/sindresorhus/query-string): Parse and stringify URL query strings