'how to get environment in javascript file in rails app

hello ive been trying to get the current environment in rails but i think im doing something wrong with my javascript, but i dont seem to know what. in my application.js i have...

var rails_env = '<%= Rails.env -%>';
alert(rails_env);
alert(rails_env.value);
if(rails_env == 'development'){
    alert('inside if')
    var indexName = "idx";
}
else{
    alert('inside else')
     var indexName = "idx_production";
}

it always goes into my else statement even if i am in development mode. what am i doing wrong? thank you

how to get environment in javascript file in rails app



Solution 1:[1]

You dont need to pass it into your javascript file directly. You can do it in the erb view file like this for example:

<script>
  window._rails_env = "<%= Rails.env %>"
</script>

or better this:

<%= javascript_tag do %>
  window._rails_env = "<%= Rails.env %>"
<% end %>

or the best (IMHO) this:

<body data-env="<%= Rails.env %>">
  ...

and then:

var railsEnv = $('body').data('env')

Warning:

Dumping your entire Rails environment in script like this will almost certainly compromise your web app's security! As Micha? Zalewski mentions in a comment below, your Rails application has sensitive information in its environment, like database credentials, API keys, application secrets for signing and encrypting cookies etc.

Solution 2:[2]

For me, environment.js was located in /config/webpack/environment.js

Solution 3:[3]

If you're using Webpack in your Rails app there's a much easier solution.

TLDR: Use either process.env.RAILS_ENV or process.env.NODE_ENV

In one of your webpack-compiled javascript files:

console.log('Rails env: ', process.env.RAILS_ENV);
console.log('Node env: ', process.env.NODE_ENV);

Full solution you can copy-paste is below. Documentation for process.env.

As pointed out in u/matthew's answer, there are risks in using Rails.env in erb files. Similarly, if NODE_ENV is not configured properly on your production server, you may have unexpected or dangerous behaviour. I'd suggest implementing a small module that checks for both variables, and throws an error if they don't match.

Full Solution

  • Implement a small module that checks both environments
  • Import this module where needed

javascript/environment/index.js

/* global process */

const railsEnv = process.env.RAILS_ENV;
const nodeEnv = process.env.NODE_ENV;

if (!railsEnv || railsEnv !== nodeEnv) {
  const errorMsg = `RAILS_ENV (${railsEnv}) does not match NODE_ENV (${nodeEnv})`;
  throw new Error(errorMsg);
}

export default railsEnv;

Now use anywhere you'd like, such as in a React component.

javascript/components/MyComponent

import env from '../../environment';

class PaintTheKeyboard extends React.Component {
  constructor(props) {
    super(props);
    console.log(env);
  }
  ...
  render() { ... }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 KaptajnKold
Solution 2 stevec
Solution 3 Matt