App / Website Deployment with GruntJS: Quick Start Guide

These days, it’s extremely easy to do continuous deployment of your work when you or your team are working on a new project. Here, I’ll walk you though the process using one of the best task runners currently available: GruntJS. Note: this is not meant to be an exhaustive tutorial. If you want a more in-depth explanation, make sure to visit the (excellent!) documentation here.

To get started you’ll need:

  • an app that’s (somewhat) ready for primetime
  • an account for cloud application platform (I recommend Heroku)
  • npm installed on your machine
  • git installed on your machine
  1. The first thing you’ll need to do is make sure that your app’s port settings are ready to go on your cloud platform. In the example below, I use the process.env.PORT method to ensure my app will listen for the port assigned to it by Heroku, or any machine for that matter.

2. If you’re using Heroku, you’ll need to add a procfile so the server knows what to do with it. Heroku will look for this file for directions as soon as it tries to run your program. If you are deploying a web app or page, you will only need one line in the file! See the example below and note that the procfile MUST be literally named procfile and nothing else. The file should go in the root directory of your application.

3. Create your Gruntfile.js and put it in your root directory. Here is where you will configure all the things that will happen each time you deploy your app. Before it will actually work, you’ll need to run:

  • npm install -g grunt-cli
  • npm install grunt — save-dev

Your gruntfile can be as simple or r0bust as you’d like. For my Node app that I use in the examples, I wanted to concat the script files, run my mocha and jshint test specs on them, then uglify and minify them to the smallest possible file size. I also wanted to set it up to do all of these things and then upload to Heroku with one console command. Check out the code below to see how easy it is to set that up.

Here, I simply call grunt.initConfig and start adding some key-value pairs. The keys are the things that I want Grunt to do, and the associated value is an object that configures the task is a way Grunt can understand. For example, I tell Grunt to run ‘concat’ and ‘mochaTest’ with a handful of specified src files. Note line 1, where I have to add the function to module.exports because I’m using Node.

Also, make sure to use grunt.loadNpmTasks(‘your process here’) somewhere in your file for each process that you want Grunt to run, otherwise it will have no idea what you’re talking about when you say ‘mochaTest’!

Now, you can start registering your tasks! At the bottom of the example code below, I register a task called ‘deploy’ which runs three other functions each time I enter it into the command line. Keep in mind these three other functions were all created using registerTasks with their own sub-functions! For example, my ‘test’ task simply runs my mochaTest which I configured above, and two other functions as well.

Now, I can simply enter ‘grunt deploy’ in my command line and it will run all of those specified tasks!

4. If you already have a cloud service account set up, you’re good to start deploying! Otherwise, you can set up a Heroku account and start deploying in just a few more steps. Once you’ve gone to their website, created your account, and installed the Heroku Toolbelt, go ahead and run git init in the root directory of your project and git commit to wherever you had been keeping your project. Then, you can simply run ‘heroku create’ and ‘git push heroku master’ to get your project on your project on their server. Go ahead and check into your account on the Heroku site and you should find your project under ‘my apps’. Or, you can just run ‘heroku open’ on your command line and your app should pop open in your default browser. All done!