From 03ee7d717a6e4520490194733991b096d43bbbac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFs=20Poujade?= <lois.poujade@tetras-libre.fr>
Date: Wed, 21 Sep 2022 12:44:54 +0200
Subject: [PATCH] Basic docker stack to build and serve Mirador
Issue #1
---
Caddyfile | 5 +++++
Dockerfile | 10 ++++++++++
README.md | 29 ++---------------------------
docker-compose.yml | 9 +++++++++
package.json | 8 +++++---
public/index.html | 11 +++++++++++
src/index.js | 19 +++----------------
webpack.config.js | 10 ++++++++++
8 files changed, 55 insertions(+), 46 deletions(-)
create mode 100644 Caddyfile
create mode 100644 Dockerfile
create mode 100644 docker-compose.yml
create mode 100644 public/index.html
create mode 100644 webpack.config.js
diff --git a/Caddyfile b/Caddyfile
new file mode 100644
index 0000000..931dbb1
--- /dev/null
+++ b/Caddyfile
@@ -0,0 +1,5 @@
+:80 {
+ root * /srv
+ file_server browse
+ header Access-Control-Allow-Origin "*"
+}
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..d89317f
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,10 @@
+FROM alpine:latest as builder
+RUN apk add npm git
+
+COPY . /opt
+WORKDIR /opt
+RUN npm install
+RUN npm run build
+
+FROM caddy:latest as httpd
+COPY --from=builder /opt/public /srv
diff --git a/README.md b/README.md
index 4baf1cf..450b915 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,3 @@
-## Integrating Mirador
+## Mirador Video Annotation POC
-This repository is designed to show integrating Mirador 3 with modern frontend build systems.
-
-### Dependencies
-
-You will likely need to have at least the following dependencies available in your `package.json`.
-
- - `mirador`
- - `react`
- - `react-dom`
- - `mirador-image-tools` - A plugin just to test plugin integration
-
-### Webpack
-
-See `./webpack` for a basic webpack setup for Mirador 3 + a plugin.
-
-```sh
-npm run webpack
-```
-
-### Parcel
-
-See `./parcel`, but essentially it is just an html file referencing the JavaScript.
-
-```sh
-npm run parcel
-```
+Run `docker-compose up -d`, which will serve a mirador instance to `http://localhost:8080`. The `www` directory is accessible via `http://localhost:8080/data`
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..287e29b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,9 @@
+version: "3.9"
+services:
+ httpd:
+ build: .
+ restart: unless-stopped
+ ports:
+ - "8080:80"
+ volumes:
+ - ./Caddyfile:/etc/caddy/Caddyfile
diff --git a/package.json b/package.json
index dc16400..c247ee3 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
"description": "",
"private": true,
"scripts": {
- "webpack": "webpack --config webpack/webpack.config.js",
- "test": "echo \"Error: no test specified\" && exit 1"
+ "build": "webpack --config webpack.config.js",
+ "serve": "webpack serve --config webpack.config.js"
},
"author": "",
"license": "ISC",
@@ -14,7 +14,9 @@
"mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#wip-webpack-from-git",
"react": "^16.13.1",
"react-dom": "^16.13.1",
- "style-loader": "^1.2.1",
+ "style-loader": "^1.2.1"
+ },
+ "devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^4.3.12"
}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..e7842b1
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Mirador Video Annotations</title>
+ </head>
+ <body>
+ <div id="demo"></div>
+ <script src="/dist/main.js"></script>
+ </body>
+</html>
diff --git a/src/index.js b/src/index.js
index f0b501b..b482294 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,20 +1,7 @@
-import Mirador from 'mirador/dist/es/src/index';
-
+import Mirador from 'mirador/dist/es/src/index'
const config = {
- id: 'demo',
- theme: { transitions: window.location.port === '4488' ? { create: () => 'none' } : {}, },
- catalog: [
- { manifestId: 'http://localhost/dzkimgs_annotated_video.json' },
- { manifestId: 'http://localhost/video_split_annopage.json' },
- { manifestId: 'http://localhost/fediverse.json' },
- { manifestId: 'http://localhost/localvideo.json' },
- { manifestId: 'http://localhost/local_catvideo.json' },
- { manifestId: 'https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json' },
- { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
- { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' }
- ]
+ id: 'demo'
}
-Mirador.viewer(config, [
-]);
+Mirador.viewer(config, [])
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..d487af5
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+ entry: './src/index.js',
+ output: {
+ filename: 'main.js',
+ path: path.resolve(__dirname, 'public/dist'),
+ publicPath: './dist/',
+ }
+};
--
GitLab