# JavaScript Library Management in EveAI Frontend

This document explains how to add, remove, or update JavaScript libraries in the EveAI frontend. The frontend uses npm for package management and Parcel for bundling.

## Overview

Our frontend JavaScript setup uses:

- **npm**: To manage package dependencies
- **Parcel**: To bundle our JavaScript libraries into a single file
- **main.js**: The entry point that imports all required libraries

The bundled output is placed in `static/dist/main.js` and included in our templates.

## Adding a JavaScript Library

To add a new JavaScript library to the project:

1. **Install the package using npm:**

   ```bash
   # Navigate to the nginx directory
   cd nginx
   
   # Install the package
   npm install --save <package-name>
   
   # Example: Install Chart.js
   npm install --save chart.js
   ```

2. **Import the library in `nginx/frontend_src/js/main.js`:**

   ```javascript
   // Add your import statement
   import Chart from 'chart.js/auto';
   
   // If the library needs to be globally available, add:
   window.Chart = Chart;
   ```

3. **Rebuild the bundled JavaScript:**

   ```bash
   # Run the build process
   npm run build
   ```

4. **Verify the library works** by checking the browser console and testing functionality.

## Removing a JavaScript Library

To remove a JavaScript library:

1. **Remove the import statement** from `nginx/frontend_src/js/main.js`

2. **Uninstall the npm package:**

   ```bash
   cd nginx
   npm uninstall <package-name>
   
   # Example: Uninstall Chart.js
   npm uninstall chart.js
   ```

3. **Rebuild the bundled JavaScript:**

   ```bash
   npm run build
   ```

4. **Update any code** that was using the library to prevent errors.

## Updating a JavaScript Library

To update an existing library:

1. **Update the package:**

   ```bash
   cd nginx
   npm update <package-name>
   
   # To update to a specific version:
   npm install <package-name>@<version>
   
   # Example: Update Bootstrap to version 5.3.0
   npm install bootstrap@5.3.0
   ```

2. **Check for breaking changes** in the library's documentation.

3. **Update import statements** in `main.js` if the API has changed.

4. **Rebuild the bundled JavaScript:**

   ```bash
   npm run build
   ```

5. **Test thoroughly** to ensure the update doesn't break existing functionality.

## Troubleshooting Common Issues

### Library Not Found

If you get "Cannot find module" errors: