Running Local Environment

The Morningstar Design System repository consists of three directories—library, doc-site and sandbox.

Required Tools

The repository runs using Node JS or nvm-windows. We recommend:

  • Node 8.11.1
  • npm 5.6.0+

Directories

Doc Site

Use the doc-site directory when publishing documentation to the MDS documentation website. doc-site contains several sub-directories, but work will primarily be done in:

  • /doc-site/docs/ — Contains the documentation pages—for components, visual language, etc.—that are visible on the MDS site.
  • /doc-site/components/ — Contains the components we use to render our documentation, like Do/Don’t examples, reference tables, and navigation. These components are for internal MDS use only and are not included in our NPM library package.

Using Local Library

By default, the doc-site directory will look to the latest released version of the MDS library from Morningstar’s NPM Nexus server. When doing consecutive work on both the doc-site and the library—for example, making an update to the Buttons component and adding new documentation to account for the change—it is necessary to, instead, point doc-site to your local library source code.

To point your local doc-site environment to the local version of library:

  1. Go into the root directory of the doc-site
  2. Run the command npm run link-local-library in your terminal
  3. Then run npm start from doc-site and you will be referencing the source code files from your local version of the library

To point your local doc-site environment back to NPM for the latest released version of the library:

  1. Go into the root directory of the doc-site
  2. Run the command npm run unlink-local-library in your terminal
  3. Then run npm start from doc-site and you will be referencing the source code files from latest NPM released version of the library

Terminal Commands

Command
Description

npm install

Installs the node modules necessary to run the local environment, including the latest version of the MDS library.

npm start

Builds the project and launches a local development server.

ctrl + c

Stops the server.

npm run link-local-library

Points doc-site to local version of your library, instead of the latest released version.

npm run unlink-local-library

Points doc-site to the latest released version of MDS library.

  • Refer to the doc-site README for additional information on running doc-site locally.

Library

Use the library directory when building new components, adding constants and mixins, or creating tests. library contains the source code for the components and styles shipped in the MDS NPM package, as well as the component AVR and unit testing suites.

  • /library/components/ — Contains the source code for the components included in the MDS NPM package.
  • /library/constants/ — Definition of library constants.
  • /library/styles/ — SCSS files containing all library mixins for typography, color, space, and more.
  • /library/test/ — Contains the AVR and unit testing suites. AVR test files are located in /library/test/visual and unit test files are in /library/test/unit.

Terminal Commands

Command
Description

npm install

Installs the node modules necessary to run the local environment.

npm start

Builds the project and launches a local development server.

ctrl + c

Runs unit tests.

npm test

Stops the server.

npm run avr

Runs AVR tests.

npm run avr:approve-new-baseline

Promotes the latest AVR test images.

  • Refer to the library README for additional information on running library locally.

Sandbox

Use sandbox as a local playground to compose examples with the latest released version of the MDS library. You can see composed examples here.

You can compose MDS UI library components under the sandbox/includes directory and sandbox/docs/sandbox/composed-test.njk file. The composed examples can be viewed on http://localhost:3000/sandbox/composed-test.html.

Terminal Commands

Command
Description

npm install

Installs the node modules necessary to run the local environment.

npm start

Builds the project and launches a local development server.

ctrl + c

Stops the server.

npm run link-local-library

Points sand-box to local version of your library, instead of the latest released version.

npm run unlink-local-library

Points sandbox to the latest released version of MDS library.

  • Refer to the sandbox README for additional information on running sandbox locally.
©2019 Morningstar, Inc. All rights reserved. Terms of Use