Intro to Yeoman Angular Fullstack

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.

What?

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.

Get Started

Install Yeoman

npm install -g yo

Install Angular Fullstack

npm install -g generator-angular-fullstack

Create New Directory

mkdir superAwesomeApp

Move into New Directory

cd superAwesomeApp

Run the Generator

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.

Serve, Build, Test

Angular Fullstack comes packaged with some handy Grunt commands

Grunt Serve

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

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.

Grunt Test

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.

File Structure

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.

Where to start — backend

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.

Where to start — frontend

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.

What’s next

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.

Leave a Comment