diff --git a/documentation/javascript_library_management.md b/documentation/javascript_library_management.md new file mode 100644 index 0000000..db04dce --- /dev/null +++ b/documentation/javascript_library_management.md @@ -0,0 +1,108 @@ +# 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 + + # 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 + + # 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 + + # To update to a specific version: + npm install @ + + # 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: