Onion is the web client for ascribe

Go to file

ddejongh 6dd3e582df fineuploader + register		2015-06-23 13:55:05 +02:00
docs	git-submodule-workflow.md edited online with Bitbucket	2015-06-17 19:52:52 +00:00
fonts	separat fonts and images	2015-05-29 11:57:24 +02:00
img	code review	2015-06-16 10:02:55 +02:00
js	fineuploader + register	2015-06-23 13:55:05 +02:00
sass	fineuploader + register	2015-06-23 13:55:05 +02:00
.eslintignore	fineuploader + register	2015-06-23 13:55:05 +02:00
.eslintrc	add es6lint to build process and fix most (not really) errors and warnings	2015-06-05 11:06:36 +02:00
.gitignore	git removed s3-fineuploader	2015-06-23 10:27:19 +02:00
.gitmodules	Removed submodule react-s3	2015-06-23 10:16:53 +02:00
README.md	add another troubleshooting section	2015-06-12 10:14:34 +02:00
gulpfile.js	api settings complete	2015-06-22 17:33:25 +02:00
index.html	Merge remote-tracking branch 'remotes/origin/AD-479-piece-registration-in-new-fronten' into AD-416-account-settings-page-navbar	2015-06-19 14:05:56 +02:00
package.json	git removed s3-fineuploader	2015-06-23 10:27:19 +02:00
server.js	Fix empty X-CSRFToken bug	2015-06-16 19:28:21 +02:00

README.md

Introduction

Onion is the web client for Ascribe. The idea is to have a well documented, easy to test, easy to hack, JavaScript application.

The code is JavaScript ECMA 6.

Getting started

Install some nice extensions for Chrom(e|ium):

Allow-Control-Allow-Origin: we need this to open connection to external hosts (staging.ascribe.io in our case). Please note that there is an open issue that prevents the extension to save the changes in the "intercepted URL or URL pattern". You can follow this workaround to fix the problem.
React Developer Tools

git clone git@bitbucket.org:ascribe/onion.git
cd onion
npm install
gulp serve

Code Conventions

For this project, we're using:

4 Spaces
We use 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)
We don't use camel case for file naming but in everything Javascript related
We use let instead of var: SA Post

Testing

We're using Facebook's jest to do testing as it integrates nicely with react.js as well.

Tests are always created per directory by creating a __tests__ folder. To test a specific file, a <file_name>_tests.js file needs to be created.

Since we're using mixed syntax, test files are not linted using ES6Lint. This is due to the fact that jest's function mocking and ES6 module syntax are fundamentally incompatible.

Therefore, to require a module in your test file, you need to use CommonJS's require syntax. Except for this, all tests can be written in ES6 syntax.

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.

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).