Proof of Concept - Connecting a Node app with Brackets

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:

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.

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:

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.

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.
</ol>
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.

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos.
If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.