You can install Mobiscroll with the help of the CLI or load it directly from NPM.

Using the CLI

The Mobiscroll CLI can be installed with NPM and YARN and was designed to help with configuring your projects and easily install the assets.

Install the CLI with NPM

$ npm install -g @mobiscroll/cli

Install the CLI with YARN

$ yarn global add @mobiscroll/cli

Run mobiscroll config in the root folder of your app

$ mobiscroll config ionic

$ mobiscroll config angular

$ mobiscroll config angularjs

$ mobiscroll config javascript

$ mobiscroll config jquery

$ mobiscroll config react

$ mobiscroll config vue

It is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

Setting up for CI/CD

The config command will create a file named .npmrc in the project root, containing the access tokens to the Mobiscroll NPM registry. Commit this file into the repository to ensure the package will install for other team members and in CI/CD environments.

When used with Yarn 2 or 3, a different file is used, named .yarnrc.yml. Make sure this is also added to the repository.

When used with Docker, make sure to copy the .npmrc or .yarnrc.yml file together with package.json, to make sure that the install process will have access to the Mobiscroll NPM registry. Here's a Dockerfile example:

FROM node:18.12.0 as build

ENV NODE_ENV production

WORKDIR /app

COPY package.json package-lock.json .npmrc ./

RUN npm install

COPY . .

# ...

Using NPM

You will have to log in and assign the @mobiscroll scope to the mobiscroll npm registry. It is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

NOTE: This method will not work with the trial version. For the trial version use the CLI as described above.

$ npm login --registry=https://npm.mobiscroll.com --scope=@mobiscroll

Install the package that you want to use

Javascript: $ npm install @mobiscroll/javascript
jQuery: $ npm install @mobiscroll/jquery
Angular JS: $ npm install @mobiscroll/angularjs
Angular: $ npm install @mobiscroll/angular
React: $ npm install @mobiscroll/react
Vue: $ npm install @mobiscroll/vue

Note (June 1, 2023):

We had an issues with our private npm registry on May 31, 2023 that has been fixed. New tokens will be needed since the private npm registry had to be rebuilt internally.

First thing’s first, the CLI: Make sure to have the Mobiscroll CLI installed. More info on it here - https://docs.mobiscroll.com/cli (make sure that you have at least Node.js 11 installed).

In case of NPM and Yarn 1: Call a mobiscroll login in your application root folder (use the email address and password of the licensed account) followed by pushing the .npmrc into your repository for CI/CD.

In case of Yarn 2+: Call mobiscroll logout followed by a mobiscroll config {framework} to install the latest version or specify the exact version like mobiscroll config {framework} --version 5.22.3. This will take care of refreshing the tokens after which you can push the .yarnrc.yml into your repository for CI/CD.

Caching and checksum issues: Since the npm packages were rebuilt, the checksum of the packages changed and in some CI/CD environments this causes problems.

If that’s the case try deleting the package-lock.json (in case of NPM) or yarn.lock (in case of Yarn) files, and run npm install / yarn install again, and push the updated files to the repository.

In some cases, when using Yarn, running yarn cache clean --all is also necessary (locally and on the server).

If cleaning the cache does not work, try setting the YARN_CHECKSUM_BEHAVIOR=update env variable on the CI/CD environment.

What's next?

Learn about team NPM accounts and why it is recommended to use them.
For instructions on how to use Mobiscroll with Ionic Pro read this guide.