Navigate back to the homepage

How to Deploy an App in 5 Minutes Using Roots

August 20th, 2013 · 2 min read

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:

1npm 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:

1roots 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:

1roots watch

5. Deploy to heroku

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

1roots 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:

1heroku 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.

1/* Standard css border radius styling */
2div {
3 -webkit-border-radius: 5px;
4 -moz-border-radius: 5px;
5 border-radius: 5px;
8/* Using axis to add a border radius */
10 border-radius: 5px; /* vendor prefixes are added automatically */

The button in the example page uses the following code:

1.button a
2 simple-button: blue 15
3 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. The roots creator, @jescalan, has some great video tutorials that you can find here if you are interested in learning more.

Adam Waxman

Product Design at SeatGeek

@ajwaxman  ·  awaxman.com

You may also like

iOS 7 - The Good Parts

August 19th, 2013 · 1 min read

What is the Difference Between a Block, a Proc, and a Lambda in Ruby?

August 5th, 2013 · 2 min read