Deploying Node.js App with API credentials to Heroku with custom Google Domain

A few months back I was deploying my Node.js app to heroku with custom Google domain I had 2 errors that had me STUCK! I wanted to share how to overcome those 2 errors with anyone who’s stuck + adding custom Google Domain to your heroku app. Hope it saves you some time and helps you #GetUnstuck #WorkSmarter

Errors:

1. apiKey must be defined can't read API Key error.
2. Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch. Below is the heroku log that drove me to a rabbit hole of troubleshooting (ps. it isn't a favicon.ico issue).

at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=[herokuappurl.herokuapp.com] request_id=79537946-df82–479d-ba7e-accf486764e3 fwd="66.41.109.132" dyno= connect= service= status=503 bytes= protocol=https

I would highly recommend to download Heroku CLI following these steps : https://devcenter.heroku.com/articles/heroku-cli

sidenote: make sure you have this start script in your package.json
"start": "node server.js"(or whatever name of your server file ex app.js)

Solving Error 1:

Make sure to store your API_KEY in .env file & add that to your .gitignore file for security purposes:

1. npm install dotenv
2. create .env file and store API_KEY = "abcdef123456789" &
3. in your mail.js file (where ever you need to call your API_KEY) add require('dotenv').config();
4. use process.env to call API_key :

auth: {
 api_key: process.env.API_KEY 
 }

Once you download the heroku CLI follow these steps-

1. $ heroku login (Press any key to open up the browser to login to heroku)
2. $ heroku config:set API_KEY="your_api_key" --app your_heroku_app_name (make sure the format is FOO=bar spacing is important)

terminal response: Setting API_KEY and restarting ⬢ your_heroku_app_name… done, v10 API_KEY: abcdef123456789

1. $ heroku config --app your_heroku_app_name
2. Restart your app $ heroku restart --app your_heroku_app_name This should solve your apiKey must be defined error. Now moving on to error 2.

Solving Error 2:

(shoutout to Will Madison from Blacks in Technology-BIT for helping me with this error)

The main error message is > Web process failed to bind to $PORT within 60 seconds of launch

In heroku the PORT number has to be read dynamically not statically since heroku sets the PORT variable see https://devcenter.heroku.com/articles/runtime-principles#web-servers

1. in server.js file change const PORT = 3000; to const PORT = process.env.PORT || 3000;
2. in server.js also change app.listen(PORT, () => { log('Server is starting on PORT, ', 3000)}); to app.listen(PORT, () => { log('Server is starting on PORT, ', process.env.PORT || 3000)});
3. Make sure to push code changes to github (or whichever deployment method you picked on heroku) and wait for build and deployment to complete.

In your local environment your port localhost:3000 should still work and in heroku test it with the following:

• open heroku Run console

• run heroku run bash
• when console opens up run your start script $ node server.js
• response should be Server is starting on PORT, 52014 (random PORT number heroku choses)
• click Open app & your app should appear.

Adding custom Google Domain to Heroku:

1. On heroku go to yourApp and navigate to Settings

2. Scroll down to the Domains section > click Add Domain & type domain name (make sure to include www) ex: www.[examplesite].com > click Next > make sure to copy the DNS Target heroku provides
   

3. Head over to google domains and navigate to DNS section then scroll down to Synthetic records

• Subdomain forward should be selected in the dropdown
• type @ in subdomain field
• in Destination URL field type your domain name www.[examplesite].com (make sure to include www )
• select the below options in photo
• Click Add

4.Scroll to Custom resource records
removed @ and add www

• chose CNAME in dropdown menu
• leave 1h as it is
• add DNS target that you copied from heroku in Domain name
• click Add

Back to heroku CLI:

(to test if domain name configured correctly)

• $ heroku domains — app your_herokue_app_name (your heroku Domain & custom Domain should appear in terminal)
• $ host www.[your_custom_domain].com (your custom domain name is an alias for DNS Target should appear in terminal along with a few DNS addresses)

Head over to your custom domain name and your Node.js App should APPEAR! Congratulations!

(sometimes custom Google domains takes about 24–48hrs to appear, for me it appeared after a few hours)