Using webpack with Capability APIs

[Francis_Kabinoff]

I've seen a few people asking recently if and how they can use webpack to build their mashup. The answer is yes, and I'm gonna discuss a few implementation details and provide some example code.

So to use the Qlik Capability APIs, you're probably already aware that you need to load the Qlik Capability API code, which includes loading a custom require.js file, and then requiring the qlik.js file through the loaded instance of require.js. The thing is, there's really no way to get around this, that's how the Qlik Capability APIs are loaded.

But you can still use webpack for all of your own project code, you just have to decide how you are going to load the custom require.js file and where you'll use the require.js instance to require qlik.js. This is how I've been doing it.

First, I load the Qlik custom require.js file in a script tag in the head of the document. Can you get fancier if you'd like with something like the script-loader, yea sure you can, but the goal here is to load that Qlik custom require.js file in a global context, and to me the simplest way to do it is to just include it in a script tag in the head of my html document.

Then, you'll need to set the require.js config and require the qlik.js file through require.js somehow. The trick here is that the require.js instance can be accessed with window.require. Also, since requiring files with require.js is asynchronous, and you'll almost certainly want to return some stuff when qlik.js is done loading, it's useful to use a promise here. This is what my module looks like for this in ES2015 -

You'll notice the config object which you should be used to for mashups, then how I'm using window.require.config to set the require.js config. Also, I explicitly set the path for 'qlik' because I find this helps avoid some errors, especially with regards to loading extensions. Then, I export a promise which resolves with the app from the openApp() method as the value. You can resolve this promise with the 'qlik' object, or multiple apps, or whatever your needs are, but for myself, most of the time, I'm just opening 1 app and I just resolve the app.

So in summary, if you want to use webpack with the Capability APIs then the Qlik custom require.js file will need to be loaded in a global context in some way, and then you'll be able to access the require.js instance on 'window.require' (but not just simply 'require' since webpack will use that keyword).

[alex_nerush]

Good post. I'm using webpack as a modular bundler for every extension project. It is highly configurable and extensible via plugins. Actually there is no need to use requirejs at all. You can specify library target as "amd" in webpack config file and use simple import statements. There is also killer feature - hot module replacement which allows develop extensions without page refreshes. Just a simple example of paint method:

import qlik from 'qlik';

import './styles.css';

export default ($element, layout) => {

  console.log(qlik, layout);

  const node = document.createElement('h1');

  node.className='qv-object-test-extension';

  node.innerHTML = '<h1>Hello Qlik!</h1>';

  $element.html(node);

};

See GitHub - alner/ExtensionTemplate for more details.

[Francis_Kabinoff]

Yea, this is an excellent point for extensions.

[tracysnow]

great

[tracysnow]

Hi Mr. Francis,

I built a web pack Project as you said, but I found when I require qlik.js, An error has occurred:  at 'http://localhost:4848/resources/autogenerated/product-info.json?1552801796175' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

do you know how to handle this? thanks.

[Francis_Kabinoff]

@tracysnow Sorry I didn't get back to you previously, I must have missed the notification for your comment. Ironically enough I just found while searching for a solution for this myself, I'm having the same issue.

[JinX]

Late to the party 🙂 I am struggling to config a connection to the Qlik engine in my react app. I followed along this guide and I am importing the qlik config file into my main component, but when I start the app I always get this error

Any idea why this is happening? Any help would be much appreciated.

[Francis_Kabinoff]

@JinX check my answer to your question on your community post https://community.qlik.com/t5/New-to-Qlik-Sense/Qlik-Sense-engine-connection-in-React-JS/m-p/1824794