How to access window variable in Javascript object?

Question

Is the below code correct ? I want to access the window variable in a javascript object.

export const configs={
  //firebase configuration
  apiKey: window._env_.API_KEY,
  projectId: window._env_.PROJECT_ID,
  messagingSenderId: window._env_.MESSAGING_SENDER_ID,
  backendURL: window._env_.BACKEND_URL
}

Where and how you have set these variables? Can you also show that part. Just put xxxx in place of actual API_KEY value just to be safe. — palaѕн
– palaѕн, Commented Mar 14, 2020 at 12:54
Really depends on the context of this code. Syntax-wise it’s at least not invalid. — Felix Kling
– Felix Kling, Commented Mar 14, 2020 at 15:01

helloitsjoe · Accepted Answer · 2020-03-14 13:02:35Z

If this code is executed in a browser, window is available as a global object. However, if this code is executed in a node environment (server side), window will be undefined.

Here's one way to handle this if your code will execute both server-side (node environment) and client-side (browser environment):

if (typeof window !== 'undefined') {
  configs = {
    //firebase configuration
    apiKey: window._env_.API_KEY,
    projectId: window._env_.PROJECT_ID,
    messagingSenderId: window._env_.MESSAGING_SENDER_ID,
    backendURL: window._env_.BACKEND_URL
  }
} else {
  // handle server-side logic here
}

If there's no need for this to execute in the browser, it would be simplest to just use process.env instead of setting these variables on the window. If you do need these variables in both places (and they're coming from process.env), this might be another solution:

const env = typeof window === 'undefined' ? process.env : window._env_;

export const configs = {
  //firebase configuration
  apiKey: env.API_KEY,
  projectId: env.PROJECT_ID,
  messagingSenderId: env.MESSAGING_SENDER_ID,
  backendURL: env.BACKEND_URL
}

ismail ERDEN · Accepted Answer · 2020-03-14 18:01:14Z

You should create a new js file, then write as below. File name is appsettings.js

window.appSettings = {
    apiKey: '${REACT_API_KEY}',
    projectId: '${REACT_PROJECT_ID}',
    messagingSenderId: '${REACT_SENDER_ID}',
    backendURL: '${REACT_BACKEND_URL}'
};

env files

REACT_API_KEY=value
REACT_PROJECT_ID=value
REACT_SENDER_ID=value
REACT_BACKEND_URL=value

Public/index.html

<script src="http://localhost/appsettings.js?v={version}"></script>
    <script>
        window.appSettings.apiKey= '%REACT_API_KEY%';
        window.appSettings.projectId= '%REACT_PROJECT_ID%';
        window.appSettings.messagingSenderId= '%REACT_SENDER_ID%';
        window.appSettings.backendURL= '%REACT_BACKEND_URL%';
    </script>

Where you want to use, write this code

window.appSettings.apiKey

Not need declare another place because it declare index.html

Collectives™ on Stack Overflow

How to access window variable in Javascript object?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related