Feature/#105 release via npm

Feature

Summary

The old MR has been closed due to the exposure of the AUTH_TOKEN.

Steps taken:

• revoke old token in gitlab
• create a new token with api access only
• remove .npmrc from git index
• add .npmrc to .gitignore
• delete complete remote branch via web interface
• clean up local references (git remote prune origin)
• create a new topic branch
• copy all changes from the old branch into the new topic one

This MR provides

• a tweaked build process to ease the integration of our product due to it's simplified build output. The Viewer can be easily installed via npm and can be integrated with a single import statement.
• the means to easily release new versions of the Viewer by calling a run script.
• a configured webpack-object that refers to the build
• a shell script to tweak the quasar-build output (tweak_build.sh)
• an updated README file according to the recent changes

Does the result of the MR comply to our "definition of done"?

• Unit tests passed
• Code reviewed
• Acceptance criteria met
• Functional tests passed
• Non-Functional requirements met
• Product Owner accepts the User Story

Documentation

• I updated the README (if applicable)
• I provided my functions with appropriate documentation
• I adjusted other parts of the documentation (if applicable)

A short note on Licensing (everything is fine ;-) )

I got back to Hans-Werner Hilse and as a result, we can leave everything as-is. Since we didn't patch the Quasar or rather OSD code, we don't have to change anything and can stick to the AGPL.

Tests

Are we able to test this new feature?

• Yes, everything can be done via unit tests.
• Yes, you can test by following these steps:

Prerequisites for testing purposes

Note: If you don't already have a working Vue environment, simply set it up once; otherwise you can skip this step:

npm i -g @vue/cli @vue/cli-service-global

scaffold a test project (not refering to any branch at all; just somewhere on your machine)

  vue create sample # just hit *enter* once to accept the defaults

The process might take some time ... it automatically creates a folder named according to the name you chose (sample in my case)

cd sample

Now you already have a basic, working Vue App.

Installation

1A) setup npm config

since npm communicates with the package api, we have to setup a valid level entrypoint

Registry setup

The following command sets up an instance level entrypoint; sufficient for an installation only.

echo @subugoe:registry=https://gitlab.gwdg.de/api/v4/packages/npm/ >>.npmrc

Note: fire this command inside your recently created test folder (sample; see above => prerequisites)

1B) install the Viewer

npm i @subugoe/tido

Integration

edit your main.js file located under src/main.js

and (for the sake of simplicity) empty the file completely!, and replace it's contents with that single line:

import '@subugoe/tido/dist/tido'

As a second step, edit your index.html file located inside the project's public folder (public/index.html)

change the following line

<div id="app"></div>

to

<div id="q-app"></div>

and finally copy our config object directly before the above mentioned div:

    <script id="tido-config" type="application/json">
    {
      "entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
      "colors": {
        "primary": "",
        "secondary": "",
        "accent": ""
      },
      "headers": {
        "all": true,
        "info": true,
        "navigation": true,
        "toggle": true
      },
      "labels": {
        "item": "Sheet",
        "manifest": "Manuscript"
      },
      "meta": {
        "collection": {
          "all": true,
          "collector": true,
          "description": true,
          "title": true
        },
        "manifest": {
          "all": true,
          "creation": true,
          "editor": true,
          "label": true,
          "location": true,
          "origin": true
        },
        "item": {
          "all": true,
          "label": true,
          "language": true
        }
      },
      "standalone": true
    }
    </script>

Run the Viewer

To test the integration, run:

npm run serve

and point your browser to: http://localhost:8080 (or whatever port is addressed on your machine)

Publishing

• 1. change the version of the viewer in the package.json file (that's due to the fact, that a pkg with the same version can't be published twice; even if you unpublished it before)
• 2. setup npm config (project level entry and auth)

rm ~/.npmrc # just make sure to start the config from scratch
echo @subugoe:registry=https://gitlab.gwdg.de/api/v4/projects/10921/packages/npm/ >>.npmrc
npm config set '//gitlab.gwdg.de/api/v4/projects/10921/packages/npm/:_authToken' "$AUTH_TOKEN"

replace $AUTH_TOKEN with your Token ID

It's up to you, if you want to follow the process in single steps.

if so:

• a)
  • npm run build
  • ./tweak_build.sh # assuming the script has eXecutable rights (chmod u=rwx ./tweak_build.sh otherwise)
  • npm publish --dry-run (does exactly the same publish does, but without uploading the package)

NOTE: if you leave the dry option, the package is published. so pls make sure to delete it again, after having proved it's successful upload, since it's about testing. you can find the result of your upload here

OR alternatively

• b)
  • run the (run-)script: npm run release which combines the three steps described above under a) (upload included)

• No, it is not possible.

Changelog

• I added a statement to the CHANGELOG. No, because it will be done automatically.

Related Tickets

Issue #105 Add all related issues and especially those to be closed.

Related

Closes

Issue #105

Logs and Screenshots

/cc Mathias Göbel, Frank Schneider, Michelle Weidling