Skip to main content

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.



Comments

Popular posts from this blog

Changing Password Requirements with SailsJS and Passport

Cross post from my employer's development blog:  http://rootinc.github.io/2016/03/16/pass-requirements-sails/ If you perform an installation of [Passport][passport] with [SailsJS][sails] using the [Sails Passport Auth Generator][sails-generate-auth] you get several files in your app already configured for you. If you then use passport-local, you will already have a complexity requirement on the password. It defaults to requiring 8 characters minimum, letters, numbers, and symbols. What if you want to change this requirement? In the generated model file `Passport.js`, you should see a line that says `provider   : { type: 'alphanumericdashed' },` and `password    : { type: 'string', minLength: 6 }`. The minLength is an easy and obvious change. What about the complexity requirement though? This stumped me for a bit. There doesn’t seem to be any mention of these keywords or providers on the Passport official site, nor anything in the [Passport-local repository][pass

Fancy FTP Deployment with Grunt

I recently dove into Grunt.js at work for automating our build process and I haven’t looked back. It’s an awesome tool with a plug-in for just about anything. I expected the usual would be there like JavaScript minification and concatenation, but I was surprised at a few others that I found, one being for FTP file deployment. Just shows how popular and community supported Grunt is. There are a few FTP plug-ins available for Grunt. I didn’t do an analysis of all of them but ran across grunt-ftp-push which seemed to do what I needed so I decided to try it out. A simple ftp-push setup to upload an entire project via FTP could look like this: grunt . initConfig ({ ftp_push : { all : { options : { host : 'example.com' , port : 21 , dest : '/project/path/' , username : 'user' , password : 'pass' }, expand : true , cwd : 'dist' , src : [ '**/*' ,

Atari E3 2004 PAL digital press kit

Making note of some old swag. The Atari E3 2004 PAL digital press kit. See video for details.