Ch. 8 (p. 233) describes how to deploy web apps to an open-source platform-as-a-service (PaaS) called Cloud Foundry.
Cloud Foundry provides a special command line tool called cf to deploy applications to its servers in the cloud.
The Heroku platform, by contrast, uses the Git commands to deploy applications to its servers.
Both approaches work just fine. In 281 we will use Heroku as our PaaS.
(Historical note: Salesforce.com acquired Heroku in 2010, and support for Node.js was added in 2011.)
Set Up
- Create a free Heroku user account at Heroku.com. If you have any problems, use an email address other than your uoregon.edu address.
- Install Node.js on your computer (not your Vagrant virtual machine).
- Check if Node.js is installed on your computer.
Enter the following command at the command line for your computer (terminal or Gitbash), not your vagrant vm:node -v node --version
- Check if the node package manager (npm) is installed. Installing Node.js on your computer also installs npm, but verify this is the case. Enter the following command at the shell for your computer (terminal or Gitbash), not your vagrant vm:
npm --version
- Install the Heroku Toolbelt on your computer (not your Vagrant virtual machine).Heroku Toolbelt is a CLI (command line interface) for Heroku.
- Check if Heroku Toolbelt is installed. Enter the following command at the command line for your computer (terminal or Gitbash), not your vagrant vm:
heroku --version
- Run the heroku login command, using the email address and password you used when creating your Heroku account:
heroku login
If you are prompted by Heroku to generate an SSH key, as shown below, answer Y, for Yes (if you are not prompted, that is not a problem):
Enter your Heroku credentials. Email: zeke@example.com Password: Could not find an existing public key. Would you like to generate one? [Yn] Generating new SSH public key. Uploading ssh public key /Users/zeke/.ssh/id_rsa.pub
The ssh key that is installed is used by Git to push web apps to Heroku.
Deploy a Hello/Goodbye Web App on Heroku
In this exercise, you deploy the Express/NodeJS web app from p. 192-3 of your textbook.
A)Login to heroku.com and create a new app.
After Logging in, you will be connected to your Heroku Dashboard.
Create a new app by clicking the plus (+) symbol in the upper right of the Dashboard.
You can name your app or let Heroku name it, the decision is yours (you can rename it later).
It is easy to select a unique name if you include your DuckID username as part of the app name.
B) Create a new Git repo on your local machine (not Vagrant)
Create a new directory named HerokuApp in ~/Documents/repos/281/Projects/Chapter6/app/.
cd to HerokuApp.
Create a repo: git init
C) Read p. 193 of our textbook. Make sure you understand routes. Then download web.js from Github to your HerokuApp directory.
Start Sublime, and open the HerokuApp directory.
Open web.js in Sublime. Note that it defines three routes (/, /hello, /goodbye). Read p. 193 for details.
D) Declaring dependencies with the npm init command.
The npm init command prompts you for a number of inputs and then creates a package.json based on those inputs. The package.json file describes what packages (i.e., node modules) your app needs in order to run (hence, these are known as dependencies).
For example, Heroku recognizes that your app uses Node.js by detecting the presence of a package.json file.
To create a package.json file, run the following npm command in your HerokuApp directory:
npm init
You will then be prompted multiple times for inputs.
You can respond to all the prompts by hitting Enter, which accepts the default value for the input.
Example:
At the end you will be asked, “Is this OK? (yes)”.
Just hit the Enter key to say yes.
(In the rare event that npm init totally fails, you can ssh into to your vagrant machine, cd to HerokuApp, and run npm init from there.)
E) Install the express, body-parse, and logfmt modules. Type these commands in the shell on your computer (do not copy-and-paste from this document).
npm install express --save npm install logfmt --save npm install body-parser --save
Windows Users, if you get an error:
npm install express --no-bin-links --save npm install logfmt --no-bin-links --save npm install body-parser --no-bin-links --save
The “–save” option means that npm will add a line to package.json. Open package.json in Sublime to see the module dependencies added by these commands.
F) Declare the app’s process type in Procfile
In Sublime, create a new file named Procfile in HerokuApp.
The file must be named Procfile, and not Procfile.txt or anything else. Windows sometimes adds a .txt extension automatically, so make sure your file is named Procfile.
Add the following line to Procfile. The line defines what command should be executed to start the web app on Heroku’s servers:
web: node web.js
G) Optional Step: Test the web.js server on your virtual machine.
Use vagrant ssh to connect to your virtual machine, and cd to the HerokuApp directory.
Run vagrant halt command to free up any ports reserved by your virtual machine.
Start the server:
node web.js
Open localhost:3000/hello in Chrome. (Note that your VM always listens on port 3000.)
You should see, Hello, World! in Chrome.
Test the other routes (/goodbye and /)
Stop the server, with control-c.
H) Test the web.js server your host machine.
Now that you have Node.js and Heroku toolbelt installed on your host computer, you can run a testing server on your computer without having to start Vagrant.
Exit your virtual machine and run this command in the shell on your computer:
foreman start
Then open localhost:5000 in Chrome.
Stop the server, with control-c in the shell.
I) Commit your changes in Git.
Skip the git init command if you ran it in HerokuApp previously:
git init git add . git commit -m “First commit.”
J) Deploy your web app to Heroku.com with Git
Login to heroku at the command line on your local machine, define a remote named heroku, and then push to the remote:
heroku login heroku git:remote -a name-of-your-heroku-app git push heroku master
If you are prompted as shown below. Answer yes. If you are not prompted that is not a problem.
The authenticity of host 'heroku.com (50.19.85.156)' can't be established. RSA key fingerprint is 8b:48:5e:67:0e:c9:16:47:32:f2:87:0c:1f:c8:60:ad. Are you sure you want to continue connecting (yes/no)? yes
K) Your App is running on Heroku.com. Give the app a minute to launch, then open it in Chrome. The following shell command will open your hosted app in a new tab:
heroku open
You can also open this URL directly in Chrome:
name-of-your-heroku-app.herokuapp.com/hello
Heroku App Debugging Tips
If your web app generates an error when you open it in Chrome:
- Check the heroku log file, with this command:
heroku logs
Scroll to the end of the log file. If you see “no web process is running” or a similar message, read the fix: H14 – No web dynos running.
- Make sure your Procfile is correctly named.
If it is named Procfile.txt (or anything else), you will have to change the file name to Procfile, and repeat the Git add/commit/push cycle.
- The Procfile must contain the following line of code:
web: node web.js
Make sure that there is a space following the colon (:).
- If none of the above fixes the error, then log in to Heroku.com, delete the app in your dashboard, create a new app, and follow the instructions on the new app’s Deploy tab to push your app to Heroku.
About Heroku Apps
The Sleep State
Your app will enter a sleep state after one hour of inactivity. This causes a delay of a few seconds for the first request upon waking. Subsequent requests will perform normally.
How Apps Work
Heroku runs your app in a container that runs a single user-specified command (e.g., web.js). The container is called a dyno, and is a virtual machine running Unix, very similar to our Vagrant virtual machine.
750 Free Hours per App
Heroku automatically credits each app with 750 free dyno-hours per month.
Your free hours will allow you to run the apps you create for this class for no charge.
Publish your Heroku App URL in a README.md file on Github
You know your Heroku App URL, but no one else does. To make it accessible to your instructor, do the following:
- Create an orphan branch named heroku-branch.
- Create a README.md file with the following:
a) An h2 header, Github repo for Heroku Hello, World App
b) A link connecting to your Heroku App. The anchor text should be, My Hello, World App on Heroku, and the landing page should be your app hosted on Heroku.
See Git Orphan Branches to review how to create one.
See Markdown Language and README.md for how to create hyperlinks using Markdown.