Skip to content
Snippets Groups Projects
Commit 53d2f977 authored by David Beniamine's avatar David Beniamine
Browse files

Merge branch '1_basic_docker_stack' into 'main'

Basic docker stack to build and serve Mirador

See merge request iiif/POC-mirador!2
parents 3f9543b4 741a421f
No related branches found
No related tags found
1 merge request!2Basic docker stack to build and serve Mirador
# host port
PORT=
# container restart policy
RESTART=
.env
node_modules/ node_modules/
dist/ dist/
package-lock.json package-lock.json
......
:80 {
root * /srv
file_server browse
}
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`. If sources files are modified, run `docker-compose up -d --build`
### 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: $RESTART
ports:
- $PORT: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"
} }
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Basic Mirador</title> <title>Mirador Video Annotations</title>
</head> </head>
<body> <body>
<div id="demo"></div> <div id="demo"></div>
<script src="dist/main.js"></script> <script src="/dist/main.js"></script>
</body> </body>
</html> </html>
...@@ -4,7 +4,7 @@ module.exports = { ...@@ -4,7 +4,7 @@ module.exports = {
entry: './src/index.js', entry: './src/index.js',
output: { output: {
filename: 'main.js', filename: 'main.js',
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'public/dist'),
publicPath: './dist/', publicPath: './dist/',
}, }
}; };
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment