Step 4: Deploy to Heroku

Step 4: Deploy to Heroku

Now it’s time to deploy our application to production (i.e. Heroku’s cloud servers)

a. Create a “Heroku app”

  • In your terminal (from within your project folder) run the following command to create a Heroku app

    $ heroku create
    
  • This will result in output that looks like the following:

inline

  • heroku create did the following:

    • Added a new remote repository for your project that points to Heroku’s servers (we’ll soon see that Heroku uses to the git toolchain, similar to Github, for deployment)

    • Provides you with an url on their servers, this is the url where your application will live when it is deployed


b. Make Heroku aware of your application’s environment variables

When your application is deployed to Heroku, it will live on their servers. In order for Heroku to recognize process.env.GIPHY_API_KEY line in app.js, we will need to let Heroku know what GIPHY_API_KEY represents

The Heroku CLI makes it easy to add “production” environment variables for your app to reference while on running on Heroku’s servers

  • Run following command (from within your project folder) to add “production” environment variables that your app will reference when it’s deployed to Heroku (see docs)

    $ heroku config:set GIPHY_API_KEY=add_your_api_key_here
    
  • If you ever need to confirm or review your environment variables set on Heroku (for your app) you can run the following command:

    $ heroku config
    


c. Stage and Commit any recent changes to codebase

  • Stage and Commit any uncommitted changes

    $ git add . && git commit -m "add your commit message here"
    

You’ll need to do this step before every deploy to ensure any recent changes to your app’s codebase are sent to Heroku; remember Heroku uses to the git toolchain (similar to Github) for deployment


d. Deploy app to Heroku

Now it’s time to push our code to Heroku

  • Run the following command (from within the project folder) to deploy your application to Heroku

    $ git push heroku master
    

inline

  • Run the following command to open your application’s heroku url in your computer’s browser

    $ heroku  open
    

Alternatively, you can open a browser and navigate to the Heroku url the old fashioned way


Congrats!

You’ve successfully deployed your application to Heroku!


Troubleshooting

If you are encountering errors, try to following:

  • Ensure that you have staged and committed your latest changes, Heroku uses the git toolchain to deploy your application; it will only deploy code that has been committed

  • View the heroku logs to help determine the root cause of the error

    • In another terminal, window (within the project folder) run the following command to view the heroku logs for your app

      $ heroku logs --tail