Skip to content
Dan Michaelson edited this page Apr 16, 2015 · 10 revisions

Follow these instructions to deploy your project to the internet, on a production server using Heroku. It's free but you do need to enter a credit card. The idea is:

  1. Test your code in Cloud9 and make sure it works.
  2. When you have working code you want to commit, push from Cloud9 to GitHub.
  3. Pull from GitHub to Heroku whenever you want to deploy to your production server.

A. Push your app to your own GitHub repo

We need to connect your app in Cloud9 to your own new GitHub repo, rather than the class repo you cloned from. This is sometimes called "forking" the app.

  1. Go to github.com and make sure you’re logged in.

  2. Under the + at the top right, do Create New Repository. Give it a name for your app, such as “telephone-cms”. It could match your Cloud9 workspace name. Make sure it’s public, since private repos require a paid GitHub account.

  3. Toward the bottom of the screen, note the code that looks like

     git remote add origin [email protected]:martinbek/telephone-cms.git
    
  4. Go to the workspace in Cloud9 that you want to deploy.

  5. In a Terminal type:

     git remote rename origin upstream
     git remote add origin [email protected]:martinbek/telephone-cms.git
     git push -u origin master
    

    Be sure to customize the second line. This connects your Cloud9 workspace to your new GitHub repo. The first line makes the class "origin" (which you originally cloned from) no longer the default repo for this workspace. The second line is from step 3; it’s your GitHub username and your GitHub repo name. The third line pushes your code so far to your newly-configured GitHub repo, and makes this the default way to push. (FYI, you don't actually have access to push to the class repo.)

  6. Now any time you make changes in Cloud9 that you want to push to GitHub, type:

     git add -A :/
     git commit -m “Description of my changes”
     git push
    

    This "commits" all changes you've made, and pushes them to your GitHub repo.

  7. In your repo on github.com, refresh in your browser to see that your changes were pushed.

B. Create a free account on Heroku

Heroku will be our hosting server. You do need to add billing information, but your card won’t be charged.

  1. Go to heroku.com and create a free account.
  2. Check for the confirmation email and click the activate link in it. Choose a password.
  3. On your Heroku dashboard, click your email at the top left and go to Manage Account.
  4. Under the Billing tab, do Add Credit card and enter your credit card information.

C. Create an app in Heroku

In general an app in Heroku could correspond to a workspace in Cloud9. It's a project you want to deploy on the internet, with a unique domain name.

  1. Go back to the Heroku dashboard (link in upper left).
  2. Click the + in upper right to create a new app.
  3. Give it a unique name using dashes such as “telephone-cms-martinbek”. This will become your project’s default URL on the internet (telephone-cms-martinbek.herokuapp.com), although you can later purchase a full domain name of your own.
  4. Click Create App.

D. Add MongoDB to your app in Heroku

  1. On the app’s page in your Heroku dashboard, go to the Resources tab.
  2. Near Add-Ons, click "Edit".
  3. Enter “MongoLab".
  4. Choose the free "Sandbox" plan and click "Save".

E. Add Papertrail to your app in Heroku

This makes it easier to view logs.

  1. On the app’s page in your Heroku dashboard, go to the Resources tab.
  2. On the app’s page in your Heroku dashboard, go to the Resources tab.
  3. Near Add-Ons, click "Edit".
  4. Enter “Papertrail".
  5. Choose the free "Choklad" plan and click "Save".

F. In Heroku, deploy from GitHub

  1. Make sure you’re on your app’s screen on the Heroku dashboard.
  2. Click the Deploy tab. There are three ways to deploy. I usually use the Heroku Git method, but for this class we’ll be using the GitHub method which is a little more visual.
  3. Go to the GitHub tab and click Connect to GitHub. Authorize on the following screen.
  4. After you’ve authorized, enter your GitHub repo name into Heroku. You can press Search to choose interactively. Click Connect next to your GitHub repo name.
  5. Any time you’re ready to deploy, click “Deploy Branch” at the bottom of this screen (bottom of the Deploy tab for your app in Heroku). Watch the log. This pulls from GitHub, so always be sure you’ve committed and pushed your code changes to GitHub first (steps A6-A7).
  6. You can now visit and share your app by clicking the little box/arrow icon at the top of the screen, to the right of your app name (or just enter the URL into your browser).

Conclusion

Your app is now permanently hosted on the internet. Heroku and GitHub are professional-level, scalable, best-of-breed services and you still haven’t paid for anything. Some limitations:

  1. Eventually you’ll want a better domain name. You can purchase one and point it to your Heroku app (I’ll post separate instructions).
  2. With Heroku’s free “1 Dyno" plan, your server will go to sleep after a period of inactivity. But it will wake up automatically when a request comes in. There just might be a slight delay for that user. To improve this performance, you can upgrade by adding a second “Dyno” in Heroku (not free). (If you have vast traffic, you can also add more and more Dynos to essentially scale infinitely.)
  3. The free MongoLab plan can only store a limited amount of data (and isn’t very fast). You would have to upgrade this if you have a lot of data.