Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@digibib/deichman-admin-frontend-common

Package Overview
Dependencies
Maintainers
3
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@digibib/deichman-admin-frontend-common

Set of common Deichman Svelte components

  • 6.0.1
  • npm
  • Socket score

Version published
Weekly downloads
3
Maintainers
3
Weekly downloads
 
Created
Source

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) dev@deichman.no

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 :)

FAQs

Package last updated on 19 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc