title: Reading an environment variable in react which was set by docker
body: <p>I am using docker to build my react application and deploy it in nginx.</p>
  
  <p>I have set an environment variable in docker-compose.yml</p>
  
  <pre><code>version: '2'
  services:
    nginx:
      container_name: ui
      environment:
        - HOST_IP_ADDRESS= xxx.xxx.xx.xx
      build:
        context: nginx/
      ports:
        - "80:80"
  </code></pre>
  
  <p>After the docker container is created I can see <code>hi</code> when I <code>echo</code> the variable inside the container.</p>
  
  <p>However, when I am trying to read it in react using <code>process.env.HOST_IP_ADDRESS</code> it is logging <code>undefined</code>.</p>
  
  <p>I read in a blogpost somewhere that the env variables can be only accessed in production environment. Since, I am building the app and deploying it in nginx, I should be able to access it, but for some reason I am not able to read it.</p>
  
  <p>Am I doing something fundamentally wrong here. If so, please let me know a solution. I am not a react expert, I am just managing someone else's code. </p>
  
  <p>UPDATE:</p>
  
  <p>The Dockerfile looks as follows:</p>
  
  <pre><code>FROM node:8 as ui-builder
  
  WORKDIR /home/ui
  
  COPY helloworld .
  
  RUN npm install
  
  RUN npm run build
  
  FROM nginx
  COPY --from=ui-builder /home/ui/build /usr/share/nginx/html
  CMD ["nginx", "-g", "daemon off;"]
  </code></pre>
  
  <p>The React Component snippet is as follows:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class HelloWorld extends Component {
    render() {
      console.log(process.env.HOST_IP_ADDRESS);
      return (
        &lt;div className="helloContainer"&gt;
          &lt;h1&gt;Hello, world!&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default HelloWorld;
  </code></pre>