Deploying to Heroku using Gulp, Node, and Git

Originally published at: http://www.sitepoint.com/deploying-heroku-using-gulp-node-git/

Whether you’ve used it or not you’ve probably heard about Heroku at some point wandering around the Web. Heroku lets you deploy, run, and manage projects written in Ruby, Node.js, Java, Python, Clojure, Scala, and PHP. This platform brings joy to so many developers because of its amazing build packs that create a robust deployment workflow.

Let’s examine the required files needed to deploy a project to Heroku using Gulp, Git, and Node.

Heroku Terminology

Before we begin, we’ll make sure a few bits of terminology are defined.

Dyno
A lightweight Linux container that runs a single user-specified command. A dyno can run any command available in its default environment. Read more about Dyno types here.
Buildpacks
These lie behind the slug compilation process. They’re open source, enabling you to extend Heroku to other languages and frameworks. Buildpacks take your application, its dependencies, and the language runtime, and produce slugs.
Slug
A bundle of your source, fetched dependencies, the language runtime, and compiled/generated output of the build system – ready for execution.

File Requirements

In order to run a Node-based project on Heroku, we need a few things to get started. The first thing we need is a project. For our purposes, we’ll use the Transformicons Open Source project as the example for this tutorial. You can also use the Transformicons repo with your own free Heroku account to practice outside this article!

Make a Procfile

Begin by making a blank file named Procfile and placing it within the root of your project. Procfile is short for “Process File” and used to explicitly declare what command should be executed to start your app. By default, a Procfile is not required, but it’s good form for Node-based projects to create one.

If a Procfile isn’t defined, then one will be created automatically using npm start as the web process type. Here’s the Procfile process command for Transformicons:

web: node node_modules/gulp/bin/gulp build

The line above lets us use the locally installed version of Gulp provided by Node’s Package Manager (NPM) instead of having to use a globally installed version. The gulp build portion of that command in this case will fire up a server, compile Sass, concatenate / uglify JavaScript, replace asset calls, cache bust file names, compile templates with Assemble, and finally minify our compiled HTML documents! This is the part where we dance our pants off

Continue reading this article on SitePoint
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.