title: Can't access gatsby environment variables on the client side
body: <p>I set up .env file and gatsby-config.js as below.</p>
  
  <pre class="lang-none prettyprint-override"><code>// .env.development
  GATSBY_API_URL=https://example.com/api
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// gatsby-config.js
  console.log(process.env)
  ...
  ...
  </code></pre>
  
  <p>Although when to run <code>gatsby develop</code>, it shows all env vars including <code>GATSBY_API_URL: 'https://example.com/api'</code>,
  but there is no env vars on a browser.</p>
  
  <pre class="lang-js prettyprint-override"><code>// client side
  console.log(process.env)  // =&gt; this will return {}  empty object
  </code></pre>
  
  <p>I think I followed <a href="https://www.gatsbyjs.org/docs/environment-variables/" rel="noreferrer">https://www.gatsbyjs.org/docs/environment-variables/</a> as it says, and added <code>GATSBY_</code> prefix to the var.</p>
  
  <p>Is there a reason why I don't see the env var on the client side?</p>
  
  <pre class="lang-none prettyprint-override"><code>gatsby info --clipboard
  
    System:
      OS: macOS Sierra 10.12.6
      CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
      Shell: 5.2 - /bin/zsh
    Binaries:
      Node: 11.2.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    Browsers:
      Chrome: 70.0.3538.110
      Firefox: 63.0.3
      Safari: 12.0.2
    npmPackages:
      gatsby: ^2.0.61 =&gt; 2.0.61
      gatsby-image: ^2.0.22 =&gt; 2.0.22
      gatsby-plugin-google-analytics: ^2.0.8 =&gt; 2.0.8
      gatsby-plugin-manifest: ^2.0.11 =&gt; 2.0.11
      gatsby-plugin-no-sourcemaps: ^2.0.1 =&gt; 2.0.1
      gatsby-plugin-nprogress: ^2.0.7 =&gt; 2.0.7
      gatsby-plugin-react-helmet: ^3.0.4 =&gt; 3.0.4
      gatsby-plugin-sass: ^2.0.5 =&gt; 2.0.5
      gatsby-plugin-sharp: ^2.0.14 =&gt; 2.0.14
      gatsby-plugin-styled-components: ^3.0.4 =&gt; 3.0.4
      gatsby-plugin-typescript: ^2.0.2 =&gt; 2.0.2
      gatsby-plugin-typography: ^2.2.2 =&gt; 2.2.2
      gatsby-plugin-webpack-bundle-analyzer: ^1.0.3 =&gt; 1.0.3
      gatsby-source-filesystem: ^2.0.10 =&gt; 2.0.10
      gatsby-transformer-sharp: ^2.1.9 =&gt; 2.1.9
      gatsby-transformer-yaml: ^2.1.6 =&gt; 2.1.6
    npmGlobalPackages:
      gatsby-cli: 2.4.5
  </code></pre>