Browser builds

On this page

    Using bundlers such as Webpack and browserify, you can bundle your custom Comunica engine for the browser.

    For this, you have to go the following.

    If you just want to make use of default Comunica engines such as Comunica SPARQL, refer to the guide on querying in a JavaScript browser app.
    A full example of a custom Comunica engine that is browser-ready can be found here.

    1. Compile the config to JavaScript

    Not all parts of Comunica can be executed in the browser. Namely, the dynamic version of Comunica that can read from a config on the local file system.

    As such, if we want to expose our engine in the browser, we have to compile our config to a JavaScript file. This can be done using the comunica-compile-config from @comunica/runner.

    For this, add @comunica/runner as a dev dependency to your package.json, and add the following script (assuming your config exists at config/config-default.json):

      "scripts": {
          "prepublishOnly": "npm run build:engine",
          "build:engine": "comunica-compile-config config/config-default.json > engine-default.js"

    2. Create a browser-specific entrypoint

    Next, create a file called index-browser.ts, which will become the browser variant of index.ts. index-browser.ts should at least contain the following:

    import {IQueryEngine} from '@comunica/types';
    export function newEngine(): IQueryEngine {
      return require('./engine-browser.js');

    3. Expose the browser-specific entrypoint

    After that, we have to tell the browser bundling tools that they need to look at index-browser.js instead of index.js for browser apps. For this, add the following to your package.json:

      "browser": {
        "./index.js": "./index-browser.js"

    4. Building for the browser

    Now you're ready to compile your application for the browser. For example, if you have an application my-app.js that makes use of newEngine() in your custom Comunica engine, you can compile it from the browser with Webpack as follows:

    $ webpack my-app.js -o browser/my-app.js

    Please refer to the documentation of Webpack on how to configure this build process.