Running Local Environment

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

• 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

• 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

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