Widget utilities

STRUCTURE

This widget has structure as follows:

1. src/ : source code folder where index.tsx is the main file

2. dist/ : after compiled, all the distribution files will places here. Make user main attribute in package.json points to dist/index.js

3. tsconfig.json: typescript configuration

4. webpack.config.js: webpack configuration

HOW TO USE

I. In the main folder

1. Install all dependencies

npm install

2. Compile the component

npm run build

After this step, webpack will build the component and put in dist/.

After each change, we have to run this command again (we could set up some webpack's watch to do this automatically)

3. Publish in npm

npm version patch
or
npm version major

npm publish

Note: Make sure you have account and granted access to the repo.

II. In test/ folder

1. Import the component from npm respository

npm install emagiz-widget-utilities

2. Run gulp

gulp

3. Open Mendix project and run

To sum up, if you change the component

• npm run build: to compile and copy the latest version to test project
• the change will be update in MxReactWidget
• make a change in MxReactWidget so guld can build new version of the widget
• refresh the browser to see the result.

3. When to publish the component

Only publish when tested fully in the test project which has similar enviroment as main eMagiz project. Increate the version correctly.