Init with the docker registry hosted on the same domain as UI

Add new example for https://github.com/Joxit/docker-registry-ui/issues/26#issuecomment-415995589
Fix demo for v0.4.0, sorry 😕
2026-02-19 21:29:51 +00:00 · 2018-11-12 20:00:05 +01:00 · 2018-08-25 23:33:33 +02:00 · 2018-08-04 18:58:36 +02:00
15 changed files with 219 additions and 7 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,37 @@
-.project
-node_modules
+# dependencies
+/node_modules
 package-lock.json
+
+# IDEs and editors
+/.idea
+*.iml
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+.vscode/
+
 registry-data
--- a/README.md
+++ b/README.md
@@ -122,7 +122,7 @@ docker run -d --net registry-ui-net --name registry-srv registry:2
 docker run -d --net registry-ui-net -p 80:80 -e REGISTRY_URL=http://registry-srv:5000 -e DELETE_IMAGES=true -e REGISTRY_TITLE="My registry" joxit/docker-registry-ui:static
 ```

-There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-proxy/).
+There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-proxy/) or docker-registry-ui as standalone [here](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-standalone/).

 ## Using CORS

--- a/demo/index.html
+++ b/demo/index.html
@@ -28,8 +28,7 @@
 <body>
  <app></app>
  <script src="../dist/scripts/vendor.js"></script>
-  <script src="../dist/scripts/tags.js"></script>
-  <script src="../dist/scripts/script.js"></script>
+  <script src="../dist/scripts/docker-registry-ui.js"></script>
  <script>
    (function(i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
--- a/dist/index.html
+++ b/dist/index.html
@@ -13,4 +13,4 @@

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
--><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="vendor.css"><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css"><title>Docker Registry UI</title></head><body><app></app><script src="scripts/vendor.js"></script><script src="scripts/docker-registry-ui.js"></script></body></html>
+--><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="vendor.css"><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css"><title>Docker Registry UI</title></head><body><app></app><script src="scripts/init.js"></script><script src="scripts/vendor.js"></script><script src="scripts/docker-registry-ui.js"></script></body></html>
--- a/dist/scripts/init.js
+++ b/dist/scripts/init.js
@@ -0,0 +1,27 @@
+const REGISTRY_SERVER_KEY = 'registryServer';
+let registryServersStr = localStorage.getItem(REGISTRY_SERVER_KEY);
+let registryServers = [];
+if (registryServersStr !== null){
+    let rs = JSON.parse(registryServersStr);
+    if (rs instanceof Array) {
+        registryServers = rs;
+    }
+}
+
+const apiHost = location.protocol+'//'+location.host;
+if (!registryServers.includes(apiHost)) {
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', apiHost+"/v2/", true);
+    xhr.onload = function (e) {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                const version = xhr.getResponseHeader('Docker-Distribution-Api-Version');
+                if (version.startsWith('registry/2.')) {
+                    registryServers.unshift(apiHost);
+                    localStorage.setItem(REGISTRY_SERVER_KEY, JSON.stringify(registryServers));
+                }
+            }
+        }
+    };
+    xhr.send();
+}
--- a/examples/ui-as-proxy/README.md
+++ b/examples/ui-as-proxy/README.md
@@ -3,7 +3,7 @@
 You can set up the static user interface as proxy in several ways.

 If you want to populate your registry, use `populate.sh` script.
-The interface will be accessible with <http://localhost>.
+The interface and the docker registry will be accessible with <http://localhost>.

 The simplest way is with `simple.yml` docker-compose file.

--- a/examples/ui-as-standalone/README.md
+++ b/examples/ui-as-standalone/README.md
@@ -0,0 +1,22 @@
+# Docker Registry Static as standalone example
+
+You can set up the static user interface as standalone in several ways.
+
+If you want to populate your registry, use `populate.sh` script.
+The interface will be accessible with <http://localhost>.
+Your docker registry will be accessible with <http://localhost:5000>.
+
+The simplest way is with `simple.yml` docker-compose file.
+
+```sh
+docker-compose -f simple.yml up -d
+./populate.sh
+```
+
+You can add some credentials to access your registry wit `credentials.yml` docker-compose file.
+Credentials for this example are login: `registry` and password: `ui` using bcrypt.
+
+```sh
+docker-compose -f credentials.yml up -d
+./populate.sh
+```
--- a/examples/ui-as-standalone/credentials.yml
+++ b/examples/ui-as-standalone/credentials.yml
@@ -0,0 +1,20 @@
+version: '2.0'
+services:
+  registry:
+    image: registry:2.6.2
+    ports:
+      - 5000:5000
+    volumes:
+      - ./registry-data:/var/lib/registry
+      - ./registry-config/credentials.yml:/etc/docker/registry/config.yml
+      - ./registry-config/htpasswd:/etc/docker/registry/htpasswd
+
+  ui:
+    image: joxit/docker-registry-ui:static
+    ports:
+      - 80:80
+    environment:
+      - REGISTRY_TITLE=My Private Docker Registry
+      - URL=http://localhost:5000
+    depends_on:
+      - registry
--- a/examples/ui-as-standalone/populate.sh
+++ b/examples/ui-as-standalone/populate.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:static
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3.0
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3.0-static
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3-static
+
+docker push localhost:5000/joxit/docker-registry-ui
+
+docker tag registry:2.6.2 localhost:5000/registry:latest
+docker tag registry:2.6.2 localhost:5000/registry:2.6.2
+docker tag registry:2.6.2 localhost:5000/registry:2.6
+docker tag registry:2.6.2 localhost:5000/registry:2.6.0
+docker tag registry:2.6.2 localhost:5000/registry:2
+
+docker push localhost:5000/registry
--- a/examples/ui-as-standalone/registry-config/credentials.yml
+++ b/examples/ui-as-standalone/registry-config/credentials.yml
@@ -0,0 +1,25 @@
+version: 0.1
+log:
+  fields:
+    service: registry
+storage:
+  delete:
+    enabled: true
+  cache:
+    blobdescriptor: inmemory
+  filesystem:
+    rootdirectory: /var/lib/registry
+http:
+  addr: :5000
+  headers:
+    X-Content-Type-Options: [nosniff]
+    Access-Control-Allow-Origin: ['http://localhost']
+    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
+    Access-Control-Allow-Headers: ['Authorization']
+    Access-Control-Max-Age: [1728000]
+    Access-Control-Allow-Credentials: [true]
+    Access-Control-Expose-Headers: ['Docker-Content-Digest']
+auth:
+  htpasswd:
+    realm: basic-realm
+    path: /etc/docker/registry/htpasswd
--- a/examples/ui-as-standalone/registry-config/htpasswd
+++ b/examples/ui-as-standalone/registry-config/htpasswd
@@ -0,0 +1 @@
+registry:$2y$11$1bmuJLK8HrQl5ACS/WeqRuJLUArUZfUcP2R23asmozEpfN76.pCHy
--- a/examples/ui-as-standalone/registry-config/simple.yml
+++ b/examples/ui-as-standalone/registry-config/simple.yml
@@ -0,0 +1,21 @@
+version: 0.1
+log:
+  fields:
+    service: registry
+storage:
+  delete:
+    enabled: true
+  cache:
+    blobdescriptor: inmemory
+  filesystem:
+    rootdirectory: /var/lib/registry
+http:
+  addr: :5000
+  headers:
+    X-Content-Type-Options: [nosniff]
+    Access-Control-Allow-Origin: ['http://localhost']
+    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
+    Access-Control-Allow-Headers: ['Authorization']
+    Access-Control-Max-Age: [1728000]
+    Access-Control-Allow-Credentials: [true]
+    Access-Control-Expose-Headers: ['Docker-Content-Digest']
--- a/examples/ui-as-standalone/simple.yml
+++ b/examples/ui-as-standalone/simple.yml
@@ -0,0 +1,19 @@
+version: '2.0'
+services:
+  registry:
+    image: registry:2.6.2
+    ports:
+      - 5000:5000
+    volumes:
+      - ./registry-data:/var/lib/registry
+      - ./registry-config/simple.yml:/etc/docker/registry/config.yml
+
+  ui:
+    image: joxit/docker-registry-ui:static
+    ports:
+      - 80:80
+    environment:
+      - REGISTRY_TITLE=My Private Docker Registry
+      - URL=http://localhost:5000
+    depends_on:
+      - registry
--- a/src/index.html
+++ b/src/index.html
@@ -32,6 +32,7 @@

 <body>
  <app></app>
+  <script src="scripts/init.js"></script>
  <!-- build:js scripts/vendor.js -->
  <script src="../node_modules/riot/riot+compiler.min.js"></script>
  <script src="../node_modules/riot-route/dist/route.js"></script>
--- a/src/scripts/init.js
+++ b/src/scripts/init.js
@@ -0,0 +1,27 @@
+const REGISTRY_SERVER_KEY = 'registryServer';
+let registryServersStr = localStorage.getItem(REGISTRY_SERVER_KEY);
+let registryServers = [];
+if (registryServersStr !== null){
+    let rs = JSON.parse(registryServersStr);
+    if (rs instanceof Array) {
+        registryServers = rs;
+    }
+}
+
+const apiHost = location.protocol+'//'+location.host;
+if (!registryServers.includes(apiHost)) {
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', apiHost+"/v2/", true);
+    xhr.onload = function (e) {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                const version = xhr.getResponseHeader('Docker-Distribution-Api-Version');
+                if (version.startsWith('registry/2.')) {
+                    registryServers.unshift(apiHost);
+                    localStorage.setItem(REGISTRY_SERVER_KEY, JSON.stringify(registryServers));
+                }
+            }
+        }
+    };
+    xhr.send();
+}
Author	SHA1	Message	Date
wildloop	115105a2a0	Init with the docker registry hosted on the same domain as UI	2018-11-12 20:00:05 +01:00
Joxit	5173110883	Add new example for https://github.com/Joxit/docker-registry-ui/issues/26#issuecomment-415995589	2018-08-25 23:33:33 +02:00
Joxit	d3e93f7064	Fix demo for v0.4.0, sorry 😕	2018-08-04 18:58:36 +02:00
				`@@ -0,0 +1 @@`
				`registry:$2y$11$1bmuJLK8HrQl5ACS/WeqRuJLUArUZfUcP2R23asmozEpfN76.pCHy`