Quick Deepstream.io Setup Using JSPM

Cross post from my employer's development blog: http://rootinc.github.io/2016/02/12/deepstream-jspm/

Want to use JSPM rather than Bower for running the Deepstream.io example? Follow these steps. This is basically a duplicate of the [Getting Started tutorial][tutorial] on the [Deepstream.io website][website] but using a really simple JSPM setup. This is a very crude guide where I list everything I had to do to get things running.

Create an empty project folder
npm install deepstream.io
Copy server code verbatim from the Getting Started guide
jspm install npm:deepstream.io-client-js
Hit enter for all the prompts from JSPM

We’re going to modify the client side code a little bit. We have native support for ES6 compiling with JSPM/Babel so we can import the Deepstream client directly:

import deepstream from 'deepstream.io-client-js';
let ds = deepstream( 'localhost:6020' ).login();

let record = ds.record.getRecord( 'someUser' );

let input = document.querySelector( 'input' );

input.onkeyup = function(){
   record.set( 'firstname', input.value );

record.subscribe( 'firstname', function( value ){
   input.value = value;

Save as index.js

Run `jspm bundle index.js index-bundle.js`

If you have an error about ‘yeast’ missing, run `jspm install npm:yeast`

For the HTML, we’re going to move all the JS into the body so that the `input` exists before we try to find it. Note JSPM requires a couple extra files, which should already be ready to go.


Run `node start.js` and open your index.html page in two browsers, you should now see the input’s staying in sync!

Again, this is a pretty crude “up and running” proof of concept. You’ll have to manually run JSPM’s `bundle` command for any client side changes. Ideally you’ll want a little more automated of an asset pipeline at some point.