Developing and deploying web applications has never been so easy! I love the idea of cloud development. Projects like Cloud9 and Kodingen are paving the way for a development world in the cloud — personally I would love to slim down my primary machine to a small, lightweight Chromebook and offload all my processing needs to a remote server.

With that in mind, let’s take a look at how to write and deploy an app entirely in the cloud. Start by signing up for an account and creating a new project in Cloud9. You can either do this from the ground up, or start with an existing project from a Git repo. I’m going to start with a basic app using a default implementation of the Express framework.

We’ll start by creating a file Heroku will be expecting: web.js.

/**
 * Module dependencies.
 */

var express = require('express');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
});

app.configure('production', function(){
  app.use(express.errorHandler()); 
});

// Routes

app.get('/', function(req, res){
  res.render('index', {
    title: 'Node Test'
  });
});

var port = process.env.PORT || 3000;
app.listen(port);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

Notice we’re defining two paths that don’t yet exist: /views and /public. We’ll need to populate /views with layout.jade as a global layout, and index.jade since we’re specifically calling a render method for it in our / route.

/views/layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body!= body

/views/index.jade

h1= title
p Welcome to #{title}

And our stylesheet:
/public/stylesheets/style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

It looks like we’re good to, right? Wrong. We’ll need to specify dependencies using a package.json file, just like we would if we were publishing our package on npm. Here we’re depending on express, which by default uses jade as its templating engine.

package.json

{
  "name": "node-test",
  "version": "0.0.1",
  "dependencies": {
    "express": "2.2.0",
    "jade": "0.15.4"
  }
}

Not quite done yet, there’s one more file we need to declare which processes Heroku should start up when we deploy:

Procfile

web: node web.js

Okay, we’re almost there! Head to the Deploy tab of the left menu bar and add your Heroku account as a deploy target. You can create a new app right from here to deploy to. Once your app is set up, click the big green Deploy button and watch it go! You should get confirmation in the Cloud9 console if it succeeded. Navigate to the Heroku app URL and see your app in the wild!

Share this article:

If this resonates with you I'd love to help!

I help business with problems like these every day.

Click below to schedule a call.

About The Author

Bryce Hamrick

Facebook Twitter

Bryce Hamrick is an entrepreneur, business & marketing strategist, and product consultant with nearly two decades of experience in industry. Bryce has been a software engineer, product manager, and director of product management for startups as well as large enterprises. He has led teams to bring dozens of products to market and has executed numerous six-figure product launches. Today Bryce and his team focus on leveraging his product execution strategy to help businesses with growth and scale.