Git Product home page Git Product logo

3ree's Introduction

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
  • 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 People

Contributors

bartekus avatar comigor avatar gordyd avatar loremipson avatar snobear avatar staticbuzz avatar vwong avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.