Easy Guide to Adding JavaScript Libraries in Frappe

1. Create a New Page:
   Start by making a New page from page doctype and make it standard. This creates two important files: a JavaScript file (.js) and a configuration file (.json).
   
   

   Path: go to vscode ->app ->app ->module ->page ->page-name ->[.js, .json]

2. Install Libraries:
   Use commands in your terminal to add the JavaScript libraries you need. You can do this with either Yarn or npm.e.g.
   - yarn add js-confetti
   - npm install anime.js
3. Build and Start Bench:
   After installing the libraries, they are automatically added to the app's package.json file and node_modules folder.
   Proceed to build and start Bench using:
   - bench build --app {app-name}
   - bench start
4. Creating Bundle File:
   Create a bundle file (e.g. library.bundle.js) located in app/public/js.
   Import the necessary libraries into the bundle file. This action automatically adds the required .js files to app/public/dist/js.
5. Import Library in Bundle File:
   
e.g.


6. Integration into Page's JavaScript File:

   In the page's .js file, add the bundle file using the following syntax:
   frappe.require(['library.bundle.js'() =>{}])

7. See the Impact:
   Now, You can see the impact or styling of the bundle.js file effectively on the desk page.

Installation steps for external js library are same as for Desk page

1. Creating a New HTML File:
   Create a new HTML file in your app's "www" folder (e.g., library.html).
2. Include the Template:
   Use Jinja templates to add a template to the .html file. This connects your libraries to your web page.
   e.g. {%- extends "templates/web.html" -%}
3. Include the Bundle:
   Include the 'bundle.js' file within the '.html' file using Jinja blocks
   ({{ include_script('library.bundle.js') }})
Now, You can show the impact or styling of bundle.js file in your web page !!

Note: To extend the impact of the bundle.js file to all web pages, add it to the app's hooks.py file via
web_include_js = ['library.bundle.js']