Refactor docker image and CI pipeline

.dockerignore

@@ -1,4 +1,6 @@
-data/*
-!data/scores.json
+**/.git
+**/.github
+data
+built
+doc
 node_modules
-frontend/lib

.editorconfig

@@ -9,3 +9,7 @@ trim_trailing_whitespace = true
 [*.{js,jsx,css,js.default}]
 indent_size = 2
 indent_style = space
+
+[Makefile]
+# Makefiles require tabs for indentation
+indent_style = tab

.github/workflows/tests.yml

@@ -13,49 +13,28 @@ on:
       - '**.md'
 
 jobs:
-  test:
-    name: Run tests
-
-    strategy:
-      matrix:
-        node_version:
-          - 12
-          - 14
+  verify:
+    name: Verify
 
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-
-      - name: Setup
-        uses: actions/[email protected]
         with:
-          node-version: ${{matrix.node_version}}
-
-      - name: Install
-        run: npm install
-
-      - name: Test
-        run: npm test
-
-
-  docker:
-    name: Test docker image
+          fetch-depth: 0
 
-    runs-on: ubuntu-latest
+      - name: Build
+        run: make docker
 
-    continue-on-error: true
+      - name: Lint
+        run: make docker-lint
 
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Build
-        run: docker build --tag dr4ft-app .
+      - name: Test
+        run: make docker-test
 
-      - name: Run
-        run: docker run -dp 1337:1337 dr4ft-app
+      - name: Run docker image
+        run: make docker-run
 
       - name: Show info
         run: |
@@ -64,24 +43,6 @@ jobs:
           docker ps -a
           echo
           docker images
+          echo
+          make docker-logs FOLLOW=
 
-
-  lint:
-    name: Run ESLint
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Setup
-        uses: actions/[email protected]
-        with:
-          node-version: 12
-
-      - name: Install
-        run: npm install --ignore-scripts
-
-      - name: Run ESLint
-        run: npm run lint

.nvmrc

@@ -1 +1 @@
-v12
+16.15.0

Dockerfile

@@ -1,24 +1,40 @@
-FROM node:lts-alpine
-ENV NPM_CONFIG_LOGLEVEL warn
+FROM node:16.15.0-alpine
+
+ARG VERSION_INFO=noVersion
 
-# Install "git"
-RUN apk update \
- && apk add alpine-sdk
+ENV NPM_CONFIG_LOGLEVEL warn
+ENV PORT=1337
 
 # Set working dir as /app
 WORKDIR /app
 
 # Add sources to /app
-COPY . .
+COPY LICENSE .
+COPY .gitignore .
+COPY .babelrc .
+COPY .eslintrc.js .
+COPY .mocharc.yaml .
+COPY package.json .
+COPY package-lock.json .
+COPY webpack.prod.js .
+COPY webpack.common.js .
+COPY webpack.dev.js .
+COPY app.json .
+COPY app.js .
+COPY config/ config/
+COPY scripts/ scripts/
+COPY backend/ backend/
+COPY frontend/ frontend/
+
 RUN adduser -S dr4ftuser
 RUN chown dr4ftuser -R .
 USER dr4ftuser
 
 # Install the dependencies
-RUN npm install
+RUN npm ci --ignore-scripts
 
-# Publish the port 1337
-EXPOSE 1337
+ENV VERSION_INFO=$VERSION_INFO
+RUN npm run postinstall
 
 # Run the server
 ENTRYPOINT [ "npm", "start" ]

Makefile

