First Dockerfile and build script that yields a working container. No config yet, and all runs in dev mode.

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+client/node_modules
+server/node_modules

client/package.json

@@ -10,22 +10,24 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
+    "@types/node": "^12.12.54",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.0",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5",
     "jsurl": "^0.1.5",
-    "lodash": "^4.17.19",
-    "material-table": "^1.64.0",
+    "lodash": "^4.17.20",
+    "material-table": "^1.69.0",
     "react": "^16.13.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "BROWSER=none react-scripts start",
+    "dev": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

client/src/App.tsx

@@ -7,7 +7,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import {
-  BrowserRouter as Router,
+  HashRouter as Router,
   Switch,
   Route,
   useHistory,

client/src/components/QueryBrowseWindow.tsx

@@ -159,7 +159,7 @@ export default function QueryBrowseWindow(props: IProps) {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(request)
         };
-        fetch(serverApi.QueryEndpoint, requestOpts)
+        fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts)
             .then((response: any) => response.json())
             .then((json: any) => {
                 const match = _.isEqual(q, props.query) && _.isEqual(r, props.resultOrder) && _.isEqual(t, props.typesIncluded);

deploy/Dockerfile

@@ -0,0 +1,41 @@
+# Note: this Dockerfile is written to be executed with the whole source
+# as its context.
+
+# TODO remove client source
+# TODO material UI (and other libs) from CSN
+
+FROM node:12-alpine
+
+# Install base dependencies
+WORKDIR /usr/src/mudbase
+COPY package*.json ./
+RUN npm install --only=production
+
+# Install back-end dependencies
+WORKDIR /usr/src/mudbase/server
+COPY server/package*.json ./
+RUN npm install --only=production
+
+# Install front-end dependencies
+WORKDIR /usr/src/mudbase/client
+COPY client/package*.json ./
+RUN npm install --only=production
+
+# Install front-end
+WORKDIR /usr/src/mudbase/client
+COPY client/ ./
+ENV REACT_APP_BACKEND "/api"
+RUN npm run-script build
+
+# Install back-end
+WORKDIR /usr/src/mudbase/server
+COPY server/ ./
+
+# Start
+WORKDIR /usr/src/mudbase/server
+EXPOSE 8080
+ENV PORT 8080
+ENV API "/api"
+ENV FRONTEND_PREFIX "/"
+ENV FRONTEND "../client/build"
+CMD [ "npm", "start" ]

deploy/build.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+SCRIPT=`realpath $0`
+SCRIPTPATH=`dirname $SCRIPT`
+
+pushd "$SCRIPTPATH/.."
+
+docker build . -f deploy/Dockerfile -t mudbase:latest
+
+popd

package.json

@@ -2,15 +2,12 @@
   "name": "mudbase",
   "version": "1.0.0",
   "scripts": {
-    "client": "cd client && yarn start",
-    "server": "cd server && yarn start",
-    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
-  },
-  "devDependencies": {
-    "concurrently": "^4.0.1"
+    "client": "cd client && npm run-script dev",
+    "server": "cd server && npm run-script dev",
+    "dev": "concurrently --kill-others-on-fail \"npm run-script server\" \"npm run-script client\"",
+    "start": "npm run-script dev"
   },
   "dependencies": {
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3"
+    "concurrently": "^4.0.1"
   }
 }

server/app.ts

@@ -31,7 +31,7 @@ const invokeHandler = (handler:endpointTypes.EndpointHandler, knex: Knex) => {
     };
 }
 
