title: Using socket.io with React and Google App Engine
body: <p>I've created a Node(express)/React app that uses socket.io and Redux's store as follows:</p>
  
  <pre><code>import io from "socket.io-client";
  import * as types from "../actions/types";
  import { cancelReview, startReview } from "./actions";
  
  const socket = io("http://localhost:8080", {
    transports: ["websocket"]
  });
  
  export const init = store =&gt; {
    socket.on("connect", () =&gt; {
      console.log("websocket connection successful...");
      socket.on("cancelReview", (id, name) =&gt; {
        cancelReview(store, id, name);
      });
      socket.on("startReview", (id, name) =&gt; {
        startReview(store, id, name);
      });
    });
  };
  </code></pre>
  
  <p>This function is then called from store.js as follows:</p>
  
  <pre><code>import { createStore, applyMiddleware } from "redux";
  import { composeWithDevTools } from "redux-devtools-extension/developmentOnly";
  import thunk from "redux-thunk";
  import rootReducer from "./reducers";
  import { init } from "./socket/socket";
  
  // Initial state
  const initialState = {};
  
  // Middleware
  const middleware = [thunk];
  
  const store = createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
  );
  
  init(store);
  
  export default store;
  </code></pre>
  
  <p>Everything works fine on my local machine, but I'm now realizing after doing some research that this will not work on Google's app engine because instead of <code>http://localhost:8080</code> I need to get the actual IP address from Google's metadata server and pass in <code>EXTERNAL_IP + ":65080"</code>. So I'm able to get the external IP in my express app as follows:</p>
  
  <pre><code>const METADATA_NETWORK_INTERFACE_URL =
    "http://metadata/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip";
  
  function getExternalIp(cb) {
    const request = axios.create({
      baseURL: METADATA_NETWORK_INTERFACE_URL,
      headers: { "Metadata-Flavor": "Google" }
    });
    request
      .get("/", (req, res) =&gt; {
        return cb(res.data);
      })
      .catch(err =&gt; {
        console.log("Error while talking to metadata server, assuming localhost");
        return cb("localhost");
      });
  }
  </code></pre>
  
  <p>However, if I pass this value into my render function as seen below, React creates a prop to pass into components (as far as I understand from the info I could find):</p>
  
  <pre><code>  app.get("*", (req, res) =&gt; {
      getExternalIp(extIp =&gt; {
        res.render(path.resolve(__dirname, "client", "build", "index.html"), {
          externalIp: extIp
        });
      });
  </code></pre>
  
  <p>I am not able to access this value via the window global. So my question is, how do I access this external IP from my store initialization, since it is not an actual React component?</p>
  
  <p>Thanks in advance.</p>