Skip to content

Instantly share code, notes, and snippets.

@heidipowers
Last active November 29, 2019 03:02
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save heidipowers/829e466e4c31fd99cf1e4d9aac22eeea to your computer and use it in GitHub Desktop.
Save heidipowers/829e466e4c31fd99cf1e4d9aac22eeea to your computer and use it in GitHub Desktop.
Node/Express/Heroku Deployment

#HEROKU TIME#

internet

  • Heroku is a cloud application platform – a new way of building and deploying web apps.
  • Heroku allows app developers spend their time on their application code, not managing servers, deployment, ongoing operations, or scaling. Heroku makes it easy!
  • We can deploy full stack apps to Heroku for FREE!
  • Heroku is also PSQL & Node friendly! Awesome!

###Before we begin, a word of warning: Warning: Never git add, commit, or push sensitive information to a remote repository. Sensitive information can include, but is not limited to:

  • Passwords
  • SSH keys
  • AWS access keys
  • API keys
  • Credit card numbers
  • PIN numbers

#Part 1: Heroku Set Up#

###Let's Get Started###

These steps only need to be completed once.
  1. Go to heroku.com and sign up for a free account. Remember your name and password - You will need it in a minute!!
  2. Open a terminal window and brew install heroku-toolbelt
  3. Once Heroku toolbelt is installed, type heroku update into the terminal and hit enter
  4. If for any reason that didn't work, you can download then install the Heroku Toolbelt.
  5. Once installed, you'll have access to the heroku app from the terminal by running heroku login. Enter the email address and password you used when creating your Heroku account.
At this point you should have a personal Heroku account and the Heroku CLI toolbelt should be installed

#Part 2: Getting Production Ready#

When we build on our computers, we've been working locally in a development environment and all our variables and configurations reflect this. We need to prepare our files so our app can switch to production mode and declare our dependencies before we launch.

  1. Create the Procfile: Make sure you are inside the root of your App's directory.
    • From the command line run touch Procfile exactly like that, no extension, and a capital 'P'.
    • From your text editor go into your Procfile and type: web: node myentrypoint.js.
      • HEY! YOU! The file name should be the entry point for YOUR APP!
    • If no Procfile is present in the root directory of your app during the build process, your web process will be started by running the npm start script from your package.json.
      • Heroku says it is best practice to include a Procfile, so just do it!
  2. We need to update our package.json:
    • add a start script where server.js is the entry file for YOUR APP:
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  • add your engines. First, from terminal, type node -v and copy just the numbers. Go back to your package.json and include engines:
  "engines": {
    "node": "6.6.0"
  },
  • Example:
  {
  "name": "heroku_node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "6.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0",
    "mustache-express": "^1.2.2",
    "pg-promise": "^5.2.7"
  }
}
  1. Okay, now we need to make sure both our database and our port are accessible both in Dev and Production mode. Go to your entry.js file (the entry file for YOUR APP) and add these lines:
    • Replace your port variable with: const PORT = process.env.PORT || 3000;
      • This line tells our Node app to first check environment variables for a port number (for Heroku), otherwise default to port = 3000. Make sure your app is listening on this new PORT variable.
    • Replace your database variable with: var db = pgp(process.env.DATABASE_URL || 'postgres://myname@localhost:5432/mydatabasename');
      • HEY! YOU! make sure the postgres address and database name are YOUR APP's information
  2. Finally, make sure any sensative information, like API keys, are saved as variables and exported from your bash profile.

#Part 3: Create A Heroku App#

Use the options below to determine where to start:

####I ALREADY have a Github repository cloned for this app to my local machine and I am inside that directory: Proceed to Step 2

####I DO NOT have a Github repository yet: Proceed from Step 1