@@ -0,0 +1,66 @@
+VERSION_INFO ?= $$(git describe --tags)
+IMAGE ?= dr4ft-app
+CONTAINER ?= $(IMAGE)-container
+PORT ?= 1337
+
+
+# Show makefile help by default
+.DEFAULT_GOAL = help
+
+
+.PHONY: docker
+docker:  ## Build docker image
+	@echo "Building with version info $(VERSION_INFO)"
+	docker build \
+		--build-arg VERSION_INFO=$(VERSION_INFO) \
+		-t $(IMAGE) .
+
+
+.PHONY: docker-run
+docker-run: docker-stop docker  ## Run app in docker container
+	docker run -d \
+		--name $(CONTAINER) \
+		--env "PORT=$(PORT)" \
+		-p $(PORT):$(PORT) \
+		$(IMAGE)
+	@echo "##########################################"
+	@echo "Dr4ft now running at http://localhost:$(PORT)"
+	@echo "##########################################"
+
+
+.PHONY: docker-stop
+docker-stop:  ## Stop running docker container
+	docker stop $(CONTAINER) > /dev/null 2>&1 || true
+	docker container rm $(CONTAINER) > /dev/null 2>&1 || true
+
+
+.PHONY: docker-logs
+FOLLOW := -f
+docker-logs:  ## Show logs from running docker container
+	docker logs $(FOLLOW) $(CONTAINER)
+
+
+.PHONY: docker-test
+docker-test: docker  ## Run tests in docker container
+	docker run --rm \
+		--entrypoint npm \
+		$(IMAGE) run test:js
+
+
+.PHONY: docker-lint
+docker-lint: docker  ## Lint code in docker container
+	docker run --rm \
+		--entrypoint npm \
+		$(IMAGE) run lint
+
+
+.PHONY: docker-clean
+docker-clean: docker-stop  ## Remove any built docker images
+	docker rmi -f $$(docker images -q $(IMAGE)) > /dev/null 2>&1 || true
+
+
+# Output help string for each target.
+# With thanks to: https://marmelab.com/blog/2016/02/29/auto-documented-makefile.html
+.PHONY: help
+help:  ## Show this help
+	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)

README.md

@@ -66,7 +66,7 @@ It supports all their features, and many more.
 
 1) Install [Node.js](https://nodejs.org/en/download/) >= 12.0.0
 2) Run<br>
-`$ npm install`<br>
+`$ npm ci`<br>
 `$ npm run build`<br>
 `$ npm start`
 3) Visit [http://localhost:1337](http://localhost:1337)
@@ -131,7 +131,7 @@ Breakpoints for the frontend should be set in your browser console.
 
 Be a part of this project! You can run the test using the following.
 
-1. Install dependencies from package.json by running `npm install`
+1. Install dependencies from package.json by running `npm ci`
 2. Run the test via `npm test`
 3. Make some fun new modules!
 

config/version.js

@@ -1,16 +1,23 @@
 /* eslint no-console: "off" */
 "use strict";
 
-const execSync = require("child_process").execSync;
+const getVersionInfo = () => {
+  if (process.env.VERSION_INFO) {
+    return process.env.VERSION_INFO;
+  }
 
-let versionInfo = "noVersion";
-try {
-  versionInfo = execSync("git describe --tags")
-    .toString().trim();
-} catch(err) {
-  console.log(err);
-}
+  try {
+    const execSync = require("child_process").execSync;
+    return execSync("git describe --tags")
+      .toString()
+      .trim();
+  } catch(err) {
+    console.log(err);
+    return "noVersion";
+  }
+};
 
+const versionInfo = getVersionInfo();
 const versionInfoParts = versionInfo.split("-");
 
 const VERSION =

frontend/src/lobby/Lobby.jsx

@@ -25,7 +25,7 @@ export default class Lobby extends Component {
           <Header/>
           <GamesPanel roomInfo={roomInfo}/>
           <FileUpload />
-          <NewsPanel motd={STRINGS.PAGE_SECTIONS.MOTD}/>
+          {STRINGS.PAGE_SECTIONS.MOTD && <NewsPanel motd={STRINGS.PAGE_SECTIONS.MOTD}/>}
           {STRINGS.BRANDING.PAYPAL}
           {STRINGS.PAGE_SECTIONS.FOOTER}
           <Version version={serverVersion} MTGJSONVersion={mtgJsonVersion} boosterRulesVersion={boosterRulesVersion}/>

package.json

@@ -110,6 +110,6 @@
     "webpack-cli": "^4.9.2"
   },
   "engines": {
-    "node": "^12.16.3"
+    "node": "^16.15.0"
   }
 }