Dev Mode

Custom Questions DevMode allows CQ developers to host CQ resources from local web servers for development without a need to upload it to Confirmit servers.

Requirements

  1. CQ exists in Horizons Custom Questions. Either create a CQ via the CQ client app UI, or create it via the npx tool and upload it at least once.

  2. Separate HTTPS static files webserver.

  3. Migrate CQ to schemaVersion 2. See How to Migrate to CQ v2.

NodeJS is not a requirement for DevMode, but is highly recommended to simplify the development.

Affected areas

DevMode overrides CQ base URLs in:

  1. SD CQ settings iframe (CQ design component).

  2. SE preview and quicktest (CQ runtime component).

DevMode does NOT affect:

  • Other Confirmit users' CQ usage (DevMode is enabled just for a single browser session and cannot be shared).

  • Production launched surveys (only testmodes survey modes supported).

  • CQ metadata changes (metadata.json content).

Basic workflow

  1. Upload CQ to Confirmit.

  2. Go to the CQ details page in the CQ client app.

  3. Run your local webserver.

  4. Enter your local webserver URL into the "DevServer URL Override" input field.

  5. Click the Enable DevMode button.

  6. Refresh the SD page → CQ resources hosted from your local web server.

  7. Accept the dev certificates (see Certificates section).

  8. To disable DevMode click the Disable DevMode button on the CQ details page, or close your browser.

See Getting Started for detailed instructions.

WebServer

In order to use DevMode you must run your own web server which can host static files via HTTPS.

The Webserver should host the file structure you specified in metadata.json. For example, if you run the webserver at https://localhost:1234 and have "design/index.html" as the entry point in your metadata.json file, then the server should return this file content using https://localhost:1234/design/index.html .

If you created CQ with the nodejs pipeline then you automatically have a pre-configured local web dev server which you can run by executing 'npm start' in your terminal. By default it runs on https://localhost:1234.

You can use any webservers to host CQ in devmode including external webservers. For example, you can deploy your resources on each build to Amazon S3 and immediately see the changes in DevMode locally (hosted from Amazon servers).

Certificates

For DevMode you must use HTTPS protocol to serve your files. HTTPS requires a TLS certificate.

If you created CQ with the nodejs pipeline then you automatically have a pre-configured self-signed certificate for your server running localhost.

You can use your own certificates (self-signed for localhost and a real one for custom domains you own) for HTTPS.

Self-signed certificates are not valid certificates for browsers, so you must manually accept it during development (once per browser).

For example, in a Chrome browser you can open any file from your webserver in a separate tab (for example, https://localhost:1234/design/index.html). It will show the "Your connection is not private" warning. Click Show advanced, then click Proceed.

You can also add self-signed certificates to your local cert storage (for example, to be used in legacy browsers such as IE). On Windows you can open any content from your webserver; click the red certificated button, click Install, install it to the "Trusted Root Certificate Authorities" on LocalMachine, then restart the browser.

Limitations

  • The metadata.json file is not a part of the DevMode pipeline and changes there require zip reupload. metadata.json if not hosted from the file library but used only during the zip upload operation to store CQ metadata into SQL database. DevMode using previously uploaded CQ metadata from SQL database only.

  • DevMode in surveys works only in preview and quicktest; it is not applied to production-launched surveys.

  • HotReload works fine in the CQ settings page but does not work inside surveys.

  • SD caches all CQ resource links, so to apply DevMode you must reload the SD page after enabling or disabling DevMode.

Nodejs pipeline template

The CQ client app create wizard and the npx tool for CQ creation give you the ability to chose if you want to use the nodejs pipeline or the simple static files approach.

Benefits of using nodejs pipeline:

  • Babel transpilation https://babeljs.io/ (you can use modern ES6+ javascript syntax, better organize your code using imports, and use targets configurations to support legacy browsers via babel presets and plugins).

  • Local webserver with automatic self-signed HTTPS certificate creation for DevMode using https://parceljs.org/ .

  • CQ zip bundle creation.

Commands:

Command Description

npm start

Start local dev webserver on https://localhost:1234

npm run build

Build CQ resources to /dist folder and create CQ zip bundle in /dist-bundle/bundle.zip

Configuration for the pipeline is in package.json. .babelrc is for babel config.