simple-react-server
An ExpressJS based React server made for hacking. Wired together with browserify, socket.io, and less CSS.
Also features:
- A basic Collection class with syncing from server to client
- Basic RPC message passing from client to server
Note:
- there is no persistence. The collections are kept only in memory, so will die with your app.
- this isn't intended as a production-ready server. It's just for quick hacks / prototypes.
To run the example
- clone this repo
npm install
make run-example
Basic wiring
This is a rather contrived example that wires together an 'app' that displays 'clocks' with an updating time pushed from the server. Clicking a button on the client will add a new clock to the list.
// index.jsvar path = ;var Server = Server; var collections = ;var rpcs = ; var server = collections: collections rpcs: rpcs // Anything placed in here will be served from / staticRoot: path // Anything in this folder will be available as css under /css/yourLessFileName.css lessRoot: path // The root class for the browserfy bundle clientAppPath: path;server; // Handle RPC requests + update models ;; var idCounter = 0;rpcsaddClock;
// shared/collections.js// Collection objects used to store models. // Collection events: 'created', 'updated', 'deleted'.// Collection methods: // add(id, item), update(id, item), remove(id)// item(id):Item, all():Item[], indexed():Object.<ID,Item>// on(CB.<EventName, ID, Item>)var Collection = Collection;moduleexports = clocks:
// shared/rpcs.js// RPC methods used to send messages from the client to the server. // Handle events on the server with:// require('../shared/rpcs').addClock.invoke(function (request) { ... });// Send events on the client with:// require('../shared/rpcs').addClock({ ...request... });var RPC = RPC;moduleexports = addClock:
// client/app.jsvar AppView = ;var Client = Client;var collections = ;var rpcs = ; var client = collections: collections rpcs: rpcs ;client;
// client/AppView.jsxvar collections = ;var React = ;var rpcs = ; Component { return <div>thispropsname: thispropstime</div> } Component { ; thisstate = clocks: ; } { collectionsclocks; collectionsclocks; collectionsclocks; } { this; } // Send an RPC message to the server { rpcs; } { thisstateclocks; } { return <div> <div ='clocks'>this</div> <button =>Add clock</button> </div> }; moduleexports = AppView;