README
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:
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:
+-- 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"/>
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')