Get Free Trial

Integrating with create-react-app

Irvin Waldman asked on April 12, 2018

Do you have an example of how to integrate Flexmonster with create-react-app ( 

8 answers

Dmytro Zvazhii 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
Here you can find our sample on Github
Does it help?

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.

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.


Tanya Gryshko Tanya Gryshko Flexmonster April 13, 2018

Hello, Irvin,
Thank you for sharing the example.
Please check this sample on GitHub: 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?

Irvin Waldman April 13, 2018

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.

Tanya Gryshko Tanya Gryshko Flexmonster April 13, 2018

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:
Please let me know if you managed to configure everything successfully.

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

Dmytro Zvazhii Dmytro Zvazhii Flexmonster 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=""/>

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.

Please login or Register to Submit Answer