There’s a Package for that

I’ve been working with JavaScript for a little over a year now, and I must say as a young developer I feel like I must have been born at just the right time. It’s comically easy to do just about anything you can imagine on the Node platform. Today I’d like to share a personal experience of how Node and particularly NPM and the vast number of community packages saved me an incredible amount of time and by proxy the company that I work for in money.

Here was the situation, you’ll forgive the lack of detail as the system I work on is quite proprietary. The system has custom pages where you can put your own html, js, css, etc.. and what have you. Except one problem. The interface was probably built in 2005, takes about 8 centuries to load, and rather than having some kind of folder system, uses SQL-Server TEXT columns to store your code…. Yuck. And once you’ve tasted the fruits of HMR like Webpack’s hot-reloading, all other tooling will taste like ash in the mouth.

So something needed to be done, and I’m love breaking things so naturally I spun up a fresh webpack project. Then I just broke my problem down into it’s most basic parts. I had code which needed to be copied over to some folder to be served, and then the html for the custom page needed to be loaded into the correct row of the correct table. Not as simple as I liked, but now I’ve got my goals for the script to run after the webpack build. Now at the risk of getting dependency crazy, here is what dug me out of my 13 year old development environment.

A young developer imports a package for use in his project, the poor fool forgot to read the package.json.

Enter Knex, CPX, and FS.

FS we are all familiar with, it’s Node’s file module for interacting with the disk. And in this case it’s going to grab our generated html file.

Knex, a fantastically versatile query builder, is going to take the contents of that file and push them to our database auto-magically.

CPX will actually watch the files for changes and can be scripted to copy them to theĀ appropriate folder(in this case via the network). CPX supports file globs(thank the Lord), so you just feed it an extension and you’re off to the races.

Now instead of having to navigate through some menu, copy the code from my editor into a form, then submit and refresh. All I have to do is hit refresh, and hot-loading takes care of the rest(side-note: I used this Webpack plugin to run my script after each build)

As I close, here are some comments about this setup. This is NOT a recommended way to develop, were it up to me I’d probably rip the system down and start from scratch with an express app or something. But that’s not the point I’m trying to make here. In developing, sometimes we don’t get to pick our environments, or even where we deploy our code. So it’s awesome that we have a great and active community that develops packages that are not only easy to use, but also make our lives a lot easier. And it always helps to think outside the box too.

Leave a Reply

Your email address will not be published. Required fields are marked *