Development Guide for capa explorer web

This guide will help you set up the capa explorer web 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

Clone the repository:

git clone https://github.com/mandiat/capa.git
cd capa/web/explorer

Install dependencies:
```
npm install
```
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.

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 capa-explorer-web/ 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
npm run format:check
npm run format

Working with PrimeVue Components

capa explorer web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the PrimeVue documentation for available components and their usage.

Best Practices

Follow the Vue.js Style Guide for consistent code style.
Document new functions, components, and complex logic.
Write tests for new features and bug fixes.
Keep components small and focused on a single responsibility.
Use composables for reusable logic across components.

Additional Resources

If you encounter any issues or have questions about the development process, please open an issue on the GitHub repository.

3.0 KiB Raw Blame History