Yeoman, borrowing from masters, and a couple other gems

This is one for all the MEAN (Mongo, Express, Angular, Node) programmers out there. I finally go to work off a Yeoman generator and am glad I did. The code is cleaner and betterorganized. There are examples of E2E and unit tests provided for eachcomponent. All of a sudden I have a better build process and a much more sophisticated, comprehensive Grunt task manager.

Building from scratch isa great way to learn. Later, by imitating the masters, you might just start thinking like one; draft behind someone faster than you.

(Having just finished the post) There are a couple other gems included: making changes to source filesthrough the chrome inspectorandsite extensions on your azure web servers.

Here’s the Yeoman generator I used, Angular Fullstack.

Get that set up and your directory structure looks like this:

Screen Shot 2015-05-23 at 2.58.09 PMRight off the bat, I like naming and separating the “client” portion from the “server” portion. I was already a believer in a modular structure on the front end. That means grouping the controllers, partials, directives, filters, and so on by component – making it easier to plug/unplug them and use them in other apps. Here’s a more in-depth post on the the benefits of this structure.

Testing

Follow the instructionsto get Karma, Selenium, and Protractor running on your machine. Then try building, and watch the unit tests pass (with Karma).

The development environment

grunt serve  will get a local server running with your app, and it will watch your style files (less or sass) for changes and automatically compile and restart. Nice.

Integrate with the Chrome inspector

A couple months ago, I saw this notification in my chrome inspector. What are you trying to tell me, google?

Screen<em>Shot</em>2015-02-26<em>at</em>5<em>52</em>32_PM



Follow the breadcrumbs and you find out that the Chrome Inspector wants to sync with your local files, so that when you tinker with the styles or html, those changes get saved to source. No more copy, paste, and re-indent. Terrific.

In my case, that means:

  1. Add your “client” folder to the chrome inspector. If you click on the gear icon in your developer tools panel, go the “Workspace” section and look it up. Or, just grab it in a finder window and drag it to the developer pane.
  2. Make sure you have your css mapped to your less (or sass). This way chrome can tell where the original uncompiled files are. In your Gruntfile, if you’re losing less, add this: // Compiles Less to CSS less: { options: { sourceMap:true, outputSourceFiles: true,
  3. Refresh maybe. Go to sources and look up some file. The inspector might suggest you make the mapping (right arrow), or you can right click a file and make the mapping yourself (left arrow).
    Screen_Shot_2015-05-23_at_3_45_14_PM
  4. Refresh maybe. Then, look up some of your styles, and see it call out the source file on the right, or in a link on some styles:
    sass-debugging
    To jump to the source file:- Click the link to open the (editable) source file in the Sources panel.
  5. Control+click (or Command+click) on any CSS property name or value to open the source file and jump to the appropriate line.
  6. Make the changes and save (command + s). If you ran grunt serve, then your server should automatically restart, and chrome will automatically reload, and you should see the style change right before your eyes.

Cool.

Launch to Azure

Follow the instructions again, creating a new git repo in your dist folder. If you’re hosting on Azure like I love to do, then you just have to say so in your Gruntfile.js. I say “just”, but it took some help.

Azure Addons?

In fact, first I though I could push the top repository to azure and then just tell azure where to find the app.js file. In the “configure” pane of azure, here’s where what I thought would work:

Screen Shot 2015-05-23 at 3.57.42 PM

Well, that didn’t work. The page only shows:

The page cannot be displayed because an internal server error has occurred

Hmm. But all I see in the console is this:

Screen Shot 2015-05-23 at 4.01.07 PM



Note: It happens that the “dist” folder was in my .gitignore file and therefore isn’t even there to run. But that’s beside the point.

I went back to the StackOverflow answers and comments.

Screen<em>Shot</em>2015-05-23<em>at</em>4<em>08</em>18_PM

Check out this blog post. Azure website extensions? What? So apparently there are ton of addons that help you monitor your azure server:

Screen Shot 2015-05-23 at 4.12.10 PM

And by using the one for digesting the “event log”, I get a clear description of the error, which was:

Exception message: Server cannot access application directory 'D:homesitewwwrootdist'. The directory does not exist or is not accessible because of security settings.

In a user-friendly view:

Screen Shot 2015-05-23 at 4.12.25 PM

Thank you, Azure, for lending a hand in my time of absolutely unnecessary trouble.