How can i get Client IP Address from React App that run on Express.JS
<p>I use <a href="https://github.com/mxstbr/react-boilerplate" rel="nofollow noreferrer">this</a> react boilerplate. It's running on express web server.</p>

<p>I can get client IP address in JavaScript file <a href="https://github.com/mxstbr/react-boilerplate/blob/master/server/middlewares/frontendMiddleware.js#L35" rel="nofollow noreferrer">that</a> process in server</p>

<p>But I wonder how can I pass that value to React Frontend script?</p>

<p>Please shed me some light.</p>

<p><strong>UPDATE</strong>
Now, i can use it by using javascript template engine and replace IP before rendering.
Here is the code</p>

<pre><code>  app.get('*', (req, res) =&gt; {
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) =&gt; {
      if (err) {
        res.sendStatus(404);
      } else {
        const compileStr = Mustache.render(file.toString(), { userIpAddress: ip });
        res.send(compileStr);
      }
    });
  });
</code></pre>

<p>However, in production, it's using <code>sendFile()</code> and i cannot get <code>fs</code> module on production :-(</p>

<pre><code>const addProdMiddlewares = (app, options) =&gt; {
  const publicPath = options.publicPath || '/';
  const outputPath = options.outputPath || path.resolve(process.cwd(), 'build');

  // compression middleware compresses your server responses which makes them
  // smaller (applies also to assets). You can read more about that technique
  // and other good practices on official Express.js docs http://mxs.is/googmy
  app.use(compression());
  app.use(publicPath, express.static(outputPath));

  app.get('*', (req, res) =&gt; res.sendFile(path.resolve(outputPath, 'index.html')));
};
</code></pre>