HTML5 Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 254 posts at DZone. You can read more from them at their website. View Full User Profile

Proof of Concept - Connecting a Node app with Brackets

04.18.2013
| 3036 views |
  • submit to reddit

In one of the more recent Brackets sprints, Node.js was added to the core of Brackets. If you read my blog you know I've been playing a bit with Node.js lately. I've yet to deploy any "real" web site/app using Node, but I've built a few applications and demos as a way to help learn the platform. In a recent Twitter conversation the idea of using Node.js within an extension came up and I had a good idea I thought I'd try out.

A few months back I blogged about a Node.js project I created called MockData. The idea was to provide a fake datasource of JSON data for client-side testing. So if you needed to prototype an app that would generate a list of people, you would fire up the server and access the resource by passing in query parameters that 'shape' the result data. So for example:

http://localhost:3000/?num=rnd:10&author=name&age=age&gender=oneof:male:female&salary=num:150000

This returns:

I built the project, released it up on GitHub (https://github.com/cfjedimaster/mockdata) and didn't really think about it again until last week. The app I built is easy to use... if you know Node. But I bet that I could make it even easier by integrating it into Brackets itself.

There are a couple of useful links for this. The first being on the Bracket's wiki: Brackets Node Process: Overview for Developers. The second is a sample GitHub project: https://github.com/joelrbrandt/brackets-simple-node

I won't repeat the docs, but will encourage you to read them carefully. I'll be honest and say I don't think I grok them 100% quite yet, but I was able to get things working. The warning about abandoned Node processes is a serious one. In my testing I had to force quit Brackets a few times. That's probably something stupid I did. I'll also point out that you don't want to forget about restarting Node on every change to your Node.js code. As you go back and forth between extension code and pure Node.js code, you can forget this. Two things that hit me that are not in the guides were:

  1. For some reason, if I forgot to var scope a variable, I'd get errors. Typically this isn't a critical error. But for my Node.js stuff under Brackets, it was. So I had one non-var-scoped variable in my original Node.js demo that ran just fine as is, but not in Node.js under Brackets.
  2. If you console.dir from Node.js in Brackets, you just get an object Object string. Skip that and use console.log(JSON.stringify(foo)) instead.

So did it work? Heck yes! Here's the menu item I added...

Which then fires off the request and presents a nice dialog to the user:

At which point you can start playing with it in your JavaScript code. I'm considering adding a nice little icon so that you can click and copy the URL to your clipboard in case you forget. There's also the issue of documentation. I know how to massage the server to get what I want, but I should provide a quick reference guide.

Anyway... what do you think? You can download the bits below. If one person says this is cool I'll add it to GitHub.

Download attached file




Published at DZone with permission of Raymond Camden, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)