Using Heroku

What is Heroku?

Heroku is essentially a fancy hosting service for dynamic applications

What's a dynamic site?

  • Let's go back on the difference between a static site and a dynamic site: http://edinteractive.co.uk/static-vs-dynamic-websites-difference/. 
  • As you can see, a "basic" site uses static pages, while more complex applications (dynamic sites) require at least some processing of the code on the server. 

Wait, why are we using Heroku right now, then?

Although our sites are not yet dynamic, we want you to start getting used to deploying your applications on Heroku.

We have learned how to host static sites using Github Pages, now we're going to host our sites on a server that allows us to process dynamic sites.

Let's go ahead and try it.

We're going to create a sample project and deploy the project to Heroku.

Note: Since we're not using a dynamic site (ie, we're not processing any data on the server), we'll need to use a small hack to make it work in the mean time.

Also note that the reference to "hack" in this context doesn't mean we're trying to break into the NSA, but rather we're not using a roundabout method to make something work.

Our Hack

What you'll need:

  • Heroku Toolbelt installed: https://toolbelt.heroku.com/
  • Make sure you've created an authenticated your user on Heroku.com
  • Remember your user credentials!

Steps to take:

  • For Windows users open the program cmd.exe. Then, type in "heroku login". Provide your email address and password associated with Heroku (This step is necessary, because Git Bash doesn't allow the "heroku login" step to work. However, once you've done this, you need not complete this step in future heroku work, unless you want to change users.) For Mac users, complete this step using Terminal. 

Our Hack

continued

  • Create a repository in GitHub for your code. Clone this repository to your local machine.
  • Download the sample files from: https://goo.gl/YFc1OJ
  • In the repo, create three files: index.php, composer.json
  • In the index.php file, include the following code:

 

  • In the composer.json file, put an empty set of brackets:

 

<?php include_once("index.html"); ?>
{}

Our Hack

continued

  • Now in bash/terminal, perform the following commands from this folder to push your changes to GitHub:

 

 

 

  • Then run the following command in bash. git remote -v. Point out that this command listed out the places where git can send your code. Initially, it's just GitHub

  • Then run the command heroku create. This command will create an app on the Heroku website and also automatically add on a new remote path in git.

  • So now if you re-run the command git remote -v, you will see listed a new set of Heroku destinations.

git add -A
git commit -m "Add files to GitHub"
git push origin master

Our Hack

continued

  • Then run the command git push heroku master. This will push your code to the Heroku hosting site.
  • Finally, visit the heroku website. You should see listed your Heroku app's name. Click on the link and go to "Settings". There you will find the URL for your website.
  • Copy and paste the URL of your website into the browser.

Our Hack

Common Issues and Solutions

https://goo.gl/8Pyd59

Using this in later projects (including Homework 3)

  • For non-dynamic sites (not using node or php), use the method involving the inclusion of the index.php file and the composer.json file.
Made with Slides.com