MetaboHUB / PeakForest - Chemical Library

Metadata

• authors: [e-mail], [e-mail]
• creation date: 2023-05-26
• main usage: Vue.js webcomponents use for PeakForest V3 Web-Applications.

TODO add a fiew words about PeakForest project

Getting Started

This WebComponent library is compatible with projects using Vue.js 3 and TypeScript. This project is based on Vue.js, Vite and Vuetify frameworks.

Prerequisites

Note: this section is for developers who want to get involved into this project.

• Node 18.16.0 (mandatory) - we recommand you to use Node Version Manager
• Vue 3 (mandatory) - install with npm install -g vue@latest
• git (recommended) - used during build to extract current commit hash/tag into showcase webapp footer.
• curl (very optional) - only used for CI/CD

Installing

Note: this section is for developers who want to implement and use this library into their own project(s). To add the library to your Node.js project, please enter the following commands:

# if you already have installed the library, you must remove the previous one:
npm remove @metabohub/peakforest-chemical-library

# config. the GitLab registry (dev. version)
# WARNING: you must create a GitLab API Token with this rights: api, read_api, read_repository
npm config set -- //forgemia.inra.fr/api/v4/projects/11788/packages/npm/:_authToken=$GITLAB_API_TOKEN
npm config set @metabohub/peakforest-basal-library:registry https://forgemia.inra.fr/api/v4/projects/11788/packages/npm/

# to install the library in your current Node.js project:
npm i --save @metabohub/peakforest-chemical-library

Then you must import the library in your src/main.ts file:

// import the library and its styles
import { MetabohubPeakForestChemicalLibrary } from '@metabohub/peakforest-chemical-library';
import '@metabohub/peakforest-chemical-library/dist/src/components/main.css';

const app = createApp(App);
registerPlugins(app); // <= import your plugin like vuetify, ...
app.use(MetabohubPeakForestChemicalLibrary); // <= add this line!
app.mount('#app');

Finally you can add our WebComponent in you own Vue components:

<template>
  <div class="demo">
    <mth-pf-X />
  </div>
</template>

<script lang="ts">

// from Vue core
import { ref } from "vue";

export default {
  name: "Demo",
  setup() {},
};
</script>
<style lang="scss"></style>

Developments

Library build and publish

Build and publish the library

# install node modules listed into 'package.json' / 'package-lock.json' files
npm install
# build the library
npm run build:lib
npm pack
# publish the library
npm publish

Notes:

• the publication registery is set into these files:
  • .npmrc.
  • package.json - key "publishConfig".
• the publication is automatic during CI/CD process; see .gitlab-ci.yml file.
• during the GitLab CI/CD pipeline, the previous package with the same version identifier is removed thanks:
  • curl commands - to get all published packages in targeted GitLab packages registery and remove a specific one
    (it require a GitLab API token with correct authorizations under MASTER_TOKEN CI/CD variable)

Standalone showcase build

Build the standalone version with these commands

# install node modules listed into 'package.json' / 'package-lock.json' files
npm install
# either build the DEV standalone version
npm run build:dev
# or build the PROD standalone version
npm run build:prod

Please refer to .env, .env.developement and .env.production files to see changes between PROD and DEV versions.

Note: you can run the standalone version into "dev mode" thanks npm run dev command.

Versioning

We use GitLab for versioning. For the versions available, see the tags on this repository.

Consult the Changelog file for further informations about versions and changes.

Authors

• Nils Paulhe - Initial work - MetaboHUB, INRAE, PFEM.
• Célian Barbe - Initial work - MetaboHUB, INRAE, PFEM.

See also the list of contributors who participated in this project.

License

This project is licensed under the Apache 2 License - see the LICENSE.md file for details

Acknowledgments

• MetaboHUB
• INRAE