Prerequisites

! It is expected that you open the Bash terminal in the root of the project. e.g. In Visual Studio Code the terminal is opened with shortcut ctrl + ~

e.g. D:\web\Pon.Universe\Frontend.Shared.ComponentLibrary

1. Install NVM and restart your computer.

   • Windows: https://github.com/coreybutler/nvm-windows/releases. Download 'nvm-setup.zip'.
   • Linux: See 'Installation' section of Node Version Manager.

2. Use NVM to install and set the correct version of Node.js. This should be the LTS version.

   Windows:

   • Get [version] by checking the content of the .nvmrc file for the correct Node.js version.
   • Install that Node.js version by executing $ nvm install [version]
   • Set the correct NVM version by executing $ nvm use [version]

   ! Nvm for windows it is not possible to automatically read the .nvmrc file to set the correct version. So manually use the version of the .nvmrc.

   Linux:

   • Run nvm use to set the correct version of Node.js.

Installation

! It is expected that you open the Bash terminal in the root of the project. e.g. In Visual Studio Code the terminal is opened with shortcut ctrl + ~

e.g. D:\web\Pon.Universe\Frontend.Shared.ComponentLibrary node -v

1. Install the NPM packages by running the following command:

npm install

2. Link local packages together and install remaining package dependencies

lerna bootstrap

Commands

Publishes the components to the valtech nexus server: https://nexus.valtech.nl/repository/Pon.Universe.Frontend.Shared/

npm run publish

This command will first check the current git branch and state. Publishing is only allowed from the develop branch and the branch must be up-to-date with no uncommited changes. If those criteria are not met, the command will throw an exception and the publication will not continue.

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

More information on creating / deleting packages and adding dependencies to packages:

https://efocus.atlassian.net/wiki/spaces/PONUNI/pages/1237975718/Front-end+Shared+Component+Library

Troubleshooting

Windows:

'npm' is not recognized as an internal or external command

Fix: Update to the latest nvm version and reinstall the used node version. Version 1.1.6 of NVM is incompatible with the later downloads of node and causes an error when installing NPM.

Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Fix: npm rebuild node-sass

Tools

For real-time code analysis & formatting in Visual Studio Code:

1. Install a EditorConfig plugin for your prefered IDE.

   • Visual Studio Code: e.g. EditorConfig for VS Code

2. Install a PrettierEditor plugin for your prefered IDE.

   • Visual Studio Code: e.g. Prettier - Code formatter

   ! Make sure that you point your Editor to the .prettierignore in the root of the project.

   ! e.g. Visual Studio Code: If you open the editor in the root of the project Pon.Universe/Automotive.Cluster.Common.CarSalesTool you don't need to change anything.

3. Install a ESLint plugin for your prefered IDE.

   • Visual Studio Code: e.g. ESLint

4. Install a Vue plugin for your prefered IDE.

   • Visual Studio Code: e.g. Vetur

For real-time code analysis & formatting in the browser:

1. Install Vue devtools for the browser
   • Chrome: Vue.js devtools
   • Firefox: Vue.js devtools

Visual Studio Code Settings

How to open the settings.json see here

    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],