Getting Started using AngularJS with Yeoman and Visual Studio Code

Typically to get started with a web-project you would start downloading libraries, configuring grunt etc. Yeoman is a project that takes care of all of this in a simple step and goes one step beyond, it also ensures that you will be using current web standards. My editor of choice is Visual Studio Code (Other alternatives would be Atom, Sublime, Brackets etc.). I will be using Windows as my Operating system, all Software is available cross-platform for Mac and Linux. Some commands need to be adjusted for the platform you are using.

Software needed:

• NodeJS: https://nodejs.org/
• Python:  https://www.python.org/downloads/ (Important: During install choose to add Python to path)
• Git: https://git-scm.com/download/ (Important: During install choose “Use Git from the Command Prompt”)
• Visual Studio Code: https://code.visualstudio.com/

Now it may seem odd that python and git are listed here. However, while I was trying to get yeoman to work I discovered that bower requires git to be added to the path and since python was missing from my path, some odd errors occurred while creating the initial project.

Getting Started with Yeoman

Working with Yeoman requires you to work with the terminal. Open Powershell (Powershell is the newer version of the console and emulates more a Linux-like shell) by searching for “Windows Powershell” in the StartMenu

1. Install a lot of node stuff you need for yeoman npm install -g yo bower grunt-cli gulp
2. Now you need to install the yeoman generator for angularjs npm install -g generator-angular

Your first Yeoman project

Simply because you are anyway in the console change the directory to your project directory (something like cd c:/projects) You can create a new directory using the mkdir-command like: mkdir angularProject Finally, run yo angular to create your project. You have to answer a couple of questions which (modern) tools&frameworks you would like to use: Sass (with Compass): Yes Bootstrap: Yes Bootstrap Sass Version: Yes More information about the official yeoman generator-angular can be found here. If everything goes smoothly the generator-angular created for you an entire modern web application project that uses angularjs.

The generated Gruntfile

Grunt is a task runner, when properly defined it can automate a lot of tedious work. Yeoman essentially does the work of properly defining the gruntfile. A lot of tasks are to optimize your various files, like CSS, js and image files. It also takes care of running the preprocessors like sass or less. It even runs your javascript tests with karma.js. (and now that grunt takes care of most of your repetitive tasks you maybe even have time to write some tests).

What do you need to know?

There are three commands you can use on the console:

• “grunt” - simply runs all the tasks and provides a working web app in the “dist” folder
• “grunt serve” - starts a web server and automatically updates your browser while you are working on the source files
• “grunt test” - runs all of your tests

 Visual Studio Code Setup

Well, there is not much to do. You need to open the folder for your project. And out of the box, you can already run the build and test tasks. To additionally run the “serve” task in Code

1. Ctrl-Shift-P > Configure Task Runner
2. In the tasks.json add a new task {"taskName": "serve", "isWatching": true }

 To use the Visual Studio Code Debugger you need to adjust the Debug Configuration

1. Ctrl-Shift-P > Debug: Configure
2. Change the line “program” : “app.js” into “program”: “app/scripts/app.js”.

Conclusion

The power of this setup is mostly that most of the stuff comes out of the box, and provides you with a great foundation to create a high-quality code project. You can and should extend the gruntfile to suit your specific needs like to push your project onto your webserver.