# React Mobile Analytics
This is a mobile-first web app built on [React](https://facebook.github.io/react/) and [Node](https://nodejs.org/) to serve analytics data from OWS-Analytics to an authenticated user. It takes an isomorphic rendering approach so that the front end React code is first rendered on the server and passed over the wire as if serving static HTML, allowing the client-side version of the script to load and take over in a non-blocking, asynchronous fashion. A quick overview of this approach's advantages can be found [here](http://techblog.netflix.com/2015/08/making-netflixcom-faster.html).

## Requirements
* Node with NPM
* Babel

## Environment
Copy the `.env.shadow` file to `.env` and set your environment variables within.

## How it works
When setting up the application for the first time, all npm dependencies should be installed from `package.json` with the `npm install` command.

The `package.json` file also contains a `scripts` section which is used to deploy the app:

```javascript
  "scripts": {
    "start": "npm run watch-build & npm run watch-server",
    "watch-server": "./node_modules/.bin/nodemon -e js,json --watch server --exec './node_modules/.bin/babel-node' server",
    "watch-build": "./node_modules/.bin/nodemon -e js,json --watch components --watch sass --exec 'npm run' build",
    "build": "npm run style && npm run bundle",
    "test": "jest",
    "style": "./node_modules/.bin/node-sass ./sass/main.scss ./public/css/main.css",
    "bundle": "./node_modules/.bin/browserify modules/application.js -t babelify --outfile public/js/analytics.js"
  },


```
These run the various tasks for developing and deploying changes to the application and are run via npm. The steps are as follows:

#### Bundle the JS with `npm run bundle`
This command uses [Browserify](http://browserify.org/) to load external dependencies and concatenate the javascript files into a single file. It targets the `client/index.js` file that performs the initial React render command.

#### Compile the Sass with `npm run style`
.SCSS files must be converted to plain CSS for use in the browser. We use node-sass for this.

##### Run all of the above with `npm run build`
This will perform all three of these tasks.

#### Watch your files and server for changes with `npm start`
This will run the build and start the server each time a file is changed.

## Testing
Tests are written using the [Jest](https://facebook.github.io/jest/) testing framework that the React developers put together to make React unit testing painless and easy. Every JSX component should have a corresponding unit test in the `__tests__` folder. To run the tests, simply run `npm test`.

## Style Conventions
Since we use Babel for transforming our JSX files, we will be following [AirBnb's style guide](https://github.com/airbnb/javascript/tree/master/react) until we develop a custom one for the Orchard.

## Deploy

To run the project use Babel Node to run the server file with `babel-node server`. If Babel Node is not installed globally than you can use the executable in node_modules/.bin.  If running locally, your app will by default be available at [http://localhost:3000](http://localhost:3000) which the console will inform you of as well.

Now you can enjoy a deeper connection with your analytics from anywhere! A diner. An airport. A hospital even!

## Build with Docker
Boot2docker was used for this set up.

```
    $ boot2docker init
    $ boot2docker up
    $ boot2docker ip
```
* Copy the .env.shadow file to .env and populate the config variables.  New Relic can be left blank
  for local development.  Do not include quotes around the config variables.

* Set the REDIRECT_URI to the boot2docker ip and the your port in order for the app to redirect correctly.
  e.g. REDIRECT_URI: http://192.168.59.103:8080/_oauth/owsAuth

* Build your container
```
    $ docker build -t mobile-analytics .
```
* Build issues can be debugged by looking a docker logs or inspecting the container by id
```
    $ docker logs mobile-analytics
    $ docker inspect xxxxxx
```

* Deploy the app and run it by passing your environment variables and mapping to port 8080 (optional)
```
    $ docker run -d -p 8080:80 --name mobile-analytics --env-file=./.env mobile-analytics
```
* If all is successful, you should be able to see your mobile-analytics container
```
    $ docker ps
```
* Get into your container by specifying the container id
```
    $ docker exec -it xxxxxx bash
```
* Navigate to your app in the browser using the boot2docker ip and port, e.g. http://192.168.59.103:8080