Daily Archives: January 20, 2014

using livereload without the browser plugin

livereload is a little project that dramatically changes a front end developer’s life. it watches the filesystem for changes and will tell the browser to reload the page if it detects changes on the filesystem.

the idea by itself is pretty awesome. the actual implementation of this is a little weird as there appears to be a standalone app and a browser plugin that communicates with each other to detect the file changes and then trigger a browser reload.

but wait, there’s something even cooler! the livereload node module is an implementation of the livereload server in node.js. you can hook this into your node application and then you won’t need a separate app to monitor for file changes in your codebase. but still, there is some friction here because you still need that browser plugin so that the livereload server can trigger a browser reload.

but if you look at what the plugin does, all it does is inject some javascript on the page to call the livereload server, load up a javascript file, and initiate the websocket connection to listen for triggers. it turns out that you can simply add that script call to your page and then you won’t need the browser plugin at all.

it is technically documented but buried pretty deep in the knowledge base.

livereload is a separate server running in your app, so you just need to stick the code somewhere after your main server has been initiated, i put it at the buttom of my server.js file.

livereload accepts a parameter “exts” which tells it which file extensions to watch. you can add as many server.watch() paths as you want for directories to watch.

then you just need to add this snippet to the bottom of your page template to have the browser connect the livereload server with your app:

and voila, if you make an update to a file in your project, your browser will automatically reload for you.

using passport for facebook authentication

passport and passport-facebook offers very easy facebook authentication integration into your node app. for the most part, it’s very straightforward, but i got tripped up in a few places.

i’m using krakenjs for my express framework so you have to be a little mindful that some of the express setup stuff has been abstracted away from you. because of that, i was puzzled because i didn’t understand why i couldn’t get access to the passport user object once authenticated.

sessions
passport wants to uses sessions. make sure that you enable the express session middleware and make sure you use the middleware before trying to use passport. order matters here. additionally, if you are using cluster, you can’t use in-memory sessions, you’ll have to use something that is globally accessible by all node processes…something like redis can be used via connect-redis.

passport extends express’ req with the isAuthenticated() method
i initially thought that i had to implement and check whether or not the user is authenticated, but passport handles this for you.

you have to implement passport.serializeUser() and passport.deserializeUser()
passport.serializeUser() is the function that will serialize the user info into the session, typically the user ID. at this point, you have access to the Facebook profile object, so you have information like: facebook user ID, username, displayName, etc.

This function is run once at time of authentication to put the authenticated user into the session.

passport.deserializeUser() is the function that will take the user ID from the session then construct the full information of the user and then make this object available in req.user. this function is run on every request to construct the req.user object so make sure that this code is performant. documentation everywhere says that this is where you would query a database to get user information, but it seems like involving a caching layer here would be advised.