title: How can i get Client IP Address from React App that run on Express.JS
body: <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>