Answers.Body: <p>The .env file is on the server and javascript is running in the client so you need to pass it through to javascript in your twig template inside a script tag.</p>
  
  <pre><code>{% set env = getenv('ENVIRONMENT') %}
  &lt;script&gt;
      var myVariable = '{{ env|e('js') }}'
  &lt;/script&gt;
  </code></pre>
  
  <p>You probably don't need to escape it like in my example above, but good practice anyway. If you are then using the variable in that script you are good to go. From elsewhere on the page you can get the variable using:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', () =&gt; {
      const myVar = window.myVariable;
  });
  </code></pre>
  
  <p>Great article about this and more <a href="https://cruftlesscraft.com/passing-data-from-twig-to-javascript" rel="nofollow noreferrer">https://cruftlesscraft.com/passing-data-from-twig-to-javascript</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-06T13:17:31.240Z
Answers.Text: The file I want to have the .env variables is not a twig template. That file is loaded on the head of the page, and I would like to avoid having a script tag there to set a global variable on the page. for a one time use. Plus if someone changes the order the variable might get lost and that's also not a good thing.
Answers.UserDisplayName: Tyrannogina regina
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-04T12:39:37.470Z
Answers.LastActivityDate: 2019-01-04T12:50:22.007Z
Answers.LastEditDate: 2019-01-04T12:50:22.007Z
Answers.UserDisplayName: JollyR
Body: <p>I see a lot of information about using environment variables on php files or twig templates, but I want to use them on javascript. I need to pass the environment, located on the <code>.env</code> file, to the Sentry init, located on <code>assets/js/app.js</code>.</p>
  
  <p>How could I safely access this? Do I need to install dotenv or similar or is there a 'Craft way' of doing this?</p>
  
  <p>I would appreciate any help on how to do this, or maybe a suggestion for a different approach.</p>
  
Tags: <craft3><environmentvariables>
Title: How can I access environment variables from a javascript file in Craft 3?
ThreadText: # How can I access environment variables from a javascript file in Craft 3?
  
  (Asked by: username_0 on 2019-01-04)
  
  I see a lot of information about using environment variables on php files or twig templates, but I want to use them on javascript. I need to pass the environment, located on the `.env` file, to the Sentry init, located on `assets/js/app.js`.
  
  How could I safely access this? Do I need to install dotenv or similar or is there a 'Craft way' of doing this?
  
  I would appreciate any help on how to do this, or maybe a suggestion for a different approach.
  
  **Tags:** craft3, environmentvariables
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2019-01-04. Score: 3
  
  The .env file is on the server and javascript is running in the client so you need to pass it through to javascript in your twig template inside a script tag.
  
  ```
  {% set env = getenv('ENVIRONMENT') %}
  <script>
      var myVariable = '{{ env|e('js') }}'
  </script>
  
  ```
  
  You probably don't need to escape it like in my example above, but good practice anyway. If you are then using the variable in that script you are good to go. From elsewhere on the page you can get the variable using:
  
  ```
  document.addEventListener('DOMContentLoaded', () => {
      const myVar = window.myVariable;
  });
  
  ```
  
  Great article about this and more <https://cruftlesscraft.com/passing-data-from-twig-to-javascript>
  
  > **Comments:**
  > **username_0**: The file I want to have the .env variables is not a twig template. That file is loaded on the head of the page, and I would like to avoid having a script tag there to set a global variable on the page. for a one time use. Plus if someone changes the order the variable might get lost and that's also not a good thing.  
  
  ---
  
  