diff --git a/.env b/.env new file mode 100644 index 0000000..ee3b749 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +REACT_APP_basePath="/ketr.ketran" +NODE_CONFIG_ENV='production' \ No newline at end of file diff --git a/README.md b/README.md index 38f787c..e6453e3 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,8 @@ This project consists of both the front-end and back-end game API server. -The front-end is launched in development mode via 'npm start'. In production, you build -it via 'npm build' and deploy the public front-end. When you run the development -mode, the default port it will bind to is 8931. +The front-end is launched from the 'client' directory in development mode via 'npm start'. In production, you build +it via 'npm build' and deploy the public front-end. The back-end is launched out of the 'server' directory via 'npm start' and will bind to the default port 8930. @@ -83,11 +82,11 @@ server -> game ```bash git clone git.ketrenos.com:jketreno/peddlers-of-ketran.git -npm install cd server npm install npm start & -cd .. +cd ../client +npm install npm start ``` diff --git a/client/package.json b/client/package.json index b3c1baa..a37c31f 100644 --- a/client/package.json +++ b/client/package.json @@ -17,10 +17,10 @@ "web-vitals": "^2.1.2" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "start": "export $(cat ../.env | xargs) && react-scripts start", + "build": "export $(cat ../.env | xargs) && react-scripts build", + "test": "export $(cat ../.env | xargs) && react-scripts test", + "eject": "export $(cat ../.env | xargs) && react-scripts eject" }, "eslintConfig": { "extends": [ diff --git a/client/public/index.html b/client/public/index.html index aa069f2..f240883 100755 --- a/client/public/index.html +++ b/client/public/index.html @@ -3,6 +3,8 @@ + + - - } path={base + 'games/:id?'}/> - } path={base}/> + + } path={`${base}/games/:id`}/> + } path={`${base}`}/> ); diff --git a/client/src/Board.js b/client/src/Board.js index 14a93d9..c282013 100755 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import "./Board.css"; -import history from "./history.js"; +//import history from "./history.js"; import Paper from '@material-ui/core/Paper'; import TextField from '@material-ui/core/TextField'; import List from '@material-ui/core/List'; @@ -39,8 +39,10 @@ function withRouter(Component) { } /* end of withRouter polyfill */ -const assetsPath = '/assets'; -const gamesPath = '/games'; +const base = process.env.PUBLIC_URL; + +const assetsPath = `${base}/assets`; +const gamesPath = `${base}/games`; const useStyles = makeStyles((theme) => ({ root: { @@ -423,15 +425,13 @@ class Board extends React.Component { const params = {}; - console.log(props.router); - if (props.router && props.router.params.id) { console.log(`Loading game: ${props.router.params.id}`); - params.url = `api/v1/games/${props.router.params.id}`; + params.url = `${base}/api/v1/games/${props.router.params.id}`; params.method = "GET" } else { console.log("Requesting new game."); - params.url = "api/v1/games"; + params.url = `${base}/api/v1/games`; params.method = "POST"; } @@ -445,8 +445,6 @@ class Board extends React.Component { // body: JSON.stringify(data) // body data type must match "Content-Type" header }).then((res) => { if (res.status > 400) { - const base = document.querySelector("base"); - window.location.href = base ? base.href : "/"; console.log(`Unable to find game ${props.router.params.id}`); throw new Error(`Unable to find requested game ${props.router.params.id}. Starting new one.`); } @@ -455,20 +453,21 @@ class Board extends React.Component { console.log (`Game ${game.id} loaded.`); if (!props.router.params.id) { - history.push(`${gamesPath}/${game.id}`); +// history.push(`${gamesPath}/${game.id}`); } this.game = game; - this.setState({ game: game }); + //this.setState({ game: game }); this.pips = Pips(this); this.tiles = Tiles(this); this.table = Table(this); - + this.borders = this.game.borders.map((file) => { + console.log(file); return Border(this, file); }); - - this.loadTimer = window.setTimeout(this.loadGame, 1000); + + //this.loadTimer = window.setTimeout(this.loadGame, 1000); }).catch((error) => { console.error(error); alert(error); @@ -485,7 +484,7 @@ class Board extends React.Component { return; } - window.fetch(`api/v1/games/${this.state.game.id}`, { + window.fetch(`${base}/api/v1/games/${this.state.game.id}`, { method: "GET", cache: 'no-cache', credentials: 'same-origin', @@ -517,7 +516,7 @@ class Board extends React.Component { this.loadTimer = null; } - window.fetch(`api/v1/games/${this.state.game.id}`, { + window.fetch(`${base}/api/v1/games/${this.state.game.id}`, { method: "PUT", cache: 'no-cache', credentials: 'same-origin', @@ -685,12 +684,13 @@ class Board extends React.Component { if (this.updateSizeTimer) { clearTimeout(this.updateSizeTimer); } - + console.log("Fix updateDimensions"); + this.updateSizeTimer = setTimeout(() => { const container = document.getElementById("root"), offset = container.firstChild.offsetHeight, height = window.innerHeight - offset; - + return; this.offsetY = offset; this.width = window.innerWidth; this.height = height; @@ -1071,7 +1071,7 @@ class Board extends React.Component { window.addEventListener("mousemove", this.mouseMove); window.addEventListener("resize", this.updateDimensions); - this.updateDimensions(); + setTimeout(this.updateDimensions, 1000); } componentWillUnmount() { diff --git a/client/src/history.js b/client/src/history.js index 3f0d082..8117d50 100755 --- a/client/src/history.js +++ b/client/src/history.js @@ -2,7 +2,7 @@ import { createBrowserHistory } from 'history'; // Run our app under the /base URL. const history = createBrowserHistory({ - basename: process.env.PUBLIC_URL + // basename: process.env.PUBLIC_URL });/*, push = history.push; diff --git a/server/basepath.js b/server/basepath.js index 74ba27c..e1f6d50 100755 --- a/server/basepath.js +++ b/server/basepath.js @@ -1,6 +1,4 @@ -const config = require("config"); - -let basePath = config.get("basePath"); +let basePath = process.env.REACT_APP_basePath; basePath = "/" + basePath.replace(/^\/+/, "").replace(/\/+$/, "") + "/"; if (basePath == "//") { basePath = "/"; diff --git a/server/package.json b/server/package.json index c8a499a..c051ac6 100644 --- a/server/package.json +++ b/server/package.json @@ -4,7 +4,7 @@ "main": "app.js", "devDependencies": {}, "scripts": { - "start": "NODE_CONFIG_ENV='production' node app.js" + "start": "export $(cat ../.env | xargs) && node app.js" }, "author": "James Ketrenos ", "license": "MIT",