eas-components

Table of Contents

• Run demo
• Build library
• Link library to core project
• Publish library like a npm module
• Install library to core project
• Export of components
• Import of components
• Skins
• Notes

Description

Project with react components for usage in the Core Frontend of E-assessment application.

To use it in demo see Run demo

To use it like library in core project you can do:

• in dev: link or install locally
• in production: publish lib and install it to core project

See notes for other info.

Usage

Run demo

npm i
npm run dev

• Server url: localhost:8081
• Webpack dev server url: localhost:8081/webpack-dev-server/ (with supports hot-reload and some other cool features(if set up properly))

You'll see after it:

It is recommended to update your node and npm version to the latest available. If you are a windows user you can use npm-windows-upgrade.

Build library

Build project as library

npm run lib

or

npm run lib-watch

You'll see following files in /dist direcorty:

Link library to core project

There are two ways:

1st way

In core project type this after build components project as library:

npm link <path_to_eas-components>

for example:

npm link ..\..\..\eas-components

** 2nd way**

Components to global link:

npm link

In core project type this after build components project as library:

npm link eas-react-components

It will create a shortcut from node_modules folder of core application to components folder. You'll see this:

Publish library like a npm module:

In components project type this:

npm version patch
npm publish

Install library to core project

You can install it locally or from npm.

Dev, locally:

• May be you need to delete linked module that was linked before

  rm -rf .\node_modules\eas-react-components

• Install it

  npm i --save <path_to_library>

  for example:

  npm i --save ..\..\..\eas-components

From npm:

After that you publish component project you can install it to core project.

It needs for deploying in environment or test locally npm published library.

• Make sure that it has in package.json:

  {
    ...
    "dependencies": {
      ...
      "eas-react-components": "1.0.2",
      ...
    }
    ...
  }
  

• May be you need to delete linked module that was linked before

  rm -rf .\node_modules\eas-react-components

• Install it

  npm i

Export of components

In order to export components, add them to src/app-entry/export.js

It haves to looks like this:

...
import Title from 'title/title/title';
...

module.exports = {
  ...
  Title
  ...
};

Import of components

Make sure that you have components module in core app:

npm ls --depth=0 | find "eas-react-component"

You must see this:

+-- [email protected] -> <something>

So you can import components like this:

import { Title } from 'eas-react-templates';

If you want to use it in .rt create wrapper in app\EAssessment\EAssessment.UI.Common\app-common\components lie this:

import { Title } from 'eas-react-components';

export default Title;

And then use it in .rt:

<rt-require dependency="app-common/components/title.es6" as="Title"/>

Skins

Build skins:

npm run skins

It'll build files for skins here:

webpack/config/public/skins-build

Naming rules for same hash:

test-component/test-component.less
test-component/_skins/test-component.one-skin.less
test-component/_skins/test-component.another-skin.less

so it builds to

webpack/config/public/app.css
webpack/config/public/skins-build/index.one-skin.css
webpack/config/public/skins-build/index.another-skin.css

and will be in one scope, for example:

...
.hello-1EHS1 {
  background-color: red;
}
...
.hello-1EHS1 {
  background-color: darkgreen;
}
...

You can run demo with skin that you need:

npm run dev -- --skin one-skin

Notes

To run it this moments are required:

• webpack externals in comonents:

  externals = {
        'react': 'react',
        'react-dom': 'react-dom',
        'jquery': 'jquery',
        'react-autosuggest': 'react-autosuggest',
        'react-notification-system': 'react-notification-system',
        'react-validation-mixin': 'react-validation-mixin',
        'react-validatorjs-strategy': 'react-validatorjs-strategy',
        'react-widgets': 'react-widgets'
    };

• webpack react-templates-loader option targetVersion

  {   
      test: /\.rt$/i,
      loader: 'react-templates?targetVersion=0.14.0'
  }

• in core project added and installed dependencies that in library externals

• core project webpack aliases should contained that in library externals. e.g.:

  'react': path.resolve('./node_modules/react'),
  'react-dom': path.resolve('./node_modules/react-dom'),
  'react-autosuggest': path.resolve('./node_modules/react-autosuggest'),
  'react-notification-system': path.resolve('./node_modules/react-notification-system'),
  'react-validation-mixin': path.resolve('./node_modules/react-validation-mixin'),
  'react-validatorjs-strategy': path.resolve('./node_modules/react-validatorjs-strategy'),
  'react-widgets': path.resolve('./node_modules/react-widgets')