ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity
Onion is the web client for ascribe
1,150 Commits 115 Branches 0 Tags 13 MiB
JavaScript 83.7%
CSS 16.2%
HTML 0.1%
56cdcdb5c6
Go to file
Tim Daubenschütz 56cdcdb5c6 Merge branch 'AD-901-add-lint-for-scss' into AD-456-ikonotv-branded-page-for-registra
2015-09-01 13:30:04 +02:00
docs feature list for testing 2015-08-21 10:04:24 +02:00
fonts footer + social icons 2015-07-02 15:41:17 +02:00
img add fav icons 2015-07-14 12:19:31 +02:00
js Merge branch 'AD-901-add-lint-for-scss' into AD-456-ikonotv-branded-page-for-registra 2015-09-01 13:30:04 +02:00
sass Merge remote-tracking branch 'origin/master' into AD-901-add-lint-for-scss 2015-08-31 19:09:09 +02:00
.eslintignore fineuploader + register 2015-06-23 13:55:05 +02:00
.eslintrc replace es6-promise with Q 2015-07-24 13:44:28 +02:00
.gitignore bug fix remove from collection signal 2015-08-21 15:53:55 +02:00
.scss-lint.yml Lint scss 2015-08-31 19:04:47 +02:00
gulpfile.js disable browsersync ghostmode by default 2015-08-31 18:05:14 +02:00
index.html Add third party modules to handle tracking without polluting the code 2015-07-27 18:06:02 +02:00
package.json open localhost.com:3000 instead of localhost:3000 2015-08-31 17:55:27 +02:00
README.md Update readme with doc on how to install the linter 2015-08-31 19:13:09 +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 extension for Chrom(e|ium):

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

Additionally, to work on the white labeling functionality, you need to edit your /etc/hosts file and add:

127.0.0.1   localhost.com
127.0.0.1   cc.localhost.com
127.0.0.1   cyland.localhost.com
127.0.0.1   ikonotv.localhost.com
127.0.0.1   sluice.localhost.com

JavaScript 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

SCSS Code Conventions

Install lint-scss, check the editor integration docs to integrate the lint in your editor.

Some interesting links:

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

Q: How can I use a local copy of SPOOL and Onion? A: Easily by starting the your gulp process with the following command:

ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve

Q: I want to know all dependencies that get bundled into the live build. A: browserify -e js/app.js --list > webapp-dependencies.txt

Reading list

Start here

Moar stuff