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

Rukia — Thu, 30 Jul 2020 14:02:41 +0000

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:

apiKey must be defined can't read API Key error.
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:

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

auth: { api_key: process.env.API_KEY }

Once you download the heroku CLI follow these steps-

$ heroku login (Press any key to open up the browser to login to heroku)
$ 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

$ heroku config --app your_heroku_app_name
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

in server.js file change const PORT = 3000; to const PORT = process.env.PORT || 3000;
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)});
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:

On heroku go to yourApp and navigate to Settings
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
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)

Working Smarter: 5 Steps To Getting Unstuck with Rukia Sheikh-Mohamed

Rukia — Thu, 23 Jul 2020 11:54:27 +0000

I am a software engineer based in the Twin Cities, MN who is passionate about all things tech. During my day job I work as full-stack dev at Soona. I enjoy talking about tech at local and national events/conferences, creating cool stuff on the side, and writing tech articles to share useful information and tips. During my free time I enjoy spending time with my baby boy, traveling the world, and creating fun DIYs.

Beginning:

A personal story from my first tech job that change my outlook on ""there is no such thing as a dumb question.""
Sharing the story on how the types of questions I asked negatively affected my superior's perception of my tech skills.
State what my talk will consist of: addressing 5 steps with examples of asking effective questions on the internet(stack overflow, medium, google in general) and to team members.

Middle:

Walk through an example of a technical problem that might get you stuck (with code samples) and how to go through the 5 steps to asking the right questions to get to a solution.
For example 1. Start by doing your own troubleshooting (through the internet, StackOverflow, Medium, Youtube, etc, reading error messages).
2. Make sure question is specific for example instead of asking ""why am i getting a migration error during rollback-rails"" to ""how to correctly rollback migration column in rails"".
Go through each of the 5 steps and finally get to the working solution.

End:

Summarizing 5 steps and take aways
Ending with story from personal experience how using these steps have helped me work smarter and decreased levels of imposter syndrome by not feeling my questions were dumb questions

Here is a download link to the talk slides (PDF)

This talk will be presented as part of CodeLand:Distributed on July 23. After the talk is streamed as part of the conference, it will be added to this post as a recorded video.

Glossary:

Ruby on Rails: a backend language for web applications
VueJs: an open-source javascript framework
rspec: a test tool written in ruby on rails
capybara: (not the animail 😜) a library that allows us to easily simulate how a user interacts with our app
devise: a rails gem used for authentication
system test: allows us to test user interaction for various test cases
factory_bot: using as a fixtures replacement, which means it helps us produce test data

DEV Community: Rukia