heroku deploy

backend/server.js

@@ -12,18 +12,20 @@ app.use(express.json());
 app.set('trust proxy', 1)
 app.use(cors({
   origin: [
+    'http://localhost:5000',
+    'https://localhost:5000',
     'http://localhost:3001',
   ],
   credentials: true,
 }))
-const PORT = 3000|| process.env.PORT;
+const PORT = process.env.PORT;
 
 //DATABASE CONFIG
 const mongoose = require("mongoose");
 mongoose.set('useFindAndModify', false);
-const CONNECTION_URI = require("./credentials.js").MONGODB_URL;
+//const CONNECTION_URI = require("./credentials.js").MONGODB_URL;
 
-mongoose.connect(process.env.MONGODB_URL || CONNECTION_URI, {
+mongoose.connect(process.env.MONGODB_URL, {
     useNewUrlParser: true,
     useUnifiedTopology: true
   })
@@ -35,7 +37,7 @@ mongoose.connect(process.env.MONGODB_URL || CONNECTION_URI, {
 //SESSION CONFIG]
 var MongoDBStore = require('connect-mongodb-session')(session);
 var store = new MongoDBStore({
-  uri: CONNECTION_URI,
+  uri: process.env.MONGODB_URL,
   collection: 'sessions'
 });
 app.use(session({
@@ -49,7 +51,10 @@ app.use(session({
 }));
 
 if (process.env.NODE_ENV === 'production') {
-  app.use(express.static('../build'))
+  app.use(express.static('/app/build'))
+  app.get('/', (req, res) => {
+    res.sendFile('/app/build/index.html')
+  });
 }
 
 //ROUTES CONFIG

package.json

@@ -16,9 +16,9 @@
     "web-vitals": "^1.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "node backend/server.js",
     "build": "react-scripts build",
-    "heroku-postbuild": "cd backend && npm install && node server.js && cd .. && npm install && npm run build",
+    "heroku-postbuild": "cd backend && npm install && cd .. && npm install && npm run build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -27,6 +27,9 @@
       "react-app",
       "react-app/jest"
     ]
+  },
+  "engines": {
+    "node": "10.16.0"
 },
   "browserslist": {
     "production": [
@@ -40,10 +43,5 @@
       "last 1 safari version"
     ]
   },
-  "buildpacks": [
-    {
-      "url": "https://github.com/mars/create-react-app-buildpack"
-    }
-  ],
-  "proxy": "http://localhost:3000"
+  "proxy": "http://localhost:5000"
 }

procfile

@@ -0,0 +1 @@
+worker: node backend/server.js

src/App.js

@@ -14,7 +14,7 @@ function App() {
   const [redirect, setRedirect] = useState();
 
   useEffect(() => {
-    axios.get('http://localhost:3000/player', {
+    axios.get('/player', {
       withCredentials:true,
     })
     .then(response => {
@@ -26,12 +26,12 @@ function App() {
   const handleExit = e => {
     e.preventDefault();
     window.addEventListener('unload', () => {
-      axios.post('http://localhost:3000/player/exit', {withCredentials:true, })
+      axios.post('/player/exit', {withCredentials:true, })
     });
     } 
   
   const idCallback = () => {
-    axios.get('http://localhost:3000/player/', {
+    axios.get('/player/', {
       withCredentials:true,
     })
     .then(response => {

src/components/Gameboard.jsx

@@ -31,7 +31,7 @@ const Gameboard = () => {
     },[pawns]);
     // Fetching game data
     const fetchData = useCallback(() => {
-        axios.get('http://localhost:3000/room/',{
+        axios.get('/room/',{
             withCredentials:true,
         }).then((response)=>{
             // Filling navbar with empty player nick container

src/components/NameInput.jsx

@@ -8,7 +8,7 @@ const NameInput = ({ idCallback }) => {
     }
 
     const handleButtonClick = () => {
-        axios.post('http://localhost:3000/room/add',{
+        axios.post('/room/add',{
             name: inputValue
         },{
             withCredentials:true,

src/components/game-board-components/Dice.jsx

@@ -11,7 +11,7 @@ const Dice = ({ rolledNumberCallback, nowMoving }) => {
     const [rolledNumber, setRolledNumber] = useState();
     const [images] = useState([one, two, three, four, five, six]);
     const handleRoll = () => {
-        axios.get('http://localhost:3000/game/roll', {withCredentials: true}).then(response => {
+        axios.get('/game/roll', {withCredentials: true}).then(response => {
             const utterance = new SpeechSynthesisUtterance(response.data.number);
             speechSynthesis.speak(utterance);
             setRolledNumber(response.data.number);

src/components/game-board-components/Map.jsx

@@ -57,7 +57,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             y = event.clientY - rect.top;
             for(const pawn of pawns){
                 if (ctx.isPointInPath(pawn.circle, x, y)) {
-                    axios.post('http://localhost:3000/game/move', {pawnId: pawn._id}, {withCredentials: true, mode: 'cors'})
+                    axios.post('/game/move', {pawnId: pawn._id}, {withCredentials: true, mode: 'cors'})
                     .then(() => {
                         setHintPawn(null);
                     });
@@ -180,7 +180,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
                 paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
             }
         }
-    },[blinking, checkIfPawnCanMove, context.color, hintPawn, nowMoving, pawns, rolledNumber]);
+    },[ checkIfPawnCanMove, context.color, hintPawn, nowMoving, pawns, rolledNumber]);
     // Rerender canvas when pawns have changed
     useEffect(() => {
         rerenderCanvas(); 

src/components/navbar-components/ReadyButton.jsx

@@ -7,7 +7,7 @@ const ReadyButton = () => {
     const [checked, setChecked] = useState(false)
 
     const handleCheckboxChange = () => {
-        axios.post('http://localhost:3000/player/ready',{},{withCredentials: true});
+        axios.post('/player/ready',{},{withCredentials: true});
         setChecked(!checked);
     }