Deploying a Node.js App with a Database for the Uninitialized, Part 2.

In Part 1, we got our project ready for the birthing process. Now, it’s time to head over to Heroku.

Just go for it! — Photo by Danka & Peter on Unsplash

Sign up for an account if you haven’t already. Basic accounts are free with restrictions on usage, so choose wisely. You will need to create a new app. Don’t worry about the database part just yet.

You then have two options to connect your app to Heroku. Go to the “deploy” tab in your created app and you’ll see a screen like this:

Soothing, muted colors to calm your nerves.

You can simply connect your app with Github, but Heroku Cli has a bunch of handy tools that I’m going to use shortly, so let’s install it. And create a SSH public key. I wish I could walk you through this, but I did this months ago and have forgotten. Ignore the “clone the repository” links on that image, as we have no Heroku repository yet. Soon, soon!

Remember those process.env variables from Part 1? We’re about to see them in action now. On Heroku, click on the ‘settings’ tab of your main app page and then on ‘Reveal Config Vars’. You will see DATABASE_URL filled in for you as the first key, with your new database connection string as the value. You will need to add your other process.env variables (like SESSION_SECRET) here, as the .env file has not been deployed to Heroku.

Next, let’s set up a git connection to Heroku. Navigate to the root folder of your project repository if you aren’t there already, and use this magic command, substituting ‘your-weird-appname’ with your new heroku app name:

heroku git:remote -a your-weird-appname

Congrats! In addition to your usual remote branch on Github, you now have a remote branch on Heroku. Make sure you’re on your local master branch and it is clean and updated. The next step is super easy:

git push heroku master

This takes longer than a regular git push because there is a build step happening. If you get “build successful” near the end of the wall of text, your app might be ready, but any database functionality will still need to be configured. Type heroku open in the command line and a browser window will open. If you see a landing page, great! If not, go back to your command line and type in heroku logs, which are helpfully color-coded:

I soon learned to fear the teal.

This is essentially how I fixed all of those little things that were keeping my basic site from working once deployed. But you’re not here for basic. You are here because your database is the lifeblood of your app. Let’s carry on.

Back on Heroku, navigate to the resources tab. Go to the “add-ons” section and type in ‘Postgres” to quickly find the Heroku Postgres database add on. Add the appropriate plan for your price (hobby is free).

Heroku’s gentle colors and minimalist font are still helping, right?

Once you have created it, click on it. Go to the settings tab on the next page. In the ‘Database Credentials’ section, click on ‘View Credentials.’ Here is everything you need to set up and seed your database. You’re going to be copying and pasting from here to the command line (or a text editor) soon, so set your windows up for ease of making that happen.

Warning — if you are deploying a large app or planning on making changes to your schema in the future, you may want to stop here and learn about migrations, as they are easier to set up from the get-go. I don’t have a solid enough grasp quite yet to explain them to other people. Look for a Part 4 addendum to this series in the (hopefully) near future.

We’re about to do something fun. We’re going to open up a bash terminal INSIDE of our project directory on Heroku. Type heroku run bash in your terminal. Your normal (probably jazzed up) command prompt will disappear and be replaced with the old, familiar $. Take a look around, and then navigate to the folder that contains your schema.sql. We’re about to create a bash script that loads your schema.sql into your heroku database. Whether you want to type this directly into the command prompt or create a script is up to you. I’ll just tell you what to type, and remember that you’re replacing ‘host’, ‘username’, ‘db’ and ‘password’ from the values in that View Credentials tab, and therefore your script will look much longer than this one.

psql -h host -U username -d db -w password < schema.sql

You can opt to leave off the -w flag and you will be prompted for your password after hitting enter. I did this because heroku bash does not prevent wrapping text over the command prompt when entering in a long string, and it was getting hard to read. If all went correctly, you now have tables and columns in your database.

If you have Postico, let’s configure that now to make it easier to track our success. On the entry screen, click ‘new favorite.’

We’re almost there!

Give it whatever nickname you want, keep the port as 5432, and now go back to that “View Credentials” section on Heroku and copy the host, user, database and password into these fields. Click ‘connect’, and now you can view your database the same way you can access your local ones. If the schema file was copied correctly, you should now have some tables visible. If you need to seed your tables with data for your app to function, run the same bash script as above, but replace “schema.sql” with your seed file. If you’re using connect-pg-simple, you will have to add in that extra script from the docs that loads a table from your node_modules:

psql -h host -U username -d database -w password < node_modules/connect-pg-simple/table.sql

I was dubious that it would work, but it did. It makes sense, in retrospect. Heroku builds your project from your file system and your package.json, so even though your .gitignore normally (should) excludes node_modules, they are being rebuilt from the versions listed in your package.json.

Moment of truth… go to your project’s shiny new url. Do something on your site that would cause data to be entered or changed. Go to Postico and click that refresh arrow. See data magically appear. Do a dance.

Part 3 will eventually cover database migrations. Check out Part 1 if you missed it. Kind, constructive feedback and corrections welcome. Much love to my fellow adventurers in code!