diff --git a/annotot.yml b/annotot.yml
index 8781687efb2c5867cfe869dfaeb13874e61f045b..ab34884bcc62f2093e74ca5d43bd1ed45ae08761 100644
--- a/annotot.yml
+++ b/annotot.yml
@@ -3,7 +3,7 @@ services:
   annotot:
     image: tetraslibre/annotot-app
     ports:
-      - 3000:3000
+      - ${ANNOTOT_PORT}:3000
     environment:
-      - IP=0.0.0.0
-      - ENV=production
+      - IP=${ANNOTOT_LISTEN_IP}
+      - ENV=${ANNOTOT_ENV}
diff --git a/package-lock.json b/package-lock.json
index 1baffaddcd8a36cddb9369bd0358da0f38029a94..e9a4f016b65f0877c7869eb76e6245aed25a5940 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "css-loader": "^3.6.0",
+        "dotenv-webpack": "^8.0.1",
         "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#wip-webpack-from-git",
         "mirador-annotations": "0.4.0",
         "react": "^16.13.1",
@@ -2470,6 +2471,36 @@
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz",
       "integrity": "sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA=="
     },
+    "node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dependencies": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "dependencies": {
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
+      }
+    },
     "node_modules/draft-js": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
@@ -10145,6 +10176,27 @@
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz",
       "integrity": "sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA=="
     },
+    "dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g=="
+    },
+    "dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "requires": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "requires": {
+        "dotenv-defaults": "^2.0.2"
+      }
+    },
     "draft-js": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
diff --git a/package.json b/package.json
index 1ed8a1947a10359a72df790dbdddf5c96228813f..a47ef8382c7dedfb85adcb5933306b8ca2850182 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "css-loader": "^3.6.0",
+    "dotenv-webpack": "^8.0.1",
     "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#wip-webpack-from-git",
     "mirador-annotations": "0.4.0",
     "react": "^16.13.1",
diff --git a/src/index.js b/src/index.js
index 19ab11f5f5d1856c04612fa6a4fcf7b8498b8c9e..c7e940b14e2ce3a9ee14544d60411e77394069d6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import annotationPlugins from 'mirador-annotations/es/index';
 import LocalStorageAdapter from 'mirador-annotations/es/LocalStorageAdapter';
 import AnnototAdapter from 'mirador-annotations/es/AnnototAdapter';
 
-const endpointUrl = 'http://localhost:3000/annotations';
+const endpointUrl = `http://${process.env.ANNOTOT_HOST}:${process.env.ANNOTOT_PORT}/annotations`;
 const config = {
   annotation: {
    // adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
diff --git a/webpack.config.js b/webpack.config.js
index 8f2a54375e34f3333d36b6d91b0ddc560308258a..d9fda3b3e99bb9a46f27e5b6df71d5770165dd6d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
     mode: process.env.WEBPACK_MODE,
@@ -35,6 +36,7 @@ module.exports = {
       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
-      })
+      }),
+      new Dotenv()
     ]
 };