I tried the following but it doesn't work:

console.log(process.env.BASE_URL);   #output: undefined

Say my heroku app's host name is:

How should I go about getting that base_url on heroku?

I am looking for a solution to avoid to respectively uncomment/comment out the following lines:

const url = '' //production 
//const url = 'http://localhost:3000'                                //development

It has become quite annoying ..

I tried the following but it doesn't work:

console.log(process.env.BASE_URL);   #output: undefined

Say my heroku app's host name is: https://RyanCameron-app.herokuapp.com

How should I go about getting that base_url on heroku?

I am looking for a solution to avoid to respectively uncomment/comment out the following lines:

const url = 'https://RyanCameron-app.herokuapp.com/projects/eovendo' //production 
//const url = 'http://localhost:3000'                                //development

It has become quite annoying ..

• javascript
• node.js
• heroku

3 Answers 3

Backend

This checks if you are in production or development mode and assigns the according url depending on the mode.

const production  = 'https://examplePage.com';
const development = 'http://localhost:3000/';
const url = (process.env.NODE_ENV ? production : development);

Explanation: process.env.NODE_ENV will resolve to undefined if you are running on localhost production mode. And return production if you have deployed the app production mode.

Note: just because you have deployed the app doesn't necessarily mean you have changed the NODE_ENV

Frontend

Make use of the javascript window to extract the url

const url = window.location.origin;

You can use Base URL in JavaScript

// This article: // https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript

var base_url = window.location.origin; // "http://stackoverflow.com"

var host = window.location.host; // stackoverflow.com

var pathArray = window.location.pathname.split( '/' ); // ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]

Set a config variable, HEROKU_APP_NAME or HOST - something obvious. You can access that in the backend but then you can also write it out into the DOM and have your front end access it from there.