An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express.

Hi- I'm trying to get started with 3ree but I can't get it to run at all. When I run npm start on this project and then load localhost:3000 in a browser, the page never loads and I see this in the console output:

"C:\Program Files (x86)\JetBrains\WebStorm 2016.1\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run-script start

[email protected] start D:\repo\3ree set NODE_ENV=development & node server.babel.js & node server.webpack.js

WARNING: NODE_ENV value of 'development ' did not match any deployment config file names. WARNING: See https://github.com/lorenwest/node-config/wiki/Strict-Mode Setting up listener... Listening for changes... [x] Request for / Server router! [x] Request for /bundle.js Server router! Warning: Failed propType: Required prop router was not specified in RouterContext. Warning: Failed propType: Required prop location was not specified in RouterContext. Warning: Failed propType: Required prop routes was not specified in RouterContext. Warning: Failed propType: Required prop params was not specified in RouterContext. Warning: Failed propType: Required prop components was not specified in RouterContext. Warning: [react-router] <RouterContext> expects a router rather than a history Unhandled rejection TypeError: Cannot read property 'listenBeforeLeavingRoute' of undefined at getChildContext (D:\repo\3ree\node_modules\react-router\lib\RouterContext.js:80:35) at ReactCompositeComponentMixin._processChildContext (D:\repo\3ree\node_modules\react\lib\ReactCompositeComponent.js:413:53) at ReactCompositeComponentMixin.performInitialMount (D:\repo\3ree\node_modules\react\lib\ReactCompositeComponent.js:297:127) at ReactCompositeComponentMixin.mountComponent (D:\repo\3ree\node_modules\react\lib\ReactCompositeComponent.js:222:21) at wrapper as mountComponent at Object.ReactReconciler.mountComponent (D:\repo\3ree\node_modules\react\lib\ReactReconciler.js:39:35) at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\repo\3ree\node_modules\react\lib\ReactMultiChild.js:203:44) at ReactDOMComponent.Mixin._createContentMarkup (D:\repo\3ree\node_modules\react\lib\ReactDOMComponent.js:593:32) at ReactDOMComponent.Mixin.mountComponent (D:\repo\3ree\node_modules\react\lib\ReactDOMComponent.js:478:29) at ReactDOMComponent.wrapper as mountComponent at Object.ReactReconciler.mountComponent (D:\repo\3ree\node_modules\react\lib\ReactReconciler.js:39:35) at ReactCompositeComponentMixin.performInitialMount (D:\repo\3ree\node_modules\react\lib\ReactCompositeComponent.js:297:34) at ReactCompositeComponentMixin.mountComponent (D:\repo\3ree\node_modules\react\lib\ReactCompositeComponent.js:222:21) at wrapper as mountComponent at D:\repo\3ree\node_modules\react\lib\ReactServerRendering.js:38:38 at ReactServerRenderingTransaction.Mixin.perform (D:\repo\3ree\node_modules\react\lib\Transaction.js:136:20)

Also npm test fails to run- it generates this output because Windows refuses to run the karma executable (although this may be a stupid mistake I'm making):

.\node_modules\karma\bin\karma start

'.\node_modules\karma\bin\karma' is not recognized as an internal or external command, operable program or batch file.

npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run-script" "test" npm ERR! node v6.2.0 npm ERR! npm v3.8.9 npm ERR! code ELIFECYCLE npm ERR! [email protected] test: .\node_modules\karma\bin\karma start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] test script '.\node_modules\karma\bin\karma start'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the 3ree package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! .\node_modules\karma\bin\karma start npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs 3ree npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls 3ree npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! D:\repo\3ree\npm-debug.log

Hello, with that latest bits with react-router-redux, I do see an error that is repeated in the console. The app still seems to run though, so not sure what is happening here:

Warning: Failed propType: Required prop router was not specified in RouterContext. Warning: Failed propType: Required prop location was not specified in RouterContext. Warning: Failed propType: Required prop routes was not specified in RouterContext. Warning: Failed propType: Required prop params was not specified in RouterContext. Warning: Failed propType: Required prop components was not specified in RouterContext. Warning: [react-router] <RouterContext> expects a router rather than a history Unhandled rejection TypeError: Cannot read property 'listenBeforeLeavingRoute' of undefined at [object Object].getChildContext (/Users/Troy/Documents/Projects/3ree-master/node_modules/react-router/lib/RouterContext.js:75:35) at [object Object].ReactCompositeComponentMixin._processChildContext (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactCompositeComponent.js:326:53) at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactCompositeComponent.js:225:100) at [object Object].wrapper as mountComponent at Object.ReactReconciler.mountComponent (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactReconciler.js:37:35) at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactMultiChild.js:241:44) at ReactDOMComponent.Mixin._createContentMarkup (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactDOMComponent.js:591:32) at ReactDOMComponent.Mixin.mountComponent (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactDOMComponent.js:479:29) at Object.ReactReconciler.mountComponent (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactReconciler.js:37:35) at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactCompositeComponent.js:225:34) at [object Object].wrapper as mountComponent at /Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactServerRendering.js:42:38 at ReactServerRenderingTransaction.Mixin.perform (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/Transaction.js:136:20) at Object.renderToString (/Users/Troy/Documents/Projects/3ree-master/node_modules/react/lib/ReactServerRendering.js:40:24) at app.js:38:35 at /Users/Troy/Documents/Projects/3ree-master/node_modules/react-router/lib/match.js:65:5 From previous event: at handleRender (app.js:16:4) at Layer.handle as handle_request at next (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/route.js:131:13) at Route.dispatch (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/route.js:112:3) at Layer.handle as handle_request at /Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:277:22 at param (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:349:14) at param (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:365:14) at Function.process_params (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:410:3) at next (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:271:10) at jsonParser (/Users/Troy/Documents/Projects/3ree-master/node_modules/body-parser/lib/types/json.js:100:40) at Layer.handle as handle_request at trim_prefix (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:312:13) at /Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:280:7 at Function.process_params (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:330:12) at next (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:271:10) at urlencodedParser (/Users/Troy/Documents/Projects/3ree-master/node_modules/body-parser/lib/types/urlencoded.js:88:40) at Layer.handle as handle_request at trim_prefix (/Users/Troy/Documents/Projects/3ree-master/node_modules/express/lib/router/index.js:312:13)

