diff --git a/web/explorer/DEVELOPMENT.md b/web/explorer/DEVELOPMENT.md index 989e0bd9..3e7ab7d3 100644 --- a/web/explorer/DEVELOPMENT.md +++ b/web/explorer/DEVELOPMENT.md @@ -1,33 +1,37 @@ -# Development Guide for capa-webui +# Development Guide for Capa Explorer Web -This guide will help you set up the Capa Explorer WebUI project for local development. +This guide will help you set up the Capa Explorer We project for local development. ## Prerequisites Before you begin, ensure you have the following installed: -- Node.js (v20.x or later recommended) -- npm (v10.x or later) -- Git + +- Node.js (v20.x or later recommended) +- npm (v10.x or later) +- Git ## Setting Up the Development Environment 1. Clone the repository: - ``` - git clone https://github.com/mandiat/capa.git - cd capa/web/explorer - ``` + + ``` + git clone https://github.com/mandiat/capa.git + cd capa/web/explorer + ``` 2. Install dependencies: - ``` - npm install - ``` + + ``` + npm install + ``` 3. Start the development server: - ``` - npm run dev - ``` - This will start the Vite development server. The application should now be running at `http://localhost:` + ``` + npm run dev + ``` + + This will start the Vite development server. The application should now be running at `http://localhost:` ## Project Structure @@ -51,14 +55,14 @@ web/exporer/ └── README.md ``` -- `src/`: Contains the source code of the application -- `src/components/`: Reusable Vue components -- `src/composables/`: Vue composition functions -- `src/router/`: Vue Router configuration -- `src/utils/`: Utility functions -- `src/views/`: Top-level views/pages -- `src/tests/`: Test files -- `public/`: Static assets that will be served as-is +- `src/`: Contains the source code of the application +- `src/components/`: Reusable Vue components +- `src/composables/`: Vue composition functions +- `src/router/`: Vue Router configuration +- `src/utils/`: Utility functions +- `src/views/`: Top-level views/pages +- `src/tests/`: Test files +- `public/`: Static assets that will be served as-is ## Building for Production @@ -70,6 +74,14 @@ npm run build This will generate production-ready files in the `dist/` directory. +Or, you can build a standalone bundle application that can be used offline: + +``` +npm run build:bundle +``` + +This will generate an offline HTML bundle file in the `dist/` directory. + ## Testing Run the test suite with: @@ -86,30 +98,26 @@ We use ESLint for linting and Prettier for code formatting. Run the linter with: ``` npm run lint -``` - -To automatically fix linting and formatting issues: - -``` -npm run lint:fix +npm run format ``` ## Working with PrimeVue Components -Capa Explorer WebUI uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage. +Capa Explorer Web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage. ## Best Practices -1. Follow the Vue.js Style Guide for consistent code style. -3. Document new functions, components, and complex logic. -4. Write tests for new features and bug fixes. -5. Keep components small and focused on a single responsibility. -6. Use composables for reusable logic across components. +1. Follow the [Vue.js Style Guide](https://vuejs.org/style-guide/) for consistent code style. +2. Document new functions, components, and complex logic. +3. Write tests for new features and bug fixes. +4. Keep components small and focused on a single responsibility. +5. Use composables for reusable logic across components. ## Additional Resources -- [Vue.js Documentation](https://vuejs.org/guide/introduction.html) -- [Vite Documentation](https://vitejs.dev/guide/) -- [PrimeVue Documentation](https://www.primevue.org/) +- [Vue.js Documentation](https://vuejs.org/guide/introduction.html) +- [Vite Documentation](https://vitejs.dev/guide/) +- [Vitest Documentation](https://vitest.dev/guide/) +- [PrimeVue Documentation](https://www.primevue.org/) If you encounter any issues or have questions about the development process, please open an issue on the GitHub repository. diff --git a/web/explorer/README.md b/web/explorer/README.md index 36db043c..db9b8d78 100644 --- a/web/explorer/README.md +++ b/web/explorer/README.md @@ -1,22 +1,22 @@ -# Capa Explorer WebUI +# Capa Explorer Web Capa Explorer WebUI is a web-based user interface for exploring program capabilities identified by the capa tool. It provides an intuitive and interactive way to analyze and visualize the results of capa analysis. ## Features - **Import capa Results**: Easily upload or import capa JSON result files. -- **Interactive Tree View**: Explore rule matches in a hierarchical structure. -- **Function Capabilities**: Group capabilities by function for static analysis. +- **Interactive Tree View**: Explore and filter rule matches in a hierarchical structure. +- **Function Capabilities**: Group and filter capabilities by function for static analysis. - **Process Capabilities**: Group capabilities by process for dynamic analysis. -- **Toggeable Settings**: Toggle between different view modes and filter options. ## Getting Started 1. **Access the Application**: Open the Capa Explorer WebUI in your web browser. + You can start using Capa Explorer Web by accessing [https://mandiant.github.io/capa](https://mandiant.github.io/capa/) or running it locally by dowloading the offline release in the [releases](https://github.com/mandiant/capa/releases) section and loading it in your browser. 2. **Import capa Results**: - - Click on "Upload from local" to select a capa JSON file from your computer (with a version higher than 7.0.0). + - Click on "Upload from local" to select a capa analysis document file from your computer (with a version higher than 7.0.0). - Or, paste a URL to a capa JSON file and click the arrow button to load it. - Alternatively, use the "Preview Static" or "Preview Dynamic" for sample data. @@ -28,8 +28,8 @@ Capa Explorer WebUI is a web-based user interface for exploring program capabili - "Show library rule matches" to include or exclude library rules. 4. **Interact with the Data**: - - Expand/collapse nodes in the TreeTable to see more details. - - Use the search and filter options to find specific features or capabilities (rules). + - Expand/collapse nodes in the table to see more details. + - Use the search and filter options to find specific features, functions or capabilities (rules). - Right click on rule names to view their source code or additional information. ## Feedback and Contributions