Add a dev server

- all local files (sources, dependencies, config, etc) are mounted in
  the devserver container
- devserver watch sources & rebuild/reload on each change
- "prod" server was updated to allow devserver to access its ressources
- "prod" server now use npm ci instead of install and webpack
  `production` mode for build

.dockerignore

+node_modules/

.env.template

-# host port
+# docker-compose components. Append ':devserver.yml' to also run the dev server (default is prod only)
+COMPOSE_FILE=docker-compose.yml
+# prod server host port
 PORT=8080
-# container restart policy
+# prod container restart policy
 RESTART=unless-stopped
+# dev server host port
+DEV_PORT=9000
+# dev server container restart policy
+DEV_RESTART=unless-stopped
 # HTTP folder, will be served at http://localhost:$PORT/data
 # use absolute path or relative path starting with ./
 HTTP_FOLDER=./www
+# hosts allowed to access ressources from $HTTP_FOLDER
+# * to allow all, http://localhost:$DEV_PORT to allow only devserver
+CORS_ALLOWED_HOSTS=http://localhost:$DEV_PORT

Caddyfile

 :80 {
 	root * /srv
 	file_server browse
+	header Access-Control-Allow-Origin "{env.CORS_ALLOWED_HOSTS}"
 }

Dockerfile

@@ -3,7 +3,7 @@ RUN apk add npm git
 
 COPY . /opt
 WORKDIR /opt
-RUN npm install
+RUN npm ci
 RUN npm run build
 
 FROM caddy:latest as httpd

Dockerfile.devserver

+FROM node:16-alpine
+RUN apk add git
+EXPOSE 9000
+WORKDIR /opt
+USER node
+CMD npm run serve

README.md

@@ -7,3 +7,13 @@ Run `docker-compose up -d`, which will serve a mirador instance at `http://local
 The `$HTTP_FOLDER` (`./www` by default) directory will be accessible via HTTP at `http://localhost:$PORT/data` and can be used to store manifests and theirs ressources and see them in Mirador.  
 
 If sources files are modified, run `docker-compose up -d --build` to update Mirador  
+
+
+#### Use the development server
+
+Follow the previous instructions if you want to access ressources from `$HTTP_FOLDER` via HTTP in the devserver.  
+
+Edit `.env` (copy it from `.env.template` if needed), set `COMPOSE_FILE=docker-compose.yml:devserver.yml` and adapt `DEV_*` variables to your needs.  
+
+Run `docker-compose up -d --build devserver`, which will serve a mirador instance at `http://localhost:$DEV_PORT` (default port is 9000) with live rebuild/reload enabled on each `src/` and `public/` files modifications.  
+

devserver.yml

+version: "3.9"
+services:
+  devserver:
+    build:
+      context: .
+      dockerfile: Dockerfile.devserver
+    restart: $DEV_RESTART
+    ports:
+      - $DEV_PORT:9000
+    volumes:
+      - ./:/opt
+    environment:
+      - WEBPACK_MODE=development

docker-compose.yml

@@ -5,6 +5,9 @@ services:
     restart: $RESTART
     ports:
       - $PORT:80
+    environment:
+      - CORS_ALLOWED_HOSTS
+      - WEBPACK_MODE=production
     volumes:
       - $HTTP_FOLDER:/srv/data
       - ./Caddyfile:/etc/caddy/Caddyfile

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "webpack --config webpack.config.js",
-    "serve": "webpack serve --config webpack.config.js"
+    "serve": "npm install && webpack serve --config webpack.config.js"
   },
   "author": "",
   "license": "ISC",
@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "webpack": "^4.43.0",
-    "webpack-cli": "^4.3.12"
+    "webpack-cli": "^4.3.12",
+    "webpack-dev-server": "^4.11.1"
   }
 }

webpack.config.js

 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
+    mode: process.env.WEBPACK_MODE,
     entry: './src/index.js',
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, 'public/dist'),
-    publicPath: './dist/',
-  }
+      publicPath: '/dist/',
+    },
+    devServer: {
+      hot: true,
+      watchFiles: ['src/**/*'],
+      static: {
+        directory: path.join(__dirname, 'public'),
+        watch: true
+      },
+      port: 9000
+    },
+    plugins: [
+      new webpack.IgnorePlugin({
+        /* cf https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation/-/blob/annotation-on-video/webpack.config.js#L42 */
+        resourceRegExp: /@blueprintjs\/(core|icons)/, // ignore optional UI framework dependencies
+      })
+    ]
 };