Skip to content
A tool for storing, analyzing, and exporting Network Canvas interview data.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
__mocks__ update electron and dependencies Aug 9, 2019
assets/icons small tweak to icon May 9, 2018
build-resources Fix 64px layer in ico file Aug 6, 2018
config update electron and dependencies Aug 9, 2019
db Remove db data from repo Jul 14, 2017
public implement check for update on startup May 31, 2019
scripts bump version to 4.1.0 Aug 21, 2019
src tweak wording on error dialog Nov 13, 2019
.babelrc Updating electron shims and adding dot files for dependencies. Sep 21, 2017
.editorconfig Import .editorconfig from network canvas Mar 19, 2018
.env Update web browser support Jul 16, 2018
.eslintignore Add networkQuery submodule Dec 20, 2018
.eslintrc.json Update lint settings for better UI compatibility Aug 29, 2018
.gitattributes set line endings Jul 18, 2017
.gitignore Add basic API docs for protocols Apr 13, 2018
.gitmodules Add networkQuery submodule Dec 20, 2018
.travis.yml update electron helpers Aug 23, 2019 Add Code of Conduct Jul 10, 2018
LICENSE Use fork of Network-Canvas Jul 7, 2017 update electron helpers Aug 23, 2019
jsdoc.conf.json Add networkQuery submodule Dec 20, 2018
package-lock.json Merge branch 'master' into feature/update-electron Aug 27, 2019
package.json Merge branch 'master' into feature/update-electron Aug 27, 2019

Network Canvas Server

FOSSA Status

A tool for storing, analyzing, and exporting Network Canvas interview data.

Getting started


This application runs on Electron and consists of two parts (and a third spawned), which correlate to Electron's main/rendering processes:

  1. src/renderer: The UI, which contains the configuration/export screens.
  2. src/main: The main process, manages the tray and spawns a server process
  3. src/main/worker: The background Server process which receives data and adds it to a store [storage is not yet implemented]

1. The UI

The UI is a React app which runs in Electron's BrowserWindow().

It is possible to test the UI by running npm run start, and viewing the various paths in your browser.

2. The server

The actual HTTP/Sockets server runs in a fork managed by the main process.

The main process itself acts a go-between for the UI and the server process.


This repository assumes that npm is installed. If you don't have it installed, here are installation instructions.

  1. Clone this repo.
  2. Go into the repo directory
  3. Initialize submodules: git submodule update --init
npm run <script> Description
start:electron Serves your app from a dev server on port 4000.
electron:dev Starts the main electron app including background services.
build Compiles assets and prepares app for production in the /www directory.
test Runs testing suite.
build-docs Builds HTML API docs into the docs-build directory.
electron Runs the current code in electron, for testing.
preflight Run all linters, doc generators, and tests.

Run npm run for a list of all available commands.


Node.js/NPM Versions

This project currently requires Node.js 12.8.0 to match the version used by Electron, and version 6.10.2 of npm.


MDNS is used to advertise services to Network Canvas clients. On Windows and Linux, you'll need to install some dependencies first — see the mdns installation instructions.

The Network Canvas Readme has detailed instructions for getting MDNS running on Windows.


To run the UI:

npm run build
npm run server
npm run start

To run the whole app (including server):

$ npm run build
$ npm run electron

The electron app (and server components) are served out of the /www folder. Changes can be made in the /src folder but won't reflect in the app until another build is completed (npm run build && npm run electron).

Development workflow

  1. npm run start:electron: to start the webpack dev server
  • Note: must be running on port 4000.
  1. npm run electron:dev (in another terminal session)
  2. Copies the electron source to ./electron-dev
  3. Runs the electron app from there, including background services.

macOS Firewall during development runs an http server for device clients directly in the main process. If you've enabled your system Firewall, macOS will present an "Allow or Deny" dialog every time the app is opened. If you have a [free] Apple developer account, you can work around this by signing the (development) app in node_modules.

cd ./node_modules/electron/dist
# This assumes you have an existing Mac Developer signing identity created by Xcode.
# If not, let it create one by building a new macOS app in Xcode.
# If the signing identity still isn't found, look in Xcode settings, or
# in Keychain's "My Certificates" for the name of a development cert.
codesign --force --sign "Mac Developer" --timestamp=none --deep

Application Structure

├── config             # Project and build configurations (webpack, env config)
    └── api            # Auto-generated API specs
    └── jest           # test setup files
├── public             # Static public assets to be bundled
└── src                # Application source code
    └── main           # Main Electron process
        └── server     # Services & APIs
    └── renderer       # GUI (react app)


config/jest/setupTestEnv contains helpers which can be imported by tests.

config/jest/setupTestFramework contains the following custom matchers:

  • .toMatchErrorMessage(expectedMessage): Use to check that an object contains a "message" property with a string value that (partially) matches the expectedMessage string.


By convention, all functions tagged with @async return a promise. The corresponding @returns and @throws tags document the corresponding resolved or rejected type.

API docs for clients

The device API (for Network Canvas tablet & desktop clients) is currently being documented with the OpenAPI spec, a.k.a. Swagger. The spec is generated when the electron-dev target is built. To generate manually, run node scripts/build-api-spec.js.

For now, you'll have to generate API-specific documentation based on the spec. One way is to use spectacle:

# install
npm install -g spectacle-docs

# publish to ./docs/api and start a server
spectacle --target-dir docs/api --development-mode --port 4400 config/api/api-spec-[version].json

# ...Now view at http://localhost:4400


FOSSA Status

You can’t perform that action at this time.