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 processsrc/main/worker
: The background Server process which receives data and adds it to a store [storage is not yet implemented]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.
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.
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.
This project currently requires Node.js 12.14.1
to match the version used by Electron, and version 7.6.3
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
npm run electron:dev
(in another terminal session)
./electron-dev
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 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.
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