Thanks for putting this starter app together for this killer stack. I see that redux-router's page recommends using react-router-redux for a more stable redux router. Any plans to convert this 3ree app to use that?

I started working on it myself, but was stuck on the routing wire-up on the server side. Some suggestions here.

It seems that the example app only responds to the result of HTTP requests, and not socket events.

With two browser windows open to the app, changes aren't reflected in both until a refresh...

Added/configured:

• production build of React
• strip non-english locales for moment.js
• uglify
• gzip

The result is:

• bundle.js went from 2.3MB to 163kB gzip'ed
• style.css went from 36KB to to 5.3kB gzip'ed

It might be a good idea to add ESlint and EditorConfig to help with consistency.

I've recently started using standardjs but it's probably a preference thing based on your code style.

Don't get me wrong. I love Jade (and HAML and Slim), but you'll only even be using it for the entry point on the server so it'll never be larger than this: https://github.com/GordyD/3ree/blob/master/server/views/index.jade

It's not really part of this stack and seems unnecessary to include it just for this one view. Besides you're using JSX (HTML) on the react side, so now you've got multiple syntax for rendering.

Just an opinion though!

I get the following error message when adding an event.

Warning: Failed propType: Invalid prop error of type object supplied to AsyncBar, expected string. Check the render method of PulseApp.

I can EDIT and DELETE events fine. And if I reload after the error message then the event is added to the list and database.

Any help?

Keep getting an error with Bluebird on npm start and not sure why.

/Users/dan/js/3ree/node_modules/bluebird/js/main/async.js:43
        fn = function () { throw arg; };
                           ^

TypeError: Cannot read property 'each' of undefined
    at /Users/dan/Stringify/3ree/server/api/service/event.js:16:13
    at tryCatcher (/Users/dan/Stringify/3ree/node_modules/bluebird/js/main/util.js:26:23)
    at Promise.errorAdapter (/Users/dan/Stringify/3ree/node_modules/bluebird/js/main/nodeify.js:36:34)
    at Promise._settlePromiseAt (/Users/dan/Stringify/3ree/node_modules/bluebird/js/main/promise.js:579:21)
    at Promise._settlePromises (/Users/dan/Stringify/3ree/node_modules/bluebird/js/main/promise.js:697:14)
    at Async._drainQueue (/Users/dan/Stringify/3ree/node_modules/bluebird/js/main/async.js:123:16)
    at Async._drainQueues (/Users/dan/Stringify/3ree/node_modules/bluebird/js/main/async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/dan/Stringify/3ree/node_modules/bluebird/js/main/async.js:15:14)
    at processImmediate [as _immediateCallback] (timers.js:371:17)

Also in the server directory the rethinkdb ip address is set to a 192* address and not localhost (might be better to set this as localhost)

Anyways, nice work. Was thinking of using this very same stack for a new project!

Totally new to this stack so forgive me if this is off base. I get this warning in dev console when loading the demo: Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting... and so on. I did some research and found that if you wrap the <% {html} %> template in /server/views/index.ejs in an extra div, the issue goes away. The solution that gets rid of the warning for me looks like this:

<div id="app"><div><%- html %></div></div>

Awesome stack btw! Great work :)

The content takes a long time to become formatted on the pulse app demo at http://3ree-demo.workshape.io/. Is this because you're hosting it somewhere with a small amount of server "juice" or because I'm seeing the "normal" transition from the server rendered code to the browser rendered code? If the latter, is there a way to have the server code formatted to match the client code so that the user doesn't notice the delay?

Please be aware that this pull request was automatically created using gtf

You should be able to merge this with no other problems. In case the proposed changes do not make sense, I would be glad to hear about it.

My npm install always returns with an error and all the workarounds I found haven't worked.

Clone Log:

sudo git clone https://github.com/GordyD/3ree.git
Cloning into '3ree'...
remote: Counting objects: 603, done.
remote: Total 603 (delta 0), reused 0 (delta 0), pack-reused 603
Receiving objects: 100% (603/603), 120.38 KiB | 0 bytes/s, done.
Resolving deltas: 100% (287/287), done.
Checking connectivity... done.

Install Log:

sudo npm install
npm WARN deprecated [email protected]: use uuid module instead
npm WARN deprecated [email protected]: Babel's CLI commands have been moved from the babel package to the babel-cli package
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

> [email protected] install /var/nodejs/3ree/node_modules/phantomjs-prebuilt
> node install.js

sh: 1: node: not found
[email protected] /var/nodejs/3ree

.....tree....

pm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.
npm ERR! Linux 4.4.0-31-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] install: `node install.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the phantomjs-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs phantomjs-prebuilt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls phantomjs-prebuilt
npm ERR! There is likely additional logging output above.

Hi @GordyD, this is a create repo and had a question, since you simulate users, have you thought about integrating real user auth as JWT tokens so that a user can come back and see their stuff vs. other people's stuff?