Pre-rendering the "Details" HTML page first to display external fetched data

After deploying the production version to Heroku, when refreshing or GET requesting the 'details' page of any book (/details/9958 route for example), I was stuck with a plain, white screen with only a JSON object of the API response data for that book. My Express.js routes were catching all of the GET requests before React could load the index.html page, therefore the application had no webpage to display the API data onto.

I wanted my HTML to be pre-rendered in order for the fetched GoodReads API and database data to successfully "hydrate" and display on the page.

To remedy this, I found a work-around on my server-side using the Express.js res.sendFile(path, options) method to pre-render the template index.html file as the path argument, along with the API response data object in the options argument.

// detailsRouter.js
let options = {
  headers: {
    'result': (results from GoodReads API fetch),
    'comment_list': (comments from the database fetch),
    'bookinfo': (book info from the database fetch)
  }
}

res.sendFile(path.join(__dirname, "../client/build/index.html"), options);

Deploying to Heroku with the Heroku Postgres database add-on

Before finally deploying the application on Heroku for production, I installed the Heroku Postgres add-on to host the PostgreSQL database for my users, books, and reviews. I made sure to include the DATABASE_URL environment variable provided by Heroku to link to the app's process.env and used conditional boolean logic to select either "deployment" or "production" mode configuration.

This ensured the application was using either the "development mode" local database, or the "production mode" heroku hosted database.

// db.js
const devConfig = {
  user: process.env.PG_USER,
  host: process.env.PG_HOST,
  database: process.env.PG_DATABASE,
  password: process.env.PG_PASSWORD,
  port: process.env.PG_PORT
}

const prodConfig = {
  connectionString: process.env.DATABASE_URL // <-- heroku add-on Postgres database URL
}

const pool = new Pool(process.env.NODE_ENV === "production" ? prodConfig : devConfig)