This tutorial is for 1.x versions of the angular fullstack generator. For an updated example, check out http://tylerhenkel.com/building-an-angular-node-comment-app-using-yeoman/

Yeoman generators can save you a huge amount of time writing boilerplate, and give you a great foundation for building apps. Today we’ll be looking at a workflow for making applications with an Angular, Express, and Node stack using the Yeoman angular-fullstack generator.

You’ll need to have Yeoman installed, and the angular-fullstack generator, which can be installed using npm install -g generator-angular-fullstack

Scaffolding an app

Create a new empty folder to work from

mkdir newProject

cd newProject

Now run yo angular-fullstack to scaffold out a new client and server application, and download all the dependencies.

Alternatively, if you prefer using jade templates over html you can alternatively use yo angular-fullstack --jade

You will get several questions asking how you would like to configure the app, such as if you want to include a mongoDB connection. For now we’ll just use the defaults.

Starting the application

When that’s done, start the serve task:

grunt serve

This starts the express server, and opens the newly scaffolded application from a browser.

This also starts the livereload task, so any changes you make to the client files get automatically reloaded, and any changes you make to the server files automatically restart the server.

Creating your application

Before we begin, lets have a look at folder structure we’ll be using.

app -> Development folder for client views, scripts, and assets

-> Development folder for client views, scripts, and assets test -> Tests for your client code

-> Tests for your client code lib -> Your server application logic

-> Your server application logic server.js -> Initializes express server, server configuration

Lets try a trivial example to get familiar with editing the project. We’ll get a message of the day from the server api and display it in our app.

Server modification

Create a function to handle message requests.

// lib/controllers/api.js ... exports.message = function(req, res) { res.send('Hello World'); };

Add in a new route

// lib/routes.js ... // Server Routes app.get('/api/message', api.message);

Now if you navigate in your browser to http://localhost:9000/api/message you should see the server respond with Hello World.

Client modification

Ok, so now you have a basic server api you can access, lets hook it up to our client so we can display it in a view. We’ll make a new AngularJS route for this. From another command prompt, CD into your working directory and run:

yo angular-fullstack:route message

In the newly created Message controller, lets make an $http get request to our new api route and bind the result to our scope.

// apps/scripts/controllers/message.js ... .controller('MessageCtrl', function ($scope, $http) { $http.get('/api/message').success(function(message) { $scope.message = message; }); });

Now navigate to the view that was also created by the generator, and bind the message to our view.

// app/views/partials/message.html ... The message of the day is {{ message }}

Navigate to http://localhost:9000/message to see the new view, which now will be displaying the message from the server. It’s as simple as that.

Build for production

Next we’ll cover how to build the app for production so your assets and scripts are optimized for a live server.

grunt build

This grunt task minifies scripts, css, compresses images files, and updates all the references in your views to point to the new minified assets. Packages everything up for you and outputs the result to:

dist

We can also launch the production build locally using:

grunt serve:dist

Which does the same build process as grunt build, but launches the final application so you can see it in action.

Deploy to heroku

This step requires you to have the heroku toolbelt installed.

Initializing heroku folder

Use yo angular-fullstack:deploy heroku

This will do a grunt build , copy all the production files into the dist folder, create a Procfile required by heroku, and initialize a git repository for you.

Finally, it will create a heroku app for you, with the heroku toolbelt, and sets the node_env to production.

Push to heroku

Once it’s all done with that, you’ll need to git push the dist folder to deploy it.

cd dist

git push heroku master

When you’re done uploading, you’ll be able to open the newly deployed application with

heroku open

Making changes and deploying again

If you make additional changes to the project that you’d like to push to heroku, from the project root use the following command.

grunt build

This will build the new version of the app and copy it into the dist folder. You’ll need to use git to add any new files, and commit your changes to the heroku folder. And then push your new changes to heroku with.

git push heroku master

Final note on testing

One thing I didn’t really go into was testing, but it should be an important part of your work flow as well. Use grunt test to run through your unit tests. I hope to integrate server tests with mocha in a future release of angular-fullstack.

In conclusion

Hopefully, you now have a more robust work flow for developing, testing, and deploying full stack applications. If you’d like to learn more about this generator, head over to the github page to read more. I plan on making more advanced guides to demonstrate new features as they’re added to angular-fullstack. Have fun making cool apps!