Changes for development/production environment

Author: stefaluc

app/src/App.css

@@ -8,12 +8,6 @@
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
-#init {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 #top {
   display: flex;
   height: 80%;

app/src/App.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 
 import Message from './components/Message';
+import Login from './components/Login';
 import './App.css';
 
 let socket = null;
+const isDevelopment = process.env.NODE_ENV === 'development'
 
 class App extends Component {
   constructor(props) {
@@ -27,8 +29,10 @@ class App extends Component {
       return;
     }
 
+    const location = isDevelopment ? 'localhost:8081' : document.location.host;
+    const url = `${document.location.protocol.replace("http", "ws")}//${location}/ws?name=${input}`;
     // init client websocket
-    socket = new WebSocket(`${document.location.protocol.replace("http", "ws")}//${document.location.host}/ws?name=${input}`);
+    socket = new WebSocket(url);
     socket.onopen = (event) => {
       console.log('Opened socket');
     };
@@ -96,13 +100,7 @@ class App extends Component {
     return (
       <div id="box-main">
         {this.state.init &&
-          <div id="init">
-            <form onSubmit={this.participantSubmit}>
-              <input type="text"
-                     placeholder="Enter name here..."
-                     id="participant-form" />
-            </form>
-          </div>
+          <Login participantSubmit={this.participantSubmit} />
         }
         {!this.state.init &&
           <div style={{width: "100%", height: "100%"}}>

app/src/components/Login.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import '../styles/Login.css';
+
+const Login = (props) => {
+  return (
+    <div id="init">
+      <form onSubmit={props.participantSubmit}>
+        <input type="text"
+          placeholder="Enter name here..."
+          id="participant-form" />
+      </form>
+    </div>
+  );
+}
+
+export default Login;

app/src/styles/Login.css

@@ -0,0 +1,5 @@
+#init {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

main.go

@@ -20,8 +20,13 @@ func main() {
 		wsHandler(hub, w, r)
 	})
 	// start server
-	port := ":" + os.Getenv("PORT")
-	fmt.Println(port)
+	var port string
+	if os.Getenv("GO_ENV") == "PRODUCTION" {
+		// let heroku set port in production
+		port = ":" + os.Getenv("PORT")
+	} else {
+		port = ":8081"
+	}
 	err := http.ListenAndServe(port, nil)
 	if err != nil {
 		fmt.Println("ListenAndServeError:", err)