Merge pull request #953 from MartinFournier/docker-support

Add basic docker support for development

.dockerignore

@@ -0,0 +1,14 @@
+node_modules/
+
+.git
+.gitattributes
+.gitignore
+.editorconfig
+
+.dockerignore
+Dockerfile
+docker-compose.yml
+
+*.md
+Quotes.txt
+netscript_tests/

Dockerfile

@@ -0,0 +1,35 @@
+FROM node:15.14.0 AS base
+
+WORKDIR /app
+
+# Scripts used in the npm preinstall hook
+COPY scripts/engines-check.js scripts/semver.js scripts/
+
+# Adding our dependencies and install before adding the rest of the files
+# This prevents reinstallation of npm packages for every subsequent code modification
+ENV npm_config_update_notifier=false
+COPY package.json package-lock.json ./
+RUN npm ci --loglevel=error --no-audit --no-fund && npm rebuild node-sass
+
+# Adding all the remaining source files
+COPY . .
+
+# We need more than the default 512MB otherwise webpack will throw 'heap out of memory' exceptions
+# https://nodejs.org/api/cli.html#cli_max_old_space_size_size_in_megabytes
+ENV NODE_OPTIONS=--max-old-space-size=1536
+
+FROM base AS dev
+# This is the main development build using the file watcher if you mount volumes
+USER node
+EXPOSE 8000
+CMD npm run start:container
+
+FROM base AS prod-dist
+# We'll simply build the production dist files here to later reuse in a simple webserver
+RUN npm run build
+
+FROM nginx:1.20.0-alpine AS prod
+WORKDIR /usr/share/nginx/html
+COPY --from=prod-dist /app/dist ./dist
+COPY --from=prod-dist /app/index.html /app/favicon.ico /app/license.txt ./
+EXPOSE 80

docker-compose.yml

@@ -0,0 +1,15 @@
+version: "3.4"
+services:
+    web:
+        image: bitburner:dev
+        build:
+            context: .
+            dockerfile: Dockerfile
+            target: dev
+        ports:
+        - "8000:8000"
+        volumes:
+        - ./src:/app/src
+        - ./css:/app/css
+        - ./utils:/app/utils
+        - ./test:/app/test

package.json

@@ -113,6 +113,7 @@
   },
   "scripts": {
     "start:dev": "webpack-dev-server --progress --env.devServer --mode development",
+    "start:container": "webpack-dev-server --progress --env.devServer --mode development --env.runInContainer",
     "build": "webpack --mode production",
     "build:dev": "webpack --mode development",
     "build:test": "webpack --config webpack.config-test.js",
@@ -121,6 +122,7 @@
     "lint:style": "stylelint --fix ./css/*",
     "preinstall": "node ./scripts/engines-check.js",
     "test": "mochapack --webpack-config webpack.config-test.js -r jsdom-global/register ./test/index.js",
+    "test:container": "mochapack --webpack-config webpack.config-test.js --slow 2000 --timeout 10000 -r jsdom-global/register ./test/index.js",
     "watch": "webpack --watch --mode production",
     "watch:dev": "webpack --watch --mode development"
   },

webpack.config.js

@@ -5,6 +5,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = (env, argv) => {
     const isDevServer = (env || {}).devServer === true;
+    const runInContainer = (env || {}).runInContainer === true;
     const isDevelopment = argv.mode === 'development';
     const outputDirectory = isDevServer ? "dist-dev" : "dist";
     const entries = {};
@@ -22,6 +23,22 @@ module.exports = (env, argv) => {
         entrypoints: true,
     }
 
+    const devServerSettings = {
+        port: 8000,
+        publicPath: `/`,
+        stats: statsConfig,
+    };
+
+    // By default, the webpack-dev-server is not exposed outside of localhost.
+    // When running in a container we need it accessible externally.
+    if (runInContainer) {
+        devServerSettings.disableHostCheck = true;
+        devServerSettings.host = '0.0.0.0';
+        devServerSettings.watchOptions = {
+            poll: true,
+        }
+    }
+
     return {
         plugins: [
             new webpack.DefinePlugin({
@@ -131,11 +148,7 @@ module.exports = (env, argv) => {
                 },
             },
         },
-        devServer: {
+        devServer: devServerSettings,
-            port: 8000,
-            publicPath: `/`,
-            stats: statsConfig,
-        },
         resolve: {
             extensions: [
                 ".tsx",