Installation

We recommend that you install Modes LC components locally. You can also cherry pick individual components for faster load times. If you’re using React, make sure to check out the page for React.

Local installation

The ideal way of installing Modes LC components is locally installing it from our private npm registry. Currently the package is available through both GitHub and Azure, but we strongly recommend using GitHub Packages for installation. The Azure package will be deprecated at a later date.

Authentication

To authenticate to GitHub Packages, and install the library package:

• you must add @metsooutotec:registry=https://npm.pkg.github.com to your project’s .npmrc configuration file, located in your projects root. This guides the npm installation to look for the package in this private GitHub packages registry.
• you must create a classic personal access token for your enterprise GitHub account, and add the token to your personal, local, .npmrc folder, as described in GitHub’s documentation here. The PAT must be a classic token in GitHub with at least read:packages scope, and you must click ‘Configure SSO’ and then authorize the Metso organization for your newly created PAT.

Then, simply install the package with the following command:

npm install @metsooutotec/modes-lc-components

To fetch the package from Azure DevOps (legacy, will be deprecated):

If you have issues with access rights, try adding @mogroup:registry=https://pkgs.dev.azure.com/outotec/_packaging/Outotec.React/npm/registry/ to your project’s .npmrc file. For authentication, you will need to create a personal access token in Azure. See DSUI’s getting started page for more information, as the authentication is the same for both libraries since they are hosted in the same place in Azure.

Cherry picking

The previous approach is the easiest way to load Modes LC components, but easy isn’t always efficient. You’ll incur the full size of the library even if you only use a handful of components. This is convenient for prototyping or if you’re using most of the components, but it may result in longer load times in production. To improve this, you can cherry pick the components you need.

Cherry picking can be done from your local installation. This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load component manually.

Here’s an example that loads only the button component. Again, if you’re not using a module resolver, you’ll need to adjust the path to point to the folder Modes LC components is in.

<link rel="stylesheet" href="/path/to/modes-lc-components/dist/themes/light.css" />

<script type="module" data-modesui="/path/to/modes-lc-components/dist">
  import '@metsooutotec/modes-lc-components/dist/components/lc-line-chart/lc-line-chart.js';

  // <mo-lc-line-chart> is ready to use!
</script>

You can copy and paste the code to import a component from the “Importing” section of the component’s documentation.

<script type="module" src="https://modes-lc.metso.com/dist/components/lc-line-chart/lc-line-chart.js"></script>
<!-- <mo-lc-line-chart> is ready to use! -->

Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the “Dependencies” section of its docs.

Bundling

Modes LC components is distributed as a collection of standard ES modules that all modern browsers can understand. However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.

To use Modes LC components with a bundler, first install Modes LC components along with your bundler of choice.

npm install @metsooutotec/modes-lc-components

Now it’s time to configure your bundler. Configurations vary for each tool, but here are some examples to help you get started.

Example webpack config

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    // Bundle styles into main.css
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'node_modules/@metsooutotec/modes-lc-components/dist/assets'),
          to: path.resolve(__dirname, 'dist/modes-lc/assets')
        }
      ]
    })
  ]
};

Once your bundler is configured, you’ll be able to import Modes LC components components and utilities.

import '@metsooutotec/modes-lc-components/dist/themes/light.css';
import '@metsooutotec/modes-lc-components/dist/components/lc-line-chart/lc-line-chart.js';
import { setBasePath } from 'modes-lc-components/dist/utilities/base-path.js';

// Set the base path to the folder you copied Modes LC components's assets to
setBasePath('/path/to/modes-lc-components/dist');

// <mo-button>, <mo-icon>, <mo-input>, and <mo-rating> are ready to use!