From 068cb70c0c074376ed4bba17135c657f2954e1d2 Mon Sep 17 00:00:00 2001 From: Wenszel Date: Fri, 30 Apr 2021 15:14:06 +0200 Subject: [PATCH] heroku deploy --- backend/server.js | 15 ++++++++++----- package.json | 14 ++++++-------- procfile | 1 + src/App.js | 6 +++--- src/components/Gameboard.jsx | 2 +- src/components/NameInput.jsx | 2 +- src/components/game-board-components/Dice.jsx | 2 +- src/components/game-board-components/Map.jsx | 4 ++-- src/components/navbar-components/ReadyButton.jsx | 2 +- 9 files changed, 26 insertions(+), 22 deletions(-) create mode 100644 procfile diff --git a/backend/server.js b/backend/server.js index 3456c07..5d39e4c 100644 --- a/backend/server.js +++ b/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 diff --git a/package.json b/package.json index c19022b..e43dc33 100644 --- a/package.json +++ b/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" }, @@ -28,6 +28,9 @@ "react-app/jest" ] }, + "engines": { + "node": "10.16.0" +}, "browserslist": { "production": [ ">0.2%", @@ -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" } diff --git a/procfile b/procfile new file mode 100644 index 0000000..9cf837f --- /dev/null +++ b/procfile @@ -0,0 +1 @@ +worker: node backend/server.js \ No newline at end of file diff --git a/src/App.js b/src/App.js index 4adf78d..7a11d4f 100644 --- a/src/App.js +++ b/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 => { diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index d468f00..f173a44 100644 --- a/src/components/Gameboard.jsx +++ b/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 diff --git a/src/components/NameInput.jsx b/src/components/NameInput.jsx index af9cd09..75e8d89 100644 --- a/src/components/NameInput.jsx +++ b/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, diff --git a/src/components/game-board-components/Dice.jsx b/src/components/game-board-components/Dice.jsx index d0fe419..e9f4e9e 100644 --- a/src/components/game-board-components/Dice.jsx +++ b/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); diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx index 58133bf..3abde79 100644 --- a/src/components/game-board-components/Map.jsx +++ b/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(); diff --git a/src/components/navbar-components/ReadyButton.jsx b/src/components/navbar-components/ReadyButton.jsx index 1bb37bd..91e053a 100644 --- a/src/components/navbar-components/ReadyButton.jsx +++ b/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); }