mirror of
https://github.com/mandiant/capa.git
synced 2026-01-05 01:07:25 -08:00
116 lines
2.8 KiB
Markdown
116 lines
2.8 KiB
Markdown
# Development Guide for capa-webui
|
|
|
|
This guide will help you set up the Capa Explorer WebUI 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
|
|
|
|
## Setting Up the Development Environment
|
|
|
|
1. Clone the repository:
|
|
```
|
|
git clone https://github.com/mandiat/capa.git
|
|
cd capa/web/explorer
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```
|
|
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:<port>`
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
web/exporer/
|
|
├── src/
|
|
│ ├── assets/
|
|
│ ├── components/
|
|
│ ├── composables/
|
|
│ ├── router/
|
|
│ ├── utils/
|
|
│ ├── views/
|
|
│ ├── App.vue
|
|
│ └── main.js
|
|
├── public/
|
|
├── tests/
|
|
├── index.html
|
|
├── package.json
|
|
├── vite.config.js
|
|
├── DEVELOPMENT.md
|
|
└── 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
|
|
|
|
## Building for Production
|
|
|
|
To build the application for production:
|
|
|
|
```
|
|
npm run build
|
|
```
|
|
|
|
This will generate production-ready files in the `dist/` directory.
|
|
|
|
## Testing
|
|
|
|
Run the test suite with:
|
|
|
|
```
|
|
npm run test
|
|
```
|
|
|
|
We use Vitest as our testing framework. Please ensure all tests pass before submitting a pull request.
|
|
|
|
## Linting and Formatting
|
|
|
|
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
|
|
```
|
|
|
|
## 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.
|
|
|
|
## 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.
|
|
|
|
## Additional Resources
|
|
|
|
- [Vue.js Documentation](https://vuejs.org/guide/introduction.html)
|
|
- [Vite Documentation](https://vitejs.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.
|