Merge pull request #31 from moleculemaker/lambert8/marvinjs-editor

feat: add marvinjs editor

.dockerignore

@@ -0,0 +1,6 @@
+dist/*
+.angular/*
+node_modules/*
+.env
+Dockerfile
+docker-compose.*

.github/workflows/docker.yml

@@ -7,6 +7,7 @@ name: Docker
 #   Dockerfile is still valid.
 # To be able to push to dockerhub, this execpts the following
 # secrets to be set in the project:
+# - NPM_TOKEN : NPM auth token for accessing private chemaxon NPM registry
 # - DOCKERHUB_USERNAME : username that can push to the org
 # - DOCKERHUB_PASSWORD : password asscoaited with the username
 on:
@@ -39,6 +40,11 @@ jobs:
 
       - uses: actions/checkout@v3
 
+      - name: Authenticate with private NPM package
+        run: |
+          echo "//hub.chemaxon.com/artifactory/api/npm/npm/:_auth=${{ secrets.NPM_TOKEN }}" > $HOME/.npmrc
+          echo "npmrc_path=$HOME/.npmrc" >> "$GITHUB_ENV"
+
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
@@ -73,6 +79,9 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           build-args:
             configuration=production
+          secret-files: |
+            NPMRC=${{env.npmrc_path}}
+
 
       - name: Build and push Docker image (staging)
         if: github.event_name == 'pull_request'
@@ -85,3 +94,5 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           build-args:
             configuration=staging
+          secret-files: |
+            NPMRC=${{env.npmrc_path}}

.npmrc

@@ -0,0 +1,3 @@
+registry=https://hub.chemaxon.com/artifactory/api/npm/npm/
+
+always-auth=true

Dockerfile

@@ -1,17 +1,28 @@
+# Builds a Docker image for the ChemScraper Frontend
+#
+# Usage:
+#     docker build --secret id=NPMRC,src=$HOME/.npmrc -t moleculemaker/chemscraper-frontend .
+#
+
 # Use official node image as the base image
 FROM --platform=$BUILDPLATFORM node:16 as build
 
 # Set the working directory
 WORKDIR /usr/local/app
 
+# Pass in NPM credentials as a Docker build secret
+ENV NPM_CONFIG_USERCONFIG="/run/secrets/NPMRC"
+ENV DEBIAN_FRONTEND noninteractive
+
 # Add dependencies manifest to app
 COPY package.json package-lock.json ./
 
 # Install all the dependencies
-RUN npm install
+RUN --mount=type=secret,id=NPMRC npm install
 
 # Add the source code to app
-COPY . .
+COPY angular.json entrypoint.sh tsconfig*.json package*.json proxy.conf.json .
+COPY src ./src
 
 # Generate the build of the application
 RUN npm run build
@@ -23,7 +34,7 @@ RUN npm run build
 FROM nginx:1.23.3
 
 # Copy the build output to replace the default nginx contents
-COPY --from=build /usr/local/app/dist/chemscraper /usr/share/nginx/html
+COPY --from=build /usr/local/app/dist/chemscraper /usr/share/nginx/html/
 
 # Copy the nginx config file, which has a try_files rule for SPA routing
 COPY nginx/default.conf /etc/nginx/conf.d/default.conf

angular.json

@@ -27,19 +27,30 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/@chemaxon/marvinjs",
+                "output": "./assets/marvin-js"
+              }
             ],
             "styles": [
               "src/app/css/primeng_theme.scss",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeicons/primeicons.css",
               "src/styles.scss",
               "src/app/css/styles.scss",
-              "node_modules/pdfjs-dist/web/pdf_viewer.css"
+              "node_modules/pdfjs-dist/web/pdf_viewer.css",
+              "node_modules/@chemaxon/marvinjs/gui/css/editor.css"
             ],
             "scripts": [
               "node_modules/pdfjs-dist/build/pdf.js",
-              "node_modules/pdfjs-dist/build/pdf.worker.js"
+              "node_modules/pdfjs-dist/build/pdf.worker.js",
+
+              "node_modules/@chemaxon/marvinjs/gui/lib/promise-1.0.0.min.js",
+              "node_modules/@chemaxon/marvinjs/js/marvinjslauncher.js",
+              "node_modules/@chemaxon/marvinjs/js/util.js",
+              "node_modules/@chemaxon/marvinjs/js/webservices.js"
             ]
           },
           "configurations": {
@@ -128,16 +139,27 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/@chemaxon/marvinjs",
+                "output": "./assets/marvin-js"
+              }
             ],
             "styles": [
               "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeicons/primeicons.css",
               "src/styles.scss",
-              "src/app/css/styles.scss"
+              "src/app/css/styles.scss",
+              "node_modules/@chemaxon/marvinjs/gui/css/editor.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/@chemaxon/marvinjs/gui/lib/promise-1.0.0.min.js",
+              "node_modules/@chemaxon/marvinjs/js/marvinjslauncher.js",
+              "node_modules/@chemaxon/marvinjs/js/util.js",
+              "node_modules/@chemaxon/marvinjs/js/webservices.js"
+            ]
           }
         }
       }

docker-compose.marvin.yaml

@@ -0,0 +1,83 @@
+
+version: '3.9'
+
+secrets:
+  NPMRC:
+    file: ~/.npmrc
+
+networks:
+  proxy:
+
+
+services:
+  traefik:
+    image: "traefik:v2.10"
+    container_name: "chemscraper-traefik"
+    networks:
+      - proxy
+    command:
+      - --log.level=DEBUG
+      - --api.insecure=true
+
+      - --api=true
+      #- --api.dashboard=true
+      # Entrypoints
+      - --entrypoints.web.address=:80
+      # Docker setup
+      - --providers.docker=true
+      - --providers.docker.endpoint=unix:///var/run/docker.sock
+      - --providers.docker.exposedbydefault=false
+      - --providers.docker.watch=true
+    ports:
+      - "80:80"
+      #- "8080:8080"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+    #labels:
+    #  - "traefik.enable=true"
+    #  - "traefik.http.routers.traefik.entrypoints=web"
+    #  - "traefik.http.routers.traefik.rule=Host(`traefik.chemscraper.proxy.localhost`)"
+    #  - "traefik.http.routers.traefik.service=api@internal"
+
+
+  marvin:
+    image: hub.chemaxon.com/cxn-docker-release/chemaxon/mjs-webservice:latest
+    container_name: "chemscraper-marvin"
+    env_file:
+      - .env
+    networks:
+      - proxy
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.services.marvin.loadbalancer.server.port=8080"
+      - "traefik.http.routers.marvin.rule=Host(`chemscraper.proxy.localhost`) && (PathPrefix(`/rest-v1/`) || PathPrefix(`/demo.html`) || PathPrefix(`/js/`) || PathPrefix(`/gui/`))"
+
+  chemscraper:
+    image: moleculemaker/chemscraper-frontend:staging
+    container_name: chemscraper-frontend
+    build:
+      context: .
+      secrets:
+        - NPMRC
+    env_file:
+      - .env
+    networks:
+      - proxy
+
+    restart: unless-stopped
+
+    #volumes:
+    # - ./src/assets/config/:/usr/share/nginx/html/assets/config
+    # - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
+    # - ./dist/clean:/usr/share/nginx/html
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.chemscraper.rule=Host(`chemscraper.proxy.localhost`) && PathPrefix(`/`)"
+      - "traefik.http.services.chemscraper.loadbalancer.server.port=80"
+
+      - "traefik.http.middlewares.cors-headers.headers.accesscontrolallowmethods=GET,OPTIONS,PUT,POST,DELETE"
+      - "traefik.http.middlewares.cors-headers.headers.accesscontrolallowheaders=*"
+      - "traefik.http.middlewares.cors-headers.headers.accesscontrolalloworiginlist=http://localhost:4200,http://chemcraper.proxy.localhost"
+      - "traefik.http.middlewares.cors-headers.headers.accesscontrolmaxage=100"
+      - "traefik.http.middlewares.cors-headers.headers.addvaryheader=true"
+      - "traefik.http.routers.chemscraper.middlewares=cors-headers"

docker-compose.yaml

@@ -1,16 +1,31 @@
-version: '3'
+
+version: '3.9'
+
+secrets:
+  NPMRC:
+    file: ~/.npmrc
+
+networks:
+  proxy:
+
 
 services:
-  clean-frontend:
-    image: moleculemaker/clean-frontend:staging
-    container_name: clean-frontend
+  chemscraper:
+    image: moleculemaker/chemscraper-frontend:staging
+    container_name: chemscraper-frontend
     build:
       context: .
-    env_file: .env
+      secrets:
+        - NPMRC
+    env_file:
+      - .env
     ports:
-      - 8989:80
+      - 4200:80
+    networks:
+      - proxy
+
     restart: unless-stopped
 
     volumes:
-     - ./src/assets/config/:/usr/share/nginx/html/assets/config:ro
-     #- ./dist/clean:/usr/share/nginx/html:ro
+     - ./src/assets/config/:/usr/share/nginx/html/assets/config
+     - ./nginx/default.conf:/etc/nginx/conf.d/default.conf

nginx/default.conf

@@ -5,10 +5,15 @@ server {
 
     #access_log  /var/log/nginx/host.access.log  main;
 
+    location ~ ^/(demo.html|js/|gui/|rest-v1/) {
+        # Proxy these requests to our MarvinJS production backend
+        proxy_pass https://marvinjs.backend.mmli1.ncsa.illinois.edu;
+    }
+
     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
-        try_files $uri /index.html;
+        try_files $uri /index.html =404;
     }
 
     #error_page  404              /404.html;

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
@@ -20,6 +20,7 @@
     "@angular/router": "^15.1.0",
     "@ngx-matomo/router": "^4.0.1",
     "@ngx-matomo/tracker": "^4.0.1",
+    "@chemaxon/marvinjs": "^23.11.0",
     "ng-hcaptcha": "^2.1.0",
     "pdfjs-dist": "^3.6.172",
     "primeicons": "^6.0.1",

proxy.conf.json

@@ -0,0 +1,26 @@
+{
+  "/rest-v1": {
+    "localTarget": "http://localhost:8080",
+    "target": "https://marvinjs.backend.mmli1.ncsa.illinois.edu",
+    "secure": true,
+    "changeOrigin": true
+  },
+  "/demo.html": {
+    "localTarget": "http://localhost:8080",
+    "target": "https://marvinjs.backend.mmli1.ncsa.illinois.edu",
+    "secure": true,
+    "changeOrigin": true
+  },
+  "/gui": {
+    "localTarget": "http://localhost:8080",
+    "target": "https://marvinjs.backend.mmli1.ncsa.illinois.edu",
+    "secure": true,
+    "changeOrigin": true
+  },
+  "/js": {
+    "localTarget": "http://localhost:8080",
+    "target": "https://marvinjs.backend.mmli1.ncsa.illinois.edu",
+    "secure": true,
+    "changeOrigin": true
+  }
+}