Skip to content
Snippets Groups Projects
Verified Commit 03ee7d71 authored by Loïs Poujade's avatar Loïs Poujade
Browse files

Basic docker stack to build and serve Mirador

Issue #1
parent 3f9543b4
Branches
No related tags found
1 merge request!2Basic docker stack to build and serve Mirador
:80 {
root * /srv
file_server browse
header Access-Control-Allow-Origin "*"
}
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
## Integrating Mirador ## Mirador Video Annotation POC
This repository is designed to show integrating Mirador 3 with modern frontend build systems. 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`
### 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
```
version: "3.9"
services:
httpd:
build: .
restart: unless-stopped
ports:
- "8080:80"
volumes:
- ./Caddyfile:/etc/caddy/Caddyfile
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
"description": "", "description": "",
"private": true, "private": true,
"scripts": { "scripts": {
"webpack": "webpack --config webpack/webpack.config.js", "build": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1" "serve": "webpack serve --config webpack.config.js"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
"mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#wip-webpack-from-git", "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#wip-webpack-from-git",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"style-loader": "^1.2.1", "style-loader": "^1.2.1"
},
"devDependencies": {
"webpack": "^4.43.0", "webpack": "^4.43.0",
"webpack-cli": "^4.3.12" "webpack-cli": "^4.3.12"
} }
......
<!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>
import Mirador from 'mirador/dist/es/src/index'; import Mirador from 'mirador/dist/es/src/index'
const config = { const config = {
id: 'demo', 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' }
]
} }
Mirador.viewer(config, [ Mirador.viewer(config, [])
]);
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'public/dist'),
publicPath: './dist/',
}
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment