Network Canvas Server
A tool for storing, analyzing, and exporting Network Canvas interview data.
This application runs on Electron and consists of two parts (and a third spawned), which correlate to Electron's main/rendering processes:
src/renderer: The UI, which contains the configuration/export screens.
src/main: The main process, manages the tray and spawns a server process
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.
- Clone this repo.
- Go into the repo directory
- Initialize submodules:
git submodule update --init
||Serves your app from a dev server on port
||Starts the main electron app including background services.|
||Compiles assets and prepares app for production in the /www directory.|
||Runs testing suite.|
||Builds HTML API docs into the docs-build directory.|
||Runs the current code in electron, for testing.|
||Run all linters, doc generators, and tests.|
npm run for a list of all available commands.
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).
npm run start:electron: to start the webpack dev server
- Note: must be running on port 4000.
npm run electron:dev(in another terminal session)
- Copies the electron source to
- Runs the electron app from there, including background services.
macOS Firewall during development
Electron.app 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 Electron.app --deep
. ├── 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
By convention, all functions tagged with
@async return a promise. The corresponding
@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
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