NodeJS

Welcome to Node.js: Part 8 – Angular, Angular, Angular, MEAN.io

August 13, 2014

We’ve crossed the bridge from knowing nothing to understanding the basics of Node.js, Express, and MongoDB. Now, we are approaching the last piece of the MEAN stack puzzle: AngularJS. The Angular web site provides a helpful tutorial putting together a small, interactive catalogue app. I attempted to follow through it, hoping to avoid anything like a programming equivalent of the boat-on-the-truck fiasco to the right. That didn’t happen. I never even made it to Step 0 of their tutorial as the setup for the unit and end-to-end tests never once worked for me. I spent almost two days trying to figure it all out. By the end, there were boats falling out of the skies on trucks spanning from horizon to horizon. The following is a brief account of the fixes I tried and failed to implement, written as I attempted to hack through it. If you want to skip to the part where something worked (I gave up on the tutorial), then jump down to the “MEAN.io” heading.

If you remember way back in Part 1, I ran through some of the things I needed before even starting those instructions, having started off with a bare naked Ubuntu VM. Git was one of those tools. We haven’t really had to use it directly since then, but if, for some reason, you still don’t have it, follow the applicable instructions here to get it. We need it to clone the project repository (called angular-phonecat) the Angular tutorial works with.

Trepidation Cat is feeling trepidatious

Just to clarify, this is the initial setup to the tutorial, the part before “Step 0 – Bootstrapping.” The guide then instructs us to install Node.js, which we’ve also already done. But make sure, after moving to the angular-phonecat directory, to run the npm install command to get the required dependencies outlined in the provided package.json file. When I did this I noticed a few warnings in the techno-babble that fills the screen. It seems to be related to Bower. I tried a “bower help” command, but because I’ve been running at root on my VM, it had a problem with me running the command “with sudo.” I added the “–allow-root” option to the command, and bower seemed to be working as it faithfully provided the help information. I suppose for now I’ll just hold my breath in trepidation and figure out what errors these warnings cause later on. (NOTE: I’m aware that running at root is a bad idea, but until now I had figured it didn’t matter much on a “junk” VM.)

I went ahead and tried the “npm start” command (per the tutorial instructions), and I figured out that “later on” is now. At least, I get the same error, but the server spins up anyhow. By the way, the warning says

npm WARN cannot run in wd angular-phonecat@0.0.0 bower install (wd=/root/node/angular-phonecat)

The warning evidently has not become a blocking issue… yet. I’ll press on for now. I can successfully check the local host at port 8000 and see the skeletal website below. The Angular tutorial doesn’t actually provide any illustrative screenshots, so I’m just kind of hoping it’s supposed to look like this.

I tried clicking on a few of the links and got 404 errors. So then I tried to start the provided unit tests with the “npm test” command and… crash and burn. Surprise, surprise—apparently, a whole bunch of “bower-components” aren’t where they should be. On a whim, I killed the server I had started, used the “bower update” command (again using the ‘allow root’ option), and now the website works when I click “app/” or node_modules/” etc. But the unit test breaks in a whole new way.

For some reason, the unit test cannot open a Chrome browser through which to run it’s tests. So I installed Chrome on the VM using method 1 here. Still no dice. So, on another whim, I did an “npm update”. I’m starting to suspect that whims are not effective programming tactics. Tons of errors. Another “bower update” gave me no errors. Another “npm update” gave me the same ton of errors. Then I fell down the rabbit hole of fixing the fixes that didn’t fix the problem(s), and now I’ve rebuilt my VM to a state before I began the tutorial.

Y. U. No.

Once again through the looking glass, and… This is frustrating. I’m in the “Install Node.js” section again. It mentions a potential name clash in Debian distributions, but I’m not using that, so I ignored it. Then it tells us to do an “npm install” inside the angular-phonecat directory, which produces about 12,000 pages of text. Right in the middle is a warning:

npm WARN optional dep failed, continuing fsevents@0.2.0

I didn’t know what it meant before. I don’t know what it means now. Google is less than helpful on this one. I pressed on. I hit a whole bunch of new errors in new places. I started over. I created a user so I could stop doing everything at root. This fixed some things, and I still faced more errors. I got turned about, and things happened, and now the computer is sitting in the corner, pouting like it’s my fault.

I started over. Again.

And again. And again. And again. And again. And again. I tried new things and angles each time. I have absolutely no idea how to even begin the AngularJS phone catalogue tutorial.

And then I gave up.

MEAN.io

Go here, and you’ll read that MEAN.io is a, “friendly and fun javascript fullstack for your next web application.” It takes every component we’ve learned about (plus a few others), and uses them together to do nifty web stuff and shiny web things. The installation process is right on the front page… and led me straight into more errors.

I figured I broke something in the AngularJS tutorial fiasco, so I rebuilt my VM to an even earlier snapshot, then followed the slightly more detailed instructions on their documentation page. And ran into more problems. The bower_components folder was missing again. So I did a “bower install” and voila—wait, no. More errors. bower_components was there, but my command line didn’t recognize the grunt command instructed by the MEAN.io documentation. (Grunt is one of those tools we didn’t talk about, installed by MEAN.io in its own installation process.) A quick search and I tried installing grunt-cli. And voila—

FINALLY! Something worked. No warnings. No errors. I used the “grunt” command, the Node.js server started up, I browsed to the local directory, and there, as I perceived through tearful eye, was a home page with the single default statement, “This is the home view.” I’m so deliriously happy right now.

With MEAN.io, we’ve got the start and toolset to make a website very quickly, very easily. And being founded on Node.js, this site would be well equipped to efficiently handle most of the tasks I’d be likely to need for a website.