Building my first NPM module

I've been a dev for a long time now, and NPM modules are pretty much the best thing ever. I mean, OK, people will complain about dependency hell, but it's just wonderful being able to easily share and take advantage of the code made by thousands of brilliant developers.

It took me a long time to even figure out how to use them, at first. I taught myself programming and, to be honest, at first even using script tags properly was pretty tough! So the idea of following that npm install thing was totally out of my league.

Once I got deep into frameworks, and then React, and more, npm modules became a daily part of my coding. I got incredibly good at finding ones that were more current, and started to learn my way around how documentation is typically written. There's so much variation that it's very easy to be lost when you start.

But this week, I finally graduated from using NPM modules to making them -- I've made my first! Despite being a fairly successful front-end dev, I always avoided it. So I'm going to walk you through how I did it and what I learned.

Putting the idea together

My new little company, Mapster, is all about making really cool maps (and other apps) online. One of the main things I wanted to do when starting the business was to look for people online having problems, and try to solve them. It gets a good name, and also tells you a bit about what real people are doing with the tech we use.

My great social media person (Alora) found a tweet linking to a StackOverflow post about rotation in Mapbox GL JS. The specifics aren't really important here, but essentially it had to do with some math and geographic transformation. I realized in reading the question that I definitely knew the answer -- a project I'd been working on that very day involved the same problem.

I explained the answer and then put together some code that I thought might help. The commenter came back soon enough, and asked if I might modify things into a module that he could use.

To be honest, at first I sighed -- great, more free work. But on the other hand, I know this was what I'd wanted to do: help people. And here was a chance to learn something at the same time. So I set out to actually try to build the damn thing in a "real" module that would be able to be imported.

Writing the code

At first, I just got some code working. I didn't try to put it into a module at all; I just wrote the code inline the same way I'd do it if it was just my own project. Once I'd figured that out, I started to search around for modules that were similar and copy them.

In my case, the module is actually part of another library, Mapbox GL Draw. This library allows special "modes", and there's been a few of them made. So I went and looked and tried to download and copy the code from the other ones. No dice.

My main problem is with build processes. I've never really fully understood how modules export, require, and actually build into different kinds of scripts -- it's always this opaque process that seems simple but baffling. Like most new things in web development!

So, since none of the processes worked, I tried to start from scratch. I got close, I think -- I managed to include the file using import statements in a little React app I created just to test that. But it didn't really work and had a bunch of new bugs where code references didn't work anymore.

At this point, I felt a little stupid. I realized I was being too stubborn, and turned to a little outside help.

Setting up the build

I set up a little question on Codementor, asking for help with NPM modules and the build process. It took a while to get a good response, so I searched around in my friends lists and asked my junior devs if any of them had built a module before.

I did end up getting a few good responses from Codementor, and one in particular that I meant to set up a session with. At last, though, one of my devs (Lee Mulvey) cracked the case and set up a really basic version for me. It was still a little broken, but it was importing other dependencies correctly and loading into the main script!

I can't tell you how excited I was to see it. I'm honestly still a little confused about exactly how it works, but I'll have him walk me through sometime. I spent a while going over things, smoothed out the bugs, and felt pretty damn proud of myself for getting everything together one way or another.

Setting up NPM and Github

Loading up the module into NPM itself was actually pretty easy, compared to building the damn thing. Having plenty of experience with Github made it a breeze. And just like that -- boom! I have my own module, and it looks damn good, too!

I built a little example page from the React app I'd made, but I felt like that was really just overkill. And it was ugly too. I have seen so many libraries that use Github pages, or a standardized documentation style, and I thought it would be fun to do that.

So I spent some time in some late night coding session getting Github pages set up, and in the process, hooked up a "browser" build of my module too! I must say, my ego is growing... gotta watch that. Pride comes before a fall, hah!

But now, the module's up. It looks good. I still have lots of things I need to do - add testing, improve the events, straighten out some bugs, and eventually make a pull request on the GL Draw library to submit my addition to them.

I can't wait until we find more problems people have, solve them, and make the solutions free. It feels great and it's cool to actually join the NPM module community now!