Menu
Download Free Trial

Integrating with create-react-app

Do you have an example of how to integrate Flexmonster with create-react-app (https://github.com/facebook/create-react-app)? 

8 answers

Public
Dmytro Zvazhii Flexmonster 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

Public
Irvin Waldman 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.

Public
Irvin Waldman April 12, 2018

Here’s an example.  To run

  1. Unzip
  2. Update license key in src/components/flexmonster/Pivot.js
  3. npm install
  4. npm start 

 
Note that I am using the CDN version in public/index.html.  Ideally, I would be able to npm install flexmonster.

Public
Tanya Gryshko 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

Public
Irvin Waldman 7 days ago

So that I understand, I need to perform the following steps:

  1. Eject the creat-react-app project e.g. npm run eject
  2. Copy flexmonster/ to node-modules
  3. Dig through the reference repro and figure out how to manipulate the webpack.config.js files in order to include flexmonster

There is no standard npm install –save flexmonster option today.
Thanks.

Public
Tanya Gryshko Flexmonster 7 days ago

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

Public
Irvin Waldman 7 days ago

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.

Public
Dmytro Zvazhii Flexmonster 4 days ago

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

Please login or Register to Submit Answer