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.
JavaScript CSS HTML
Latest commit 1434ad4 Sep 6, 2016 @vwong vwong committed with Build better production bundles (#51)
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
Permalink
Failed to load latest commit information.
client Version bump of dependencies plus setting engine expectation of node … May 12, 2016
config Add a production config file Feb 21, 2016
images Serve a favicon Dec 7, 2015
server added wrapper div to make server/client checksum match (#50) Jul 1, 2016
style Stylus integration and usage! Feb 22, 2016
test Version bump of dependencies plus setting engine expectation of node … May 12, 2016
universal Remove unhelpful console.log from server side store configuration module May 23, 2016
.babelrc Create example tests for async action creators and then reducers too Jan 24, 2016
.eslintrc Add Eslint rule for semi colons and then correct errors Jan 24, 2016
.gitignore Add new rules to gitignore Feb 9, 2016
LICENSE.txt Add MIT license Sep 2, 2016
README.md Added start:win npm script command to support Windows development env… Jun 9, 2016
circle.yml Version bump of dependencies plus setting engine expectation of node … May 12, 2016
dbSetup.babel.js Correct babel register require statements Jan 23, 2016
dbSetup.js Version bump of dependencies plus setting engine expectation of node … May 12, 2016
karma.conf.js Add eslint, update babel config, fix issue with Object.assign and add… Jan 23, 2016
package.json Build better production bundles (#51) Sep 6, 2016
server.babel.js Add eslint, update babel config, fix issue with Object.assign and add… Jan 23, 2016
server.js Build better production bundles (#51) Sep 6, 2016
server.webpack.js Stylus integration and usage! Feb 22, 2016
start-dev.js Added start:win npm script command to support Windows development env… Jun 9, 2016
tests.webpack.js Add eslint, update babel config, fix issue with Object.assign and add… Jan 23, 2016
webpack.config.js Build better production bundles (#51) Sep 6, 2016

README.md

3REE

Circle CI

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.

Screenshot

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
  • forking so that you can build your own 3REE stack app!

Main Features

  • Universal (Isomorphic) Javascript
  • 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 me at gordon@workshape.io

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 git@github.com: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 Version
React View layer 15.0.2
React Router Universal routing 2.4.0
Redux State management 3.5.0
RethinkDB Persistance layer 2.3.1
Express Node.js server framework 4.13.0
Socket.io Used for realtime communication between clients and server 1.4.0
Webpack Module bundling + build for client 1.13.0
Superagent Universal http requests 1.8.0
Stylus Expressive, dynamic, robust CSS 0.54.0