Component to create common layout for eMagiz Widget based on html/css framework.

We could use this as boilerplate to develop other components.

STRUCTURE

This widget has structure as follows:

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

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

3. test/ : test folder. The component will be imported in this test project so we can test it before published. This already has everything setup correctly.

• 2.1 MxReactWidget: a react component to import the tested component. This component will be build to Mendix Widget.
• 2.2 test/: Mendix Project use the MxReactWidget so it tests the component.

4. tsconfig.json: typescript configuration
5. 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/ and also copy this folter to test/node_modules/emagiz-widget-layout/ so the test project could use it right away.

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-layout -D

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.