Qlik Mashup React Boilerplate

This is a boilerplate for Qlik Sense Server Mashups. It uses React, Sass, and Webpack.

Created by Josh Asi

Initial Set Up

git clone https://github.com/josh-asi/qlik-mashup-react-boilerplate.git

then

cd qlik-mashup-react-boilerplate && npm i

Go to dev hub ({qlik-server}/dev-hub)
Go to the mashup editor (on the left hand side)
Create a new project with your desired name
Choose any mashup template
Create these new files (using the + button on the mashup editor - right hand side of the screen)
- main.js
- runtime.js
- vendors.js
- main.css
Copy all of the contents of your .qext file on devhub to config/Mashup.qext (local directory)
On your local directory, rename Mashup.qext to be the same as your mashup name
Replace all instances of Mashup to be {mashup_name} on config/wbfolder.wbl. You can also add other files you want to view on the Mashup editor such as main.js (optional)
In the config.js file under webpack, replace the {server_name} and {mashup_name} with your server name and mashup name
In webpack.common.js, change the following
- CopyPlugin -> Change only the "Mashup.qext" in from and to, to be "{mashup_name}.qext"
In webpack.dev.js and in webpack.prod.js, under the HtmlWebpackPlugin filename, replace index.html with your mashup name (e.g Mash.html)
Run npm start and view your mashup on {server_name}/extensions/{mashup_name}/{mashup_name.html}

If you want an optimised React production build, simply run npm run build. Make sure you have changed the output path in webpack/config.js.

If you have a different production server, you must follow Steps 1-5 again on your production server.

Failed to load resources: Make sure you have manually added the files in Step 5 using the Mashup editor

Calling the Qlik APIs using the Qlik object does not work properly on IE11
You have to manually refresh the page every time you make a change to see your changes

If you've got any questions, please contact me at josh.asi@waitematadhb.govt.nz.