gordyd/3ree

An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express. A stack for building apps, front and back end, with just Javascript.

3REE

An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express. A stack for building apps, front and back end, with just Javascript.

This project was initially conceived to experiment with using these technologies in conjunction with one-another. I have written a blog that relates to this codebase.

This project is useful for:

• seeing how to build a Universal Javascript application
• understanding how to handle asyncronousity in Redux action creators
• seeing how you can use Socket.io with Redux
• building your own Redux powered application
• seeing how you can use System.import() with React Router + Webpack2 to acheive code splitting for different routes of your application
• forking so that you can build your own 3REE stack app!

Main Features

• Universal (Isomorphic) Javascript Application
• Use of Webpack 2's Code Splitting and Tree Shaking features
• Asyncronous Redux actions example
• Use of RethinkDB Changefeeds for realtime updates reflected in the UI

Demo

There is a demo app hosted at 3ree-demo.workshape.io. Check it out. If it is down, please email [email protected]

Setup

You will need to install RethinkDB. You can find instruction on how to do so here. Make sure you have the latest version installed.

• Clone the repo git clone [email protected]:GordyD/3ree.git
• Make sure you are using Node v6.0.0 (I recommend using n for Node version management)
• Run npm install
• If your local environment is not reflected by config/default.json, then add a file at config/local.json to provide local customisation.
• Run npm run db-setup to set up DB

Running Dev Server

On Linux/OSX: npm start

On Windows: npm run start:win

This will start the Webpack dev server - for serving the client, as well as the server-side API.

Go to http://localhost:3001 in two separate tabs - see changes propagate in real time (Hot Module Replacement works too).

Running Production Server

You will need to roll out your own deployment script for a server, but before you can ship you will need to:

• Build the client with npm run build:prod
• Ensure all production npm modules are installed on the server. e.g. npm install --prod
• Rsync your application to your server
• Set up nginx or your web server of choice to map HTTP requests for your URL to http://localhost:3000
• Run npm run start:prod to run on your server
• Go to your URL

NOTE: Production has not been tested on Windows.

Tech Used

Tech	Description
React	View layer
React Router	Universal routing
Redux	State management
RethinkDB	Persistance layer
Express	Node.js server framework
Socket.io	Used for realtime communication between clients and server
Webpack	Module bundling + build for client
Superagent	Universal http requests
Stylus	Expressive, dynamic, robust CSS

3ree's Issues

missind build step in setup?

Hi,

I was following the setup instruction and I got an 404 error (missing bundle.js) after running npm run start.
I checked package.json and noticed the build script.
After building the project I ran npm run start once more and it worked fine.

Upgrade React to v0.14

I'm noticing some warnings and deprecation notices.

Hot reloading

Hi there,

Is there a trick to get the hot loading to work? I'm getting the hang of this more, but I'm still new to a webpack workflow. I see you have the plugin and the loader should be working, but as I make changes in the app, I'm having to manually rebuild with the webpack command.

I'm not really sure how server.webpack.js is being utilized either, so I get the feeling that I'm missing something.

Thanks

Webpack Failing to Resolve

getting an error resolving modules on install, any ideas?

n - 0.12.7

NOT an Issue - More a Question - Account Integration

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?

Fail to add event

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?

Required prop `location`

good, sorry for my English.

Much to react and did not encounter this error.

Everything works, but I always get the error. Warning: Failed propType: Required prop locationwas not specified inRoutingContext. Check the render method of ReduxRouterContext``

Is Jade Necessary?

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!

Add Unit Tests

In order to demonstrate testability of the the 3REE stack, plus validate the functional behaviour unit tests need to be introduced.

Move to react-router-redux

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.

Can't Install on Ubuntu 16.04.1

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.

Having a grandparent directory named 'src' causes bug

When using the docker standard image for node, projects are put into /usr/src/app. This means that the second babel module (not sure what it is for, actually) covers all of the 3ree directory. This caused me errors typical of forgetting to exclude /node_modules/. In my case it seems to be fine to just add /node_modules/ exclusion to the second module, as below. Since i'm still pretty fuzzy on how this whole stack works(thanks for helping me learn), maybe this isn't a good solution overall, but one way or another the name of the directory grandparents probably shouldn't break it.

The fix for me in webpack.config.js:

  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.js$/,
      loaders: ['babel'],
      exclude: /node_modules/,
      include: path.join(__dirname, '..', '..', 'src')
    }, {
      test: /\.css?$/,
      loaders: ['style', 'raw'],
      include: __dirname
    }]
  }

Why not add PostCSS and Autoprefixer?

https://github.com/postcss/postcss
https://github.com/postcss/autoprefixer
and css-modules too https://github.com/css-modules/css-modules

Example app doesn't respond to socket events.

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

Any plans to add auth?

Does anyone have any good resources on an auth example, the only one I know that exists is really messy.

Misc

Hi @GordyD ! I loved your blog post on the the post on the the 3REE Stack:

I'm just in the process of installing your stack on a Vagrant VirtualBox, and noted the following:

• I get a lot of errors and warnings when running npm install. Some of the dependencies seem to be deprecated etc.
• For convenience, perhaps consider making a Vagrant provision / box?

Keep up the good work!

Warning: React attempted to reuse markup in a container but the checksum was invalid

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

initialState is not defined in Realtime.js

I've opened two browsers, Firefox and Chromium. When I add a new pulse in one window the other window throws a ReferenceError since initialState is not defined in Realtime.js.

So it seems like it can't sync between users at this time?

Error on npm start

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)

rethinkdb not installed as global

There should be a section in the Readme file for setting up rethinkdb.

 - Clone the repo `git clone [email protected]:GordyD/3ree.git`
 - Run `npm install`
 - Install rethinkdb `brew update && brew install rethinkdb`
 - If your local environment is not reflected by `config/default.json`, then add a file at `config/local.json` to provide local customisation.
 - Run rethinkdb on a different terminal window `rethinkdb`
 - Run `npm run db-setup` to set up DB

not updating between multiple browsers

To recreate:

• open session in firefox
• add "x1"
• open session in chrome (this will display "x1")
• add "x2"
• switch back to firefox, which does not display "x2"

To get firefox to display "x2" a refresh is required.

These steps can be repeated, the problem persists (ie, not browser specific).

PS. Thank you for the tutorial and the repository. Much appreciated!

Upgrade to Babel 6

Babel 5 is no longer being maintained. Upgrade to Babel 6.

Add ESlint

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.

Error on npm start

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!

Unhandled rejection TypeError when loading page

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

Sorry there is no Error

Sorry there is no Error

Slow loading on demo app

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?

Error running project on Windows

I have cloned this project, and followed the steps accordingly, I have installed rethinkdb on my windows machine. I am using node v6.2.0.

However when i run npm run start, and go to localhost:3001, i keep getting a 502 Bad Gateway error.
im not sure why that it. Any suggestions?