The Ingredients

node.js: server-side JavaScript

heroku: cloud platform as a service to help you easily deploy your apps

roots (the special sauce): a tool for quickly building beautiful and efficient web products

The Steps

1. Install node

If you don’t have node.js, install it from nodejs.org.

2. Install roots

Once node.js is installed, you can can install roots in the terminal with the following command:

npm install roots -g # prefix with sudo if you get a permission error

3. Create a new roots project

You can create a new roots project with the following command in the terminal:

roots new [name of project] # i.e. roots new new_project

4. Start the local server

Once you’ve switched into the new project folder, you can start the app on localhost:1111 with the following command:

roots watch

5. Deploy to heroku

Now you’re one small command away from having your app up on Heroku for the world to see:

roots deploy

Yes, it’s that easy. If you don’t believe me checkout the app I made while going through the roots tutorial.

Checkout your own app with the following command:

heroku open

Note: The standard homepage markup is placed in a views folder with the name ‘index.jade’. If you don’t want to use the default roots stack (jade, stylus, and coffeescript), you can revert to an html, css, and javascript stack by adding the —basic flag to your roots new command.

Awesome features

In addition to helping you get an app up and running in just a couple minutes, roots also has a ton of amazing built in features.

LiveReload: lets you see your markup and styling changes without having to refresh your browser

Axis | Better CSS: a css library built on top of stylus that helps take the pain out of traditional css

Axis in action

An example of how Axis makes css easier is how it simplifies border radius. The following code shows how to create a border radius that works across different browsers: first using standard css, and then using Axis.

/* Standard css border radius styling */
div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* Using axis to add a border radius */
div
  border-radius: 5px; /* vendor prefixes are added automatically */

The button in the example page uses the following code:

.button a
  simple-button: blue 15
  transition()

Border-radius? Included. An easy on the eyes blue? Included. Darken on hover? Included. Yep, it’s super convenient. There are a lot of other cool features you can check out via the library’s documentation.

This is just the tip of the iceberg

There are a lot of other awesome features that I haven’t talked about above – for example dynamic content and js templates.