MetaboCloud - Microservices Clients - Library

Metadata

• authors: [email protected], [email protected]
• creation date: 2023-05-26
• main usage: Vue.js webcomponents use for PeakForest V3 Web-Applications and MetaboHUB WebApp

Description

This project hosts webcomponents that can be re-used in any Vue3 libraries or WebApps. These webcomponents are designed to

• interact with MetaboCloud microservices (send data, compute, ...).
• display information fetched from MetaboCloud microservices.

Features

• :information_source: display property: display compounds chemical information
• :atom: display compounds: viewer for compounds, using their identifier as key
• :arrows_counterclockwise: convert: convert compounds from a chemical format to an other one

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.

Before you begin, ensure you have met the following requirements:

• Programming Language: NodeJS version 20.19+ and npm version 11.7 or higher
• Frameworks: Vue.js version 3.4+, Vuetify.js version 3.5+

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: npm i @metabocloud/microservices-clients-library

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

// import the library and its styles
import { MetaboCloudMicroservicesClientsLibrary } from '@metabocloud/microservices-clients-library';
import '@metabocloud/microservices-clients-library/dist/src/components/main.css';

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

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

<template>
  <div class="demo">
    <mth-pf-display-property property-label="Hello" property-value="World" />
  </div>
</template>

<script lang="ts">

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

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

Running the tests

You can run unit tests with the following commands:

# run unit tests
npm run test:unit
# run unit tests with coverage report
npm run test:coverage

You can run e2e tests with the following commands:

# launch the library as showcase mode in a first terminal...
npm run dev
# ... in a second terminal, run e2e tests
npm run test:e2e

:warning: you can update OpenAPI generated code with the following commands

# update CDK REST API client generated code
npm run openapi-generator:cdk
# update Goslin REST API client generated code
npm run openapi-generator:goslin
# update InChI REST API client generated code
npm run openapi-generator:inchi
# update InDex REST API client generated code
npm run openapi-generator:index

:warning: you can update in-house MetaboHUB libraries with the following command

# update basal lib
npm remove @metabohub/peakforest-basal-library &&\
  npm config set @metabohub:registry https://forge.inrae.fr/api/v4/projects/11779/packages/npm/ &&\
  npm i --save @metabohub/peakforest-basal-library
# update chemical lib
npm remove @metabohub/peakforest-chemical-library &&\
  npm config set @metabohub:registry https://forge.inrae.fr/api/v4/projects/11788/packages/npm/ &&\
  npm i --save @metabohub/peakforest-chemical-library

Deployment

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

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 registry is set into these files:
  • .npmrc (note in this projects, created during CI/CD by init-npmrc-file.sh script).
  • 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 registry and remove a specific one
    (it require a GitLab API token with correct authorizations)

You can use non-stable version of the library using the GitLab npm package registry:

# if you already have installed the library, you must remove the previous one:
npm remove @metabocloud/microservices-clients-library
# config GitLab npm registry
npm config set @metabocloud:registry https://git.mesocentre.uca.fr/api/v4/projects/241/packages/npm/
# to install the library in your current Node.js project:
npm i --save @metabocloud/microservices-clients-library

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.development 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.

Contributing

We welcome contributions! Please follow these steps:

How to Contribute

• create you own development branch
• before pushing it to the repository, please run the npm run lint command and check/ fix any error
• once your developments done, please create a merge request on gitlab

Development Guidelines

Please read Development Guidelines for details on our code of conduct, and the process for submitting pull requests to us.

Code Style

• Use Visual Studio Code IDE
• Use ESLint for JavaScript
• Use Prettier for code formatting
• Run npm run lint before committing

Changelog

All notable changes to this project will be documented in CHANGELOG.md. For the versions available, see the releases on this repository.

Authors

• Nils Paulhe - Initial work, support, project management - MetaboHUB, INRAE, PFEM.
• Célian Barbe - Initial work - MetaboHUB, INRAE, PFEM.
• Thomas Bellembois - project management, technical support - UCA
• Faustine Souc - Microservices OpenAPI files definition - MetaboHUB, INRAE, PFEM.
• Franck Giacomoni - project management - MetaboHUB, INRAE, PFEM.
• Nadia Goué, Antoine Mahul - project management - MetaboCloud, UCA.

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

License

MetaboCloud - Microservice Clients - Library is distributed under the MIT license.

Please refer to LICENSE.md file for further details.

Support & External resources

You can find installation procedure and code sample/snippet on this project's GitLab pages.

Acknowledgments

• MetaboCloud
• MetaboHUB
• Mesocentre
• INRAE and UCA

Additional Resources

• Showcases - Library showcases and code snippets
• Coverage - code coverage reports