EAssessment project react components

Usage no npm install needed!

<script type="module">
  import easReactComponents from 'https://cdn.skypack.dev/eas-react-components';



Table of Contents


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:

See notes for other info.


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


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 = {

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:

+-- eas-react-components@1.0.x -> <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"/>


Build skins:

npm run skins

It'll build files for skins here:


Naming rules for same hash:


so it builds to


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


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')