Launch your Angular JS development on a solid structure

ng-launchpad

3 min readApr 28, 2014

Introduction

As our webapps become larger, frameworks like Angular JS play an important role in web development.

Angular is modular by nature. Yet when you start to use Angular to build real world apps with reusable components you realize the angular-seed project’s structure is not enough. A post I read puts this into perspective.

This led me to ngBoilerplate, a great structure to kickstart app development. However, ngBoilerplate did not support Jade out of the box and I felt it was a little too complicated for my taste.

To simplify things I created my own Angular kickstarter structure, ng-launchpad. ng-launchpad borrows a lot of ideas from ngBoilerplate, but differs in a few ways:

gulp.js instead of Grunt as the build or task management tool.
Jade instead of HTML.
Integrated development server.
Protractor integration for end-to-end tests.
Development and production builds share similar folder structures.
Automagically finds all Less CSS files, even in app’s modules.
No support for CoffeeScript… yet.

gulp.js is a fantastic tool! Do not get me wrong, Grunt is great, but sometimes the amount of code needed to create a simple build configuration is just mind-boggling. Having to read through a huge pile of code to understand how simple tasks work is no fun.

Let’s get down to business.

Installation

To start off you can download a zipped copy or clone with Git. Here we make use of Git. Make sure Node.js and Git are installed on your system. Then, in your terminal or command prompt:

$ git clone git://github.com/samora/ng-launchpad$ cd ng-launchpad

Next, you install gulp and bower globally. This will add them to your path. You might have to prefix this command with sudo on some Linux systems.

$ npm install -g gulp bower

Next, install dependencies.

$ npm install

To verify everything went smoothly, run the following task:

$ gulp watch

This task might take a while to complete on first run, because Protractor’s webdriver must be downloaded and installed into node_modules/.

Visit http://localhost:8000 in your browser.

Development workflow

In most cases there are 3 tasks you will use most frequently.

gulp or gulp default: This is the default task. It will run the development build, local server, unit tests (with Karma) and watch for file changes to re-run specific tasks. There is also Live Reload integration!
gulp protractor: Run end-to-end tests using Protractor. This task can take time when you have a lot of stuff going on, that is why it is not part of the default task. Note: The local server must be running. You will usually run this in a separate terminal while gulp is already running in another.
gulp watch: This is the same as gulp, but in addition the gulp protractor task will run and watch for file changes to re-run.

Read this for more information on tasks.

Deployment

When you are done with development and you want to deploy your app, all it takes is one command:

$ gulp compile

This will process your images, minify and compress your files and put them in _public/ folder ready to be put into production. Neat!

Conclusion

Hope this helps someone build some really great apps with ease. Any improvements are surely welcome.

More information can be be found in the documentation.

Peace.