Plugging Angular Seed Project into MEAN Boilerplate

So, I've got a little app and I want to start using REST methods for persistence. At this point, the app is just Angular with no backend, using localStorage like a database. Eventually, I'll be getting into Node, Express, and MongoDB, so why not use the MEAN boilerplate to whip up the backend? Just a little tinkering to get the services I need up and then I'll be free to start experimenting with $http and $resource.

I pulled down the boilerplate (instructions here) and moved my files to the corresponding directories. Some of the files didn't match up exactly, so I copied the code the corresponding boilerplate files. After shuffling a few things around and changing commenting out a few unneeded lines, I expected to be up and running.

No Grunting

I'd used grunt to run the MEAN apps I'd played with before, so I tried it again.

grunt

Grunt does all sorts of cool things like linting the app, running test suites, and monitoring for file changes. This last thing is super cool because, as we'll discover when we start working with Node and Express, changes to basically anything other than templates requires restarting the server. Grunt watches for these and restarts automatically - even triggering a browser refresh - so we don't have to.

Anyway, so when I reflexively started the server with grunt, I got a whole bunch of errors from tests, JSLint, and frankly a lot of shit I didn't even look at. I figured it would still work, I'd just have to go back and clean up a few things. Unfortunately, that was not the case.

I couldn't get anything to serve up in the browser. (Yes, I did note that the Angular JS seed serves on port 8000 and MEAN uses 3000). In order to get anything to the browser, I had to skip grunt and run the server manually.

node ./server.js

So Many Errors

The browser console (I shouldn't have to specify, but "the browser" is always Chrome) had a ton of errors, some more cryptic than others. I figured out that I could glean from the callstack or url where the error was emanating from or what it was looking for. Eventually I was able to track everything down and - keep in mind, my objective is just to get a backend up - comment a bunch of crap out. It's ugly, but it's a throw-away. Stop judging me.

Why Aren't You Updating?!

A lot of the resources I didn't care about anymore were specified in the node view in /app/views/includes/foot.html. (I thought these were Jade templates the last time I used this.) For some reason, most definitely user error, no matter what I changed or how often I cleared the browser's cache, the changes didn't show up. Honestly, I don't remember what I did to fix it and I may have the series of events backwards. Now that I write it, I think initially grunt may have worked despite the errors and it was caching the pages. Either way, I ended up starting the server as described above and restarting it after every change (ctrl + c x 2 to stop server). It was ugly and painful, but eventually I started to see my first app shining through.

Easy Street DETOUR

The final step of my plan was to delete the .git directory inside my initial app, which was lost somewhere amongst the MEAN files, reinitialize the repo, git add ., add a commit message, and check it in. That went well until the last part.

Apparently, Git's a little smarter and more cautious than I am when I only have 3 minutes left for lunch. It rightly told me that everything was all fucked up - I could be off with the wording - and it was not safe for me to just check everything in (see non-fast-forward errors). Since I don't have anyone else on my team and I was feeling particularly rushed, I forced git to accept it, consequences be damned.

git push -u origin master --force

This was dirty and careless, but I got everything back into my remote branch before lunch ended, so I considered it a success. A just remembered, there were a few hiccups while shuffling my files around that I omitted. This was probably due to having multiple directories named "notes". It came in handy to reject all the changes I'd made, several unintentionally, so I could start over. The useful command for that is:

git checkout -f

This is basically a big "undo" for all uncommitted changes in the current branch. Again, very heavy-handed, but I'm not focused on the minutia of git right now.

tl;dr

The lesson is, don't try to merge an existing project into the MEAN boilerplate in the last half of your lunch break. If your directives and services and whatnot are portable (they should be), just move those and recreate the views. Also, don't try to trick git; create a new repo.

Getting Started

Read the Bible

Read JavaScript: The Good Parts.  When you're done, read it again.  You've probably read it before, so read it one more time.  Things that made your eyes gloss over the first couple times will be much easier to understand this time.  It's not that I'm a huge Crockford fan, but this is the Javascript book.  You may have discovered the same patterns on your own, but it will reflect negatively on you if you call memoization "method result caching" or some other weird phrase you coined.

It's easy to get submerged in whatever frameworks you've been working in and forget about the nuts and bolts.  Since we want to jump into the cutting edge of Javascript awesomeness, we'd better brush up on the mechanics.  Simply being able to drive does not make you capable of building a better car.

I got the book from Google and have started reading it a few pages at a time on my phone.  Instead of compulsively checking email in the elevator to impress the other people doing the same, I'll just read a page.  I may also revisit JavaScript Design Patterns, though I remember it being a little too verbose and covering much of the same content.

Leave Windows

The best way to learn Spanish is to wake up somewhere in Mexico, right?  So, I'm assuming the same goes for Linux.  Learning *nix has been on my to-do list for a decade, but it never seemed very urgent.  Nuts to that.  I spent a couple hours backing things up, then switched my computers to Ubuntu.  After the initial shock - Oh, god.  What are the shortcut keys?! - the difference isn't severe.  A small piece at a time, I'm learning about the environment, terminal especially.  The great thing about JS is it's interpreted; all we need is a text editor.  As a bonus, all the cool stuff we're going to be doing assumes that you're on Linux or OSX.  Steps in tutorials for Windows users are rare and a huge headache.

When I need to figure something out, I look up how to do it.  Eventually, I'm too lazy to keep Google-ing the same thing, so I just remember it.  Remember, once, sometime in ancient history, you didn't know Windows either.

Get Social

It is assumed that you have a Github account.  You should, and you should commit every day.  I haven't run in months, but I've committed (pun allowed, not intended) to show activity on Github every day.  I'm making it part of my routine.  I started just storing my own work, but now I'm starting to become interested in others'.  Star projects you're into and look at pull requests.  It's nice to see what other people are writing, and the more exposure the better.  Eventually, I'm going to look for some low-hanging fruit and take a stab at a pull request.  I'm sure there's a typo out there I can fix for starters.  Once I've been through that process, I'll aim bigger.

In addition to Github, I've started taking the time to become active on Stackoverflow.  This is like trivia and can be a good break from constant cramming.  Corny, yes, but it also makes me feel kind of nice to help lost noobs, since I have benefited from SO many, many times.

Most employers now research potential hires online, so it can't hurt to increase your presence on these major sites.  As a side-effect, some of the culture, language, customs, and technology is bound to rub off.  Unless you want people judging you based solely on Facebook, get on Github and Stackoverflow.  For me, these two are Facebook.

Assimilation Complete

We are now reading, computing, and social networking like ducks.  Let's start learning how to swim.

---

Appologies to GN's: I realize changing from talking about myself, us, you, then us, the x repeatedly is terrible.  I am embarrassed to a degree, but this is basically a journal.  If I take on the burden of proper editing and good writing, this blog will quickly become a chore and will die.