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

Steps

1. Go to dev hub ({qlik-server}/dev-hub)

2. Go to the mashup editor (on the left hand side)

3. Create a new project with your desired name

4. Choose any mashup template

5. 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

6. Copy all of the contents of your .qext file on devhub to config/Mashup.qext (local directory)

7. On your local directory, rename Mashup.qext to be the same as your mashup name

8. 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)

9. In the config.js file under webpack, replace the {server_name} and {mashup_name} with your server name and mashup name

10. In webpack.common.js, change the following

    • CopyPlugin -> Change only the "Mashup.qext" in from and to, to be "{mashup_name}.qext"

11. In webpack.dev.js and in webpack.prod.js, under the HtmlWebpackPlugin filename, replace index.html with your mashup name (e.g Mash.html)

12. Run npm start and view your mashup on {server_name}/extensions/{mashup_name}/{mashup_name.html}

Build (production)

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.

Troubleshooting

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

Known Limitations

• 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

Contact

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

License

This project is licensed under the ISC license, Copyright (c) 2019 Josh Asi. For more information see LICENSE.md.