Setting up a Web client

On this page

    If you want to easily demonstrate a couple of SPARQL queries on a Web page, or if you want to show off your custom built Comunica engine, then you can do this using the Comunica jQuery widget.

    As an example, a public instance of this widget is available at http://query.linkeddatafragments.org/.

    1. Install from npm

    1.1. Installation

    Since Comunica runs on Node.js, make sure you have Node.js installed on your machine.

    Next, we can install @comunica/web-client-generator:

    $ npm install -g @comunica/web-client-generator

    1.2. Building a static Website for production

    After installing, you can build a production-ready version of Comunica SPARQL:

    $ comunica-web-client-generator

    The resulting build directory can be deployed on a Web server using something like NGINX or GitHub pages.

    1.3. Build a custom config

    In order to override the default config, you can pass one as argument.

    $ comunica-web-client-generator config/config-default.json

    This assumes that your engine's dependencies are available in your working directory. If this is not the case, provide a path to your engine's directory via the -c option:

    $ comunica-web-client-generator path/to/engine/config/config-default.json -c path/to/engine/

    1.4. Change settings and queries

    The default datasources and queries can be changed as follows:

    $ comunica-web-client-generator -s settings.json -q queries

    Examples for the settings.json file and the queries directory.

    1.5. Show all available options

    All available options for this command are:

    $ comunica-web-client-generator -h
comunica-web-client-generator generates Comunica Web clients
  Usage:
    comunica-web-client-generator config/config-default.json
    comunica-web-client-generator config/config-default.json -d my-build/ -s my-settings.json
    comunica-web-client-generator config/config-default.json -q my-queries/
    comunica-web-client-generator config/config-default.json -w my-webpack.config.js

  Options:
    -d            Destination of the built output (defaults to build)
    -m            The compilation mode (defaults to production, can also be development)
    -c            Path to the main Comunica module (defaults to cwd)
    -q            Path to custom queries directory
    -s            Path to custom settings file
    -w            Path to custom Webpack config
    --help        Print this help message

    2. Install from GitHub

    2.1. Installation

    Since Comunica runs on Node.js, make sure you have Node.js installed on your machine.

    Next, we can clone the Comunica jQuery widget repo, and install it:

    $ git clone https://github.com/comunica/jQuery-Widget.js.git
$ cd jQuery-Widget.js
$ npm install

    2.2. Starting the built-in Web server

    The widget comes with its own (optional) Web server, which can be started as follows:

    $ npm run dev

    Now, you page will be live at http://localhost:8080.

    This port can be changed to something else by adding the --port option within the dev script in package.json.

    2.3. Building a static Website for production

    The built-in Web server should primarily be used for testing. If you want to deploy this page on a Web server, something like NGINX or GitHub pages is recommended.

    You can build a production-ready version of this page as follows:

    $ npm run build

    The contents of the build folder can now be deployed on to any Web server.

    2.4. Changing the default queries and datasets

    You'll notice that the page contains some example queries and datasets by default. You can change these by modifying the contents of the queries/ folder and the settings.json file.

    When running the built-in dev server, the process will have to be restarted after every change to the queries or settings.