From 8b4ff3ec8ed4ce0f12cc4e7786f9d649c0f2ac2a Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Fri, 10 Jun 2016 16:13:52 +0200 Subject: [PATCH] Update README for modernization --- README.md | 64 +++++++++++++------------------------------------------ 1 file changed, 15 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index b9a7e2b5..f22393dc 100644 --- a/README.md +++ b/README.md @@ -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 ` -**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. (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:450:19) - at EventEmitter. (/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