DeepSec UI

User interface for DeepSec. Work in progress.

Installation

Download the binary file for your OS.

See the official website for instruction.

Dev Setup

Requirements : Node.js (which comes with npm)

# Clone this repository
git clone https://github.com/DeepSec-prover/deepsec_ui

# Go into the repository
cd deepsec_ui

# Install dependencies
npm install

# Run the app
npm run electron:serve

Note: If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

Environment variables

• NODE_ENV can be :
  • production (default) : For final user
  • dev : Enable development tools and mock data

Commands

• npm run electron:serve : Run the application (and set NODE_ENV as dev)
• npm run check : Check the code syntax
• npm run electron:build : Build and package for you current OS.

File structure

Sources code

• dist_electron - Generated files
• doc - Project documentation
• log - Log directory for development
• mock-data - Fake static data for testing purpose
• public - Files placed here will be available through __static
• src/
  • assets/ - Project assets (images)
  • components/ - Vue components
  • util/ - Misc utility function
  • views/ - Vue views
  • App.vue - Application root view
  • background.js - Electron entry file (for Electron's main process)
  • electron-menu - Main menu (top) template for electron
  • main.js - App's entry file (for Electron's render process)
  • router - Vue router logic
• package.json - Points to the app's main file and lists its details and dependencies.
• settings.js - Global project settings for prod and dev

Log

The log file app.log is stored :

• Packaged : In the OS default user's data directory
• Development : In the app root directory

Data

Run and query data is generated by DeepSec as JSON document following this structures.

Theses files are stored in the OS default user's data directory.

Credits

• Electron (doc) : Cross platform desktop app framework
• VueJs (doc) : Web framework
• Vue CLI Electron plugin (doc) : Electron builder for Vue application
• Prism : Code syntax highlighter library
• Electron-Log : Logging system for electron
• Element UI (doc) : CSS framework
• Electron-Builder : Package the application to production