##Heroku Command Line/Terminal## Ahhh yeah, you're keep'n it real. Using the terminal is awesome, and so are you.

  1. First things first, we need git to track our directory, so from the root of our directory, run git init. This DOES NOT connect us to GitHub, this is simply the magic of git tracking our files.
  2. In the terminal, type heroku create. The heroku create command creates a new application on Heroku – along with a git remote that must be used to receive your application source. Heroku will provide you a random name for your app. If you want to provide a custom name, type heroku create mycustomname. Make sure to use all lowercases and no spaces (but dashes are okay). It is totally possible to change the name of your app at a later date, so don't get too wrapped up in this step.
  3. Now let's make sure our remotes are set, run git remote -v, you should see your heroku remote here.
  4. Sweet, we have our app. Love it. Now we need to communicate with Heroku. Run a git add, git commit, then git push heroku master. Heroku will now rebuild your app on it's servers. If all goes well, when Heroku is done you'll see remote: Verifying deploy... done.. If deployment fails, read the errors in your terminal.
  5. Heroku gives us 2 easy command to check out our logs, let's run it now to see what happened:
    • See the last 100 lines of your log: heroku logs
    • Real time continous logging: heroku logs --tail (This one is probably best utilized in it's own terminal window)
  6. Run heroku open, this will open a browser page with your app. Don't be surprised to see Application Error - we still have stuff to do. Let's head to step 4!

##Heroku Website/GUI##

  1. Go to heroku.com, sign in, then head to your dashboard. You can find it by clicking the grid next to the profile ninja in the top right corner. Here you will see a list of your current apps (if you have any).
  2. Click on the NEW button in the top right corner, and select CREATE NEW APP from the dropdown.
  3. Great, now you're on the Create New App page. Here you can optionally provide an App Name. If you don't want to name it, Heroku will assign you something pretty magical. Remember, you can always change the name later, so don't get caught up here. Scroll down and click CREATE APP.
  4. Now you're on the Personal App page for your new app. You can access all the specific menu items related to this app using the top menu.
  5. NOT SO FAST! You aren't quite done...return to your terminal, take a minute to make sure you're inside the directory for you app. Run heroku git:remote -a project where project represents YOUR Heroku App name that you just created.
    • Example: heroku git:remote -a falling-wind-1624
  6. Congratulations, you made a Heroku app. Take a moment to appreciate your ability to read directions and visually navigate. If you need to return to your dashboard, simply click the grid next to the ninja profile in the top right corner. You can always access any of your Personal App's pages by clicking on it in the dashboard list. Now head to step 4!

#Part 4: Set Up Your PSQL Database#

Your database has been living a tidy but sheltered life on your local machine. It's time to give it wings so the world can interact with it by hosting it on Heroku. Let's get started.

##Command Line Heroku DB setup##

  1. Run heroku addons:create heroku-postgresql:hobby-dev. This tells heroku to add a postgres database under the free hobby-dev plan.

##Heroku Website/GUI DB Setup#

  1. You should still be on your Personal App's page, notice the tabs along the top, and go to Resources tab.
  2. In the section that says Add Ons, begin to type 'Postgres' and select the option Heroku Postgress when it appears.
  3. A modal will pop up showing that you want to add Heroku Postgres to your app on the Hobby Dev/Free Plan. Click Provision.
  4. Now, on the Resources tab, your will see your database was installed. You can access or delete this database by selecting the arrows on the far right side.
  5. Now if you click on the Settings tab, you can click Reveal Config Vars and see your DATABASE_URL. You can also include other config variables here (like API Keys). Now head to step 5!

#Part 5: Seed and Schema#

Regardless if you used Heroku or terminal to set up you DB, we need to run our files from the command line:

  1. Run cat db/myseedfile.sql | heroku pg:psql
    • HEY! YOU! make sure that you are running this command from the root of your directory, that your seed file is located in a db directory, and you insert the name of YOUR APP's seed/schema file!
  2. You enter Heroku's database shell by typing the command heroku pg:psql.
    • You can test a query here if you need to just like you do locally inside the psql shell.
  3. You can use the handy heroku pg:info command to access information about your db on heroku.
  4. Remember that heroku pg:psql lets you enter your heroku db shell from your terminal.

#Helpful Things# Lucky for you both GitHub and Heroku are well loved and well documented. If you get stuck, I guarentee the internet has the answer. Don't Freak Out.

  • Once your app has a Github repo you push to Github as you always have:...git, add, commit, and push to origin master (github)
  • To update your deployed app on Heroku....git, add, commit, and push to heroku master.

###Connecting to Github

##API KEYS## If you are storing any API Keys, passwords, or other secret key/values in a .env file, you need to configure those environment variables in Heroku as well.

  • Navigate to Heroku.com in a browser window

  • Select your application from the dashboard

  • Click on the Settings tab

  • In the Config Variables section, click on Reveal Config Vars

  • Add any key/value pairs required for your Node/Express application to work

  • Example: Let's say your .env file has the following:

    API-KEY=123456789

    Include this environment variable by entering a Config Var in Heroku where key is set to API-KEY and value is set to 123456789

  • You can also set Config Vars in the terminal with heroku config:set <KEY=VALUE>

    Example: heroku config:set API-KEY=123456789

You can read more about this from one of our competitors. I mean, no need to reinvent the wheel...

##HEROKU DOCS##

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment