asked on April 12, 2018
Do you have an example of how to integrate Flexmonster with create-react-app (https://github.com/facebook/create-react-app)?
⋅ April 12, 2018
Hi Irvin,
We don't have a special example for create-react-app but I hope our documentation and examples will provide all necessary answers to your questions.
Please take a look at our manual about integration with React https://www.flexmonster.com/doc/integration-with-react/
Here you can find our sample on Github https://github.com/flexmonster/pivot-react
Does it help?
Thanks,
Dmytro
⋅ April 12, 2018
I was only able to get it to work if I referenced the CDN from index.html. This is not desirable as I need to use flexmonster assets from node_modules.
⋅ April 12, 2018
Here's an example. To run
Note that I am using the CDN version in public/index.html. Ideally, I would be able to npm install flexmonster.
⋅ April 13, 2018
Hello, Irvin,
Thank you for sharing the example.
Please check this sample on GitHub: https://github.com/flexmonster/pivot-react/tree/feature-local-flexmonster/ES6. It demonstrates how to include local flexmonser.js file via Webpack. Please note that you should copy flexmonster/ folder inside node_modules.
Does it work for your case?
Regards,
Tanya
⋅ April 13, 2018
So that I understand, I need to perform the following steps:
There is no standard npm install --save flexmonster option today.
Thanks.
⋅ April 13, 2018
Irvin,
In order to use flexmonster.js locally, you need to copy flexmonster/ to node-modules.
The process of Webpack configuration is quite simple:
You need to install CopyWebpackPlugin. This plugin copies individual files or entire directories to the build directory.
Command to install:
npm i -D copy-webpack-plugin
Here is really simple configuration needed for webpack.config.js:
https://github.com/flexmonster/pivot-webpack/blob/master/webpack.config.js
Please let me know if you managed to configure everything successfully.
Regards,
Tanya
⋅ April 13, 2018
I can get it to work if I explicitly import the CSS i.e. import 'flexmonster/flexmonster.min.css' and set toolbar={false}.
When toolbar={true}, the following error is thrown:
flexmonster.js:9 Uncaught ReferenceError: FlexmonsterToolbar is not defined at flexmonster.js:9
Oh well. Thanks.
⋅ April 16, 2018
Hello Irvin,
Thank you for writing. Please check that you have successfully copied flexmonster/ folder which you have downloaded from the website. After that please check the Flexmonster's initialization object. Flexmonster component needs to have the reference on its root directory in componentFolder property. However, as soon as you have already included flexmonster/ folder into your project you can skip this property when initializing the component or just leave it unspecified. Here is the example:
<FlexmonsterReact.Pivot toolbar={true} componentFolder="" width="800px" report="https://cdn.flexmonster.com/reports/report.json"/>
That should fix the issue with the toolbar. Also, please note that in such case there is no need to include .CSS files explicitly.
Let us know if everything works fine for you.
Regards,
Dmytro
