Dynamically choose socket.io URL to connect to

3 files changed, 20 insertions, 4 deletions

diff --git a/README.md b/README.md
index 396c87d6..ae90ee5a 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,22 @@
 The user-facing component of the OpenDC stack, allowing users to build and interact with their own (virtual) datacenters. Built in *React.js* and *Redux*, with the help of `create-react-app`.
 
 
+## Get Up and Running
+To get started, you'll need the [Node.js environment](https://nodejs.org) and the [Yarn package manager](https://yarnpkg.com). 
+
+```bash
+yarn
+yarn start
+```
+
+This will start a development server running on [`localhost:3000`](http://localhost:3000), watching for changes you make to the code and rebuilding automatically when you save changes.
+
+To compile everything for camera-ready deployment, use the following command:
+
+```bash
+yarn build
+```
+
 ## Architecture
 
 The codebase follows a standard React.js structure, with static assets being contained in the `public` folder, while dynamic components and their styles are contained in `src`. The app uses client-side routing (with `react-router`), meaning that the only HTML file needed to be served is a `index.html` file.
@@ -35,4 +51,4 @@ Almost all state is kept in a central Redux store. State is kept there in an imm
 
 ### API Interaction
 
-The web-app needs to pull data in from the API of a backend running on a server. The functions that call routes are located in `src/api`. The actual logic responsible for calling these functions is contained in `src/sagas`. These API fetch procedures are written with the help of `redux-saga`. Learn more about this way of getting API data in Redux on [their official documentation](https://redux-saga.js.org/).
+The web-app needs to pull data in from the API of a backend running on a server. The functions that call routes are located in `src/api`. The actual logic responsible for calling these functions is contained in `src/sagas`. These API fetch procedures are written with the help of `redux-saga`. The [official documentation](https://redux-saga.js.org/) of `redux-saga` can be a helpful aid in understanding that part of the codebase.
diff --git a/public/index.html b/public/index.html
index 03ea36d7..9d4b4280 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,8 +15,8 @@
     <!-- OpenGraph meta tags -->
     <meta property="og:title" content="OpenDC: Collaborative Datacenter Simulation and Exploration for Everybody">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="/img/logo.png">
-    <meta property="og:url" content="/">
+    <meta property="og:image" content="http://opendc.org/img/logo.png">
+    <meta property="og:url" content="http://opendc.org/">
     <meta property="og:description"
           content="OpenDC provides collaborative online datacenter modeling, diverse and effective datacenter
           simulation, and exploratory datacenter performance feedback.">
diff --git a/src/api/socket.js b/src/api/socket.js
index 86422808..298cf948 100644
--- a/src/api/socket.js
+++ b/src/api/socket.js
@@ -6,7 +6,7 @@ let requestIdCounter = 0;
 const callbacks = {};
 
 export function setupSocketConnection(onConnect) {
-    socket = io.connect("http://localhost:8081");
+    socket = io.connect(window.location.protocol + "//" + window.location.hostname + ":8081");
     socket.on("connect", onConnect);
     socket.on("response", onSocketResponse);
 }