Installation.md

layout	title	published	Author	add toc	add sidebar
docs	Installation	2022-06-06	Kevin Frey	true	_sidebars\mainSidebar.md

Installation

For standard projects which already contain node module dependency bundling you can install and update the webcomponents with:

npm install @nfdi4plants/web-components@latest

Then you can choose any of the options mentioned here to use the components.

For projects without bundling, you can use rollup as an easy to use bundler:

Extensive explanation for rollup setup

1. Create a package.json with:

   {
       "dependencies": {
           "@nfdi4plants/web-components": "^0.6.1",
       },
       "devDependencies": {
           "@rollup/plugin-node-resolve": "^13.1.3",
           "@web/rollup-plugin-copy": "^0.3.0",
           "@web/rollup-plugin-html": "^1.10.3",
           "rollup": "^2.70.1",
           "rollup-plugin-minify-html-literals": "^1.2.6",
           "rollup-plugin-summary": "^1.4.3",
           "rollup-plugin-terser": "^7.0.2"
       }
   }

   Feel free to use the latest @nfdi4plants/web-components version.
2. Run npm install.
3. Create a rollup.config.js like here.
4. Create js file which references all web-components, exmp:

   // main.js
   import {Navbar, Footer} from "@nfdi4plants/web-components";

5. Run rollup --config rollup.config.js --bundleConfigAsCjs (Tested with rollup 3.1.0).
6. Reference bundle.js as shown here.

Examples

1. Fable/SAFE: nfdi-helpdesk
2. Fornax (rollup): nfdi4plants.github.io

Update

Update webcomponents with npm install @nfdi4plants/web-components@latest or according to project README.md.