-const SetupApp = (app: any, knex: Knex) => {
+const SetupApp = (app: any, knex: Knex, apiBaseUrl: string) => {
     app.use(bodyParser.json());
     app.use(bodyParser.urlencoded({ extended: true }));
 
@@ -40,19 +40,19 @@ const SetupApp = (app: any, knex: Knex) => {
     }
 
     // Set up REST API endpoints
-    app.post(api.CreateSongEndpoint, invokeWithKnex(CreateSongEndpointHandler));
-    app.post(api.QueryEndpoint, invokeWithKnex(QueryEndpointHandler));
-    app.post(api.CreateArtistEndpoint, invokeWithKnex(CreateArtistEndpointHandler));
-    app.put(api.ModifyArtistEndpoint, invokeWithKnex(ModifyArtistEndpointHandler));
-    app.put(api.ModifySongEndpoint, invokeWithKnex(ModifySongEndpointHandler));
-    app.get(api.SongDetailsEndpoint, invokeWithKnex(SongDetailsEndpointHandler));
-    app.get(api.ArtistDetailsEndpoint, invokeWithKnex(ArtistDetailsEndpointHandler));
-    app.post(api.CreateTagEndpoint, invokeWithKnex(CreateTagEndpointHandler));
-    app.put(api.ModifyTagEndpoint, invokeWithKnex(ModifyTagEndpointHandler));
-    app.get(api.TagDetailsEndpoint, invokeWithKnex(TagDetailsEndpointHandler));
-    app.post(api.CreateAlbumEndpoint, invokeWithKnex(CreateAlbumEndpointHandler));
-    app.put(api.ModifyAlbumEndpoint, invokeWithKnex(ModifyAlbumEndpointHandler));
-    app.get(api.AlbumDetailsEndpoint, invokeWithKnex(AlbumDetailsEndpointHandler));
+    app.post(apiBaseUrl + api.CreateSongEndpoint, invokeWithKnex(CreateSongEndpointHandler));
+    app.post(apiBaseUrl + api.QueryEndpoint, invokeWithKnex(QueryEndpointHandler));
+    app.post(apiBaseUrl + api.CreateArtistEndpoint, invokeWithKnex(CreateArtistEndpointHandler));
+    app.put(apiBaseUrl + api.ModifyArtistEndpoint, invokeWithKnex(ModifyArtistEndpointHandler));
+    app.put(apiBaseUrl + api.ModifySongEndpoint, invokeWithKnex(ModifySongEndpointHandler));
+    app.get(apiBaseUrl + api.SongDetailsEndpoint, invokeWithKnex(SongDetailsEndpointHandler));
+    app.get(apiBaseUrl + api.ArtistDetailsEndpoint, invokeWithKnex(ArtistDetailsEndpointHandler));
+    app.post(apiBaseUrl + api.CreateTagEndpoint, invokeWithKnex(CreateTagEndpointHandler));
+    app.put(apiBaseUrl + api.ModifyTagEndpoint, invokeWithKnex(ModifyTagEndpointHandler));
+    app.get(apiBaseUrl + api.TagDetailsEndpoint, invokeWithKnex(TagDetailsEndpointHandler));
+    app.post(apiBaseUrl + api.CreateAlbumEndpoint, invokeWithKnex(CreateAlbumEndpointHandler));
+    app.put(apiBaseUrl + api.ModifyAlbumEndpoint, invokeWithKnex(ModifyAlbumEndpointHandler));
+    app.get(apiBaseUrl + api.AlbumDetailsEndpoint, invokeWithKnex(AlbumDetailsEndpointHandler));
 }
 
 export { SetupApp }

server/package.json

@@ -2,7 +2,8 @@
   "name": "mudbase-server",
   "version": "1.0.0",
   "scripts": {
-    "start": "nodemon server.ts",
+    "start": "ts-node server.ts",
+    "dev": "nodemon server.ts",
     "build": "tsc",
     "test": "ts-node node_modules/jasmine/bin/jasmine --config=test/jasmine.json"
   },
@@ -13,6 +14,7 @@
     "express": "^4.16.4",
     "jasmine": "^3.5.0",
     "knex": "^0.21.5",
+    "nodemon": "^2.0.4",
     "sqlite3": "^5.0.0",
     "ts-node": "^8.10.2",
     "typescript": "~3.7.2"

server/server.ts

@@ -6,9 +6,19 @@ import { SetupApp } from './app';
 const app = express();
 
 knex.migrate.latest().then(() => {
-    SetupApp(app, knex);
-
     const port = process.env.PORT || 5000;
+    const apiBase = process.env.API || "";
+    const frontEndPrefix = process.env.FRONTEND_PREFIX || undefined;
+    const frontEnd = process.env.FRONTEND || undefined;
+
+    SetupApp(app, knex, apiBase);
+
+    console.log(frontEnd, frontEndPrefix)
+    if(frontEnd && frontEndPrefix) {
+        console.log(`Hosting front-end ${frontEnd} at ${frontEndPrefix}.`)
+        app.use(frontEndPrefix, express.static(frontEnd))
+    }
+
     app.listen(port, () => console.log(`Listening on port ${port}`));
 })