Yeoman is a scaffolding tool built on node.js. It helps you get up and running really quickly with a new project.
There are a lot of different generators available, my personal favorite right now is the Angular Fullstack generator.
The Angular Fullstack generator scaffolds out a complete application using Node, Express, and Angular. You can optionally choose to use MongoDB, Bootstrap, ui-router, Compass, and SASS.
npm install -g yo
npm install -g generator-angular-fullstack
mkdir superAwesomeApp
cd superAwesomeApp
yo angular-fullstack
The generator is interactive. Choose which components you want. I recommend using Bootstrap and ui-router, but not Mongo for demo purposes. Congrats! You now have a functional web app.
Angular Fullstack comes packaged with some handy Grunt commands
To preview your app run grunt serve at the command line. Grunt will start up your server and open a browser window for you to preview.
The serve process also kicks off a watch process. This means that whenever a file in the project is changed your app reloads itself, both in node and the browser. This doesn’t seem like a lot at first, but ends up saving a ton of time.
grunt build gets your app ready for production and places the files in the dist/ folder. It does things like concat and minify javascript, html, and css files.
This process becomes super important when you start getting into continuous delivery.
This may come as a surprise, but grunt test runs the tests for your app.
Angular Fullstack uses mocha for backend tests, and uses karma to run jasmine tests for front end tests.
The way Angular Fullstack lays out the project can appear to be intimidating at first. It was for me, but I learned a lot about how to structure both Node and Angular apps by digging through the files.
The easiest place to starting poking around is in the server/api/things folder. The .controller file contains the logic for GET requests to /api/things. Start here and work your way up the folder structure to get an understanding of the application flow.
The easiest place to start on the frontend is in the client/app/main folder. After you are comfortable with how the different files intereact in this folder, checkout client/app/app.js and the client/app/components folder.
There are a lot of aspects of Angular Fullstack left to cover. In follow up posts I will cover the file structure more in depth, and go into using the generator itself to extend the application.
Originally published at www.parsed.io.