@digibib/deichman-admin-frontend-common

Common svelte components to be shared among Deichman admin (Tjenestekatalog, Fuge) applications.

Technology used

All components, code, the tests, and all DevApp related stuff should be written using typescript.

The build system uses rollup.js.

Tests are written using the jest framework.

A small dev server is provided for rapid testing of component changes (the component wrapper containers must be created, if they do not exist from a previous iteration). The dev server uses rollup-plugin-serve and rollup-plugin-livereload.

Dev application

A small dev application was added to the project which makes visual testing of new components/component features easy.

To start the application execute

npm run dev

Structure

frontend-common
├─┬ devapp
│ ├── [comp-1]      // devApp contains one sub-folder for each component contained within the package
│ ├── [comp-2]
│ ...
│ ├── [comp-n]
│ ├── main.ts       // Main entry point
│ └── DevApp.svelte // Main DevApp app component
└─┬ public
  ├── bundle.js     // Generated bundle.js, see rollup.config.dev.js for configuration
  └── index.html    // Static index.html - app renders here

Configuration

The application is configured by the rollup.config.dev.js configuration file. In short, it uses rollup-plugin-livereload to achieve live reload on code changes, and rollup-plugin-serve to serve the requests on port 8900. The port number easily updatable in rollup.config.dev.js.

Live reload is watching public (implicitly changes in src, since those changes trigger rebuild of bundle.js) and devapp for changes.

Testing

To run the tests execute

npm run test

To run the tests in watch mode, run

npm run test:watch

See the terminal fur further options (to run all tests on change, only the failed ones, etc...).

Local development

To avoid deploying many dummy/temporary versions in the official nmp registry, it is wise to use a local NPM registry during development.

Running end configuring verdaccio

Verdaccio is a lightweight npm registry. To start it up as a local docker container run:

docker run -it -d --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

Add a user:

npm adduser --registry http://localhost:4873/
Username: dev
Password: dev
Email: (this IS public) [e-mail]

To log in, run:

npm login --registry http://localhost:4873/

Use deb/deb as username/password.

To publish, run:

npm publish --registry http://localhost:4873/

Configuring dependent projects

In all dependent projects the local repo needs to be referred for fe-common. This can be achieved by adding a custom .npmrc file with hte following content:

@digibib:registry=http://host.docker.internal:4873

Also make sure to add this line to /etc/hosts:

127.0.0.1 host.docker.internal

This makes sure that running npm -i locally would find the local verdaccio repo.

Note: this file is added to tjenestekatalog and fuge, but the registry is disabled (commented out):

;@digibib:registry=http://host.docker.internal:4873

To use local registry, uncomment the line above.

Development cycle

To create a new version, run

npm version [major|minor|patch]

Publish it to the local verdaccio repo:

npm publish --registry http://localhost:4873/

Make sure, .npmrc is correct in the dependent project (see above).

Update the dependent project to use the new npm version.

Run npm -i.

Rebuild the affected docker container.

Rinse and repeat :)