Update README for modernization

This commit is contained in:
Brett Sun 2016-06-10 16:13:52 +02:00
parent 6eeac85012
commit 8b4ff3ec8e
1 changed files with 15 additions and 49 deletions

View File

@ -9,17 +9,18 @@ The code is JavaScript 2015 / ECMAScript 6.
Getting started
===============
Install some nice extension for Chrom(e|ium):
Install some nice extensions for Chrom(e|ium):
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Alt Developer Tools](https://github.com/goatslacker/alt-devtool)
```bash
# Using node v5+, and if you aren't already, preferrably with nvm
git clone git@github.com:ascribe/onion.git
cd onion
cp .env_template .env
npm install
sudo npm install -g gulp
gulp serve
npm run start:dev
```
Additionally, to work on the white labeling functionality, you need to edit your `/etc/hosts` file and add:
@ -46,7 +47,7 @@ For this project, we're using:
* 4 Spaces
* ES6
* We don't use ES6's class declaration for React components because it does not support Mixins as well as Autobinding ([Blog post about it](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
* We don't use camel case for file naming but in everything Javascript related
* We don't use camel case for file naming but in everything else Javascript related
* We use `momentjs` instead of Javascript's `Date` object, as the native `Date` interface previously introduced bugs and we're including `momentjs` for other dependencies anyway
Make sure to check out the [style guide](https://github.com/ascribe/javascript).
@ -54,7 +55,7 @@ Make sure to check out the [style guide](https://github.com/ascribe/javascript).
Linting
-------
We use [ESLint](https://github.com/eslint/eslint) with our own [custom ruleset](.eslintrc).
We use [ESLint](https://github.com/eslint/eslint) with our own [custom config](https://www.npmjs.com/package/eslint-config-ascribe).
SCSS Code Conventions
@ -87,7 +88,7 @@ Example
**JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
**Github branch name:** `AD-1242-caching-solution-for-stores`
**Github branch name:** `AG-1242-caching-solution-for-stores`
Testing
@ -123,8 +124,7 @@ See the [helper docs](test/integration/README.md) for information on each part o
Workflow
========
Generally, when you're runing `gulp serve`, all tests are being run.
If you want to test exclusively (without having the obnoxious ES6Linter warnings), you can just run `gulp jest:watch`.
TODO
Troubleshooting
@ -132,54 +132,20 @@ Troubleshooting
Q: OMG nothing works
A: try `npm install`. Someone may have updated some dependencies
Q: ZOMG, I'm getting this error:
```
[09:58:56] 'sass:watch' errored after 6.68 ms
[09:58:56] Error: watch ENOSPC
at errnoException (fs.js:1031:11)
at FSWatcher.start (fs.js:1063:11)
at Object.fs.watch (fs.js:1088:11)
at Gaze._watchDir (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:289:30)
at /home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:358:10
at iterate (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:52:5)
at Object.forEachSeries (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:66:3)
at Gaze._initWatched (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:354:10)
at Gaze.add (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:177:8)
at new Gaze (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:74:10)
events.js:72
throw er; // Unhandled 'error' event
^
Error: watch ENOSPC
at errnoException (fs.js:1031:11)
at FSWatcher.start (fs.js:1063:11)
at Object.fs.watch (fs.js:1088:11)
at createFsWatchInstance (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at EventEmitter.NodeFsHandler._watchWithNodeFs (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at EventEmitter.NodeFsHandler._handleDir (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:403:23)
at EventEmitter.<anonymous> (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:450:19)
at EventEmitter.<anonymous> (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:455:16)
at Object.oncomplete (fs.js:108:15)
```
A: Use `npm dedupe` to remove duplicates in npm. This might fix that you're not [running out of watchers in your system (read the comments)](http://stackoverflow.com/a/17437601/1263876).
A: Try `npm install` and `npm dedupe`. Someone may have updated some dependencies.
Q: How can I use a local copy of SPOOL and Onion?
A: Easily by starting the your gulp process with the following command:
A: You should already be set up if you copied [.env_template](./.env_template) as `.env`, however, if you don't want to do this, you can also start your dev server with the following command:
```
ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
# Assuming your SPOOL instance is on localhost:8000, otherwise adjust accordingly
ONION_API_URL='http://localhost.com:8000/' ONION_SERVER_URL='http://localhost.com:8000' npm run start:dev
```
Or, by adding the local server url to your environment variables:
```
ONION_SERVER_URL='http://localhost.com:8000/'
```
If you are using `.env` and your local SPOOL instance is not running on the default `localhost:8000` set up, you should adjust `.env` accordingly.
Q: I want to know all dependencies that get bundled into the live build.
A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
A: `npm run build -- --json > stats.json` and upload `stats.json` to [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/)
Reading list