Merge pull request #372 from EOEPCA/dev

Main update

.github/workflows/build_and_push_dev.yml

@@ -0,0 +1,24 @@
+name: Build and push Docker Image for branches for development
+
+on: workflow_dispatch
+
+jobs:
+  push_to_registry:
+    name: Build and push Docker image to Docker Hub
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: get-npm-version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@main
+      - name: Push to Docker Hub
+        uses: docker/build-push-action@v1
+        with:
+          path: ./
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          repository: eoepca/open-science-catalog-frontend
+          tags: "v${{ steps.package-version.outputs.current-version }}-${{ github.head_ref || github.ref_name }}"

.github/workflows/bump_and_deploy.yml

@@ -1,4 +1,4 @@
-name: Bump version and Build and push Docker image to Docker Hub
+name: Bump version
 
 on:
   push:
@@ -58,22 +58,3 @@ jobs:
         env:
           NEW_TAG: ${{ steps.version-bump.outputs.newTag }}
         run: echo "new tag $NEW_TAG"
-
-  push_to_registry:
-    name: Build and push Docker image to Docker Hub
-
-    runs-on: ubuntu-latest
-
-    needs: bump-version
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v2
-      - name: Push to Docker Hub
-        uses: docker/build-push-action@v1
-        with:
-          path: ./
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-          repository: eoepca/open-science-catalog-frontend
-          tags: "${{ needs.bump-version.outputs.current-version }}-${{ github.head_ref || github.ref_name }}"

.gitignore

@@ -1,4 +1,10 @@
 # Created by .ignore support plugin (hsz.mobi)
+
+#stac-browser
+open-science-catalog-stac-browser
+static/stac-browser/*
+!static/stac-browser/stac-browser-config.js
+
 ### Node template
 # Logs
 /logs

Dockerfile

@@ -1,10 +1,23 @@
-FROM node:16-alpine3.14
+FROM node:16-alpine3.14 as browser
+RUN apk --no-cache add git
+
+RUN git clone https://github.com/EOEPCA/open-science-catalog-stac-browser.git
+WORKDIR /open-science-catalog-stac-browser
+RUN \
+npm i \
+&& npm run build
+
+
 
+FROM node:16-alpine3.14
 ENV NUXT_VERSION=2.15.8
 
 WORKDIR /app
 
 ADD . ./
+COPY --from=browser /open-science-catalog-stac-browser/dist/ static/stac-browser/
+COPY  static/stac-browser/stac-browser-config.js static/stac-browser/config.js
+
 RUN : \
   && npm install \
   && npm run build --standalone \
@@ -13,8 +26,8 @@ RUN : \
   # && npm install "nuxt-start@${NUXT_VERSION}" \
   && npm cache clean –force \
   && :
-
+RUN chmod +x ./docker-entrypoint.sh
 ENV NUXT_HOST=0.0.0.0
 ENV NUXT_PORT=3000
 EXPOSE 3000
-ENTRYPOINT ["npx", "nuxt", "start"]
+ENTRYPOINT ["/app/docker-entrypoint.sh"]

README.md

@@ -32,25 +32,50 @@ These endpoints are primarily used within the application [central store](./stor
 
 ## Development Setup
 
+### Install dependencies
+
 ```bash
-# install dependencies
 $ npm install
+```
+
+### Build and configure [Open Science Catalog STAC Browser](https://github.com/EOEPCA/open-science-catalog-stac-browser) locally
 
-# serve with hot reload at localhost:3000
+Find STAC Browser [runtime configuration](https://github.com/radiantearth/stac-browser/blob/v3.1.0-rc.1/docs/options.md) in
+`static/stac-browser/config.js`
+
+```bash
+$ npm run build:browser
+```
+
+### Serve with hot reload at localhost:3000
+
+```bash
 $ npm run dev
+```
+
+### Build for production and launch server
 
-# build for production and launch server
+```bash
 $ npm run build
 $ npm run start
+```
+
+### Generate static project
 
-# generate static project
+```bash
 $ npm run generate
+```
 
-#lint
-$ npm run lint (linting only)
-$ npm lintfix (lint and fix)
+### Lint
 
-#test
+```bash
+$ npm run lint #linting only
+$ npm run lint:fix #lint and fix
+```
+
+### Test
+
+```bash
 $ npm run test
 ```
 

docker-entrypoint.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+sed -i "s| catalogUrl:.*| catalogUrl: '${STATIC_ENDPOINT}/catalog.json'|" static/stac-browser/config.js
+npx nuxt start

package.json

@@ -1,11 +1,12 @@
 {
   "name": "open-science-catalog-frontend",
   "author": "EOX-A",
-  "version": "2.0.11",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
+    "build:browser": "git clone https://github.com/EOEPCA/open-science-catalog-stac-browser.git && cd open-science-catalog-stac-browser && npm i && npm run build && cp -r dist/* ../static/stac-browser/ && cd .. && cp -r static/stac-browser/stac-browser-config.js static/stac-browser/config.js && rm -rf open-science-catalog-stac-browser",
     "start": "nuxt start",
     "generate": "nuxt generate",
     "lint": "eslint . --ext js,vue",

pages/_.vue

@@ -17,18 +17,16 @@ export default {
     firstLoadDone: false,
   }),
   mounted() {
-    this.iframeSrc = `/stac-browser/?external=${this.prepareEndpoint(
-      this.$config.staticEndpoint
-    )}${this.$route.path}.json`;
+    this.iframeSrc = this.stacBrowserPath(this.$route.fullPath);
+
     window.addEventListener("message", (evt) => {
       if (evt.data && evt.data.navigate && this.firstLoadDone) {
-        const stringToReplace = `/external/${this.prepareEndpoint(
-          this.$config.staticEndpoint
-        )}`;
-        const parsedPath = evt.data.navigate
-          .replace(stringToReplace, "")
-          .replace(".json", "");
-        history.replaceState({}, null, parsedPath);
+        const innerPath = evt.data.navigate.replace(".json", "");
+        history.replaceState(
+          {},
+          null,
+          `${innerPath.length > 1 ? innerPath : "/catalog"}`
+        );
       } else {
         this.firstLoadDone = true;
       }
@@ -38,6 +36,10 @@ export default {
     prepareEndpoint(src) {
       return src.replace("https://", "").replace("http://", "");
     },
+    stacBrowserPath(path) {
+      let hashPath = path.length > 1 ? path + ".json" : "";
+      return `/stac-browser/#${hashPath}`;
+    },
   },
 };
 </script>