Ufp-Core-Frontend is a Webpack build manager and a redux-runtime.
The setup makes uses ReduxThunk and ReduxObservable.
Ufp-Runfest concept defines the runtime configuration in a easy to use manner, a Runfest.js is registered against the ufp-core and provides registering to the redux stor
build in modules:
ufp-startup providers handling of application initialisation
ufp-menu provides application menu handling
ufp-epic provides RxJs ReduxObservable Epic registration
ufp-intl provides managing of ReactIntl redux internationalisation handling, handling redux-intl provider
ufp-config key/value store for application settings (see example)
ufp-react react15.x react handling providing a global redux-provider
ufp-redux-form ReduxForm Runfest registering Reducer and provides ReduxForms - as is
-
Set up empty npm project
> npm init
-
Install ufp-core using npm
> npm install ufp-core --save
Execute ufp specific package.json project update for putting everything in place (see above)
> node node_modules/ufp-core/ext/Install
-
Development folder setup
src/main.js src/index.html ...
-
Run development server using ufp- prepared npm script
> npm run ufp-start
-
Run production build into /dist folder using ufp- prepared npm script
> npm run ufp-compile
when installed using -g ufp-core provides the following cli commands:
$ ufp --help
ufp-core.js
default ufp command
Commands:
ufp-core.js default ufp command [default]
ufp-core.js i initialise ufp-application [aliases: init]
ufp-core.js s [dist] start ufp application dev server [aliases: start]
ufp-core.js b build ufp application [aliases: build]
ufp-core.js st some informations about ufp-application[aliases: status]
ufp-core.js ct create predefined test cases e.g. existance
[aliases: createTests]
ufp-core.js t execute the unit tests [aliases: test]
ufp-core.js sp show npm package description of used packages
[aliases: showpackages]
Options:
--version Show version number [boolean]
--help Show help [boolean]
// main.js
// import main ufp-core
import UfpCore from 'ufp-core'
// startup which creates redux stores and bound Manifests
UfpCore.startupUfpCore()
the following example uses the config reducer to store default values upon registration, sets them inside the redux store using a redux action and prints out its current value using the ufpAutoConfigured selector to retrieve a value from it
// main.js
import UfpCore from 'ufp-core'
import {ConfigRunfest, registerConfigDefault} from 'ufp-core/lib/modules/config'
registerConfigDefault({foo: 'bar'})
registerConfigDefault({bar: 'foo'})
UfpCore.registerManifest(ConfigRunfest)
UfpCore.startupUfpCore()
ConfigRunfest.setConfigValue({
key: 'bar',
value: 'willi'
})
ConfigRunfest.setConfigValue({
key: 'hoschi',
value: 'willi'
})
console.log('DEMO Retrieve Config', ConfigRunfest.getConfigValue({key: 'bar'}))
- for binary execution of installed npm modules enter ./node_modules/.bin into your $PATH env config
@startuml
- comp4props
- group
- propTypes @enduml