In my last post, I talked about deploying to Heroku. We deployed our app, and it only contained the text “Hello World”—but we accomplished the mantra of deploying early and often. Now it’s time to finish creating the bookstore, and using the Heroku Postgres plugin.
To place all of the emphasis on deploying to Heroku, we are going to fast-forward to where we get a somewhat working bookstore in place (If you want to look at the code and the schema, here is a link to the repo). Let’s take a look at the current state of our application:
We have a basic bookstore, with a navbar, some books to click on, an Add a Book button, and a search function. We also have a little pagination going. Let’s see if I can get some book info when clicking on a book:
It looks like the database is giving me some key information, including author (I should have artist too, since it’s a comic book, but I’ll have to save that for another time); genre; a link to edit the entry (this is meant to be an admin-operated bookstore, so this is not quite ready for a client yet), and a small shopping cart.
At this stage, since I am getting some data from the database, I feel comfortable pushing this to production for another deployment. To do this, I need to take an additional step, which is setting up a Heroku database, and migrating the local data to this new remote database. It’s time to use an addon!
In this addon screen, we are going to simply search for Postgres, which will give us the Heroku Postgres addon to select. Once we provision, and thus agree to the terms, we have an addon, but we’re not done yet.
Now that we have the addon as a resource to our app, we have to migrate the data before pushing up the code. Thankfully, Heroku CLI has commands for this addon, so we can maximize our use of the terminal for this migration.
For a little step-by-step understanding, the database that Heroku Postgres creates is one much like your local. You can activate a session, like you would with a psql command, except now you add a Heroku CLI command to that:
Phillips-McBook-Pro: spidey-books philliplorenzo$ heroku pg:psql → Connecting to postgresql - slippery - 98421 Psql (9.6.3, server 9.6.2) SSL connection (protocol: TLSv1.2, cipher : ECDHE - RSA- AES256-GCM-SHA384, bits: 256, compression: off) Type “help” for help safe-tundra-39863::DATABASE=>
The heroku pg command allows us to log in to the database like a normal psql session. Also, notice that the app name that was created by Heroku is displayed as the “user.” This tells me that the connection is going to be seamless between the database and the app. More importantly, we did not have to configure this connection at all.
The question now becomes: Will migration be difficult, time-consuming, and full of configuration? Perhaps not:
Phillips- MacBook-Pro: spidey-books philliplorenzo$ heroku pg:push spidey_books heroku-cli: Pushing spidey_books ---> postgresql-slippery-98421
Heroku pg:push and then your local database name starts the statement; then, you enter your Heroku database name, then “–app” and finally, the Heroku app name. There is a great way for you to get all of that information. All we have to do is click on the addon in the resources page, which will take us to a datastore page—which has a link to the database credentials page:
In this page (which I can’t show you all of), there is this:
This is a great piece of information! Again, in order to execute the migration, simply replace the psql with push, and then your local database name. Once that happens, Heroku does its work. If we were able to successfully push this data, we should see some data in the datastore screen:
I can take a look and see that I have 20 rows and 5 tables in compliance, and it’s looking good to go. Let’s try to deploy this! First, I want to be sure that I am not pushing a master quite yet. I am still setting up the app to work with the database, but I’m not comfortable merging my current branch to master. What I can do is push this current branch called “front-end-setup” to the production build using this command:
Phillips-MacBook-Pro: spidey-books philiplorenzo$ git push heroku front-end-setup:master Counting objects: 9, done. Delta compression using up to 4 threads. Compressing objects: 100% (7/7), done. Writing objects: 100% (9/9), 536.66 KiB | 0 bytes/s. done.
It’s like git push heroku master, but, we add the local branch name “front-end-setup” before master. This is not necessarily a merge, since your GitHub repository does not get affected by this push. Pushing branches is a great way to test concepts, ideas, and versions before committing a master to master deploy.
To https://git.heroku.com/safe-tundra-39863.git 0babcb9..b3ea947 front-end-setup -> master
I feel good about the deploy, since it is on a branch that I’m working on. I did make a few small frontend changes. Let’s see what the current deployed version looks like (I did make it a little mobile responsive):
That’s it! We have successfully deployed a simple bookstore app to Heroku. It’s not perfect, or close to it, but, thanks to early deployment, we can meet development and production challenges head-on with confidence!