Add a Front‑End Dependency with Bower Using the --save Flag

Add a Front‑End Dependency with Bower Using the --save Flag

Desired outcome: record a specific version of a front‑end library in bower.json and place its files in bower_components so the project can be reproduced.

Prerequisites

• Node.js and npm installed.
• Access to run global npm commands (may require sudo or equivalent permissions).
• A project directory with a package.json (optional) where you want to manage front‑end deps.

Procedure

1. Install Bower globally if not present:

   npm install -g bower
   

2. Verify the installation:

   bower -v
   

3. Navigate to the project root and ensure a bower.json exists. If missing, create it:

   bower init
   

   (accept the defaults or edit as needed.)
4. Add the desired package, for example jQuery, and save it to the manifest:

   bower install jquery --save
   

5. Confirm the installation:

   bower list
   

6. Inspect the generated manifest:

   cat bower.json
   

Expected Checks

• The output of bower list shows the package with a version, e.g. jquery#3.6.0.
• bower.json contains a dependencies section with an entry like "jquery": "3.6.0".
• The folder bower_components/jquery exists and contains the library files.
• Your application can reference the file, e.g. <script src="bower_components/jquery/dist/jquery.min.js"></script>.

Recovery Options (Rollback)

Because the operation modifies bower.json and adds files under bower_components, you can revert:

1. Remove the dependency line from bower.json (or delete the whole dependencies entry).
2. Delete the installed folder:

   rm -rf bower_components/
   

3. Commit the cleaned bower.json (and optionally the removed folder if it is not ignored).

Limitations and Practical Verification

• Bower is deprecated; new projects should consider alternatives like npm or Yarn.
• The --save flag updates only bower.json; there is no automatic lockfile, so exact versions must be specified manually for deterministic builds.
• Global installation can cause version conflicts across projects; consider using a local copy via npx bower or an npm script.
• To verify that the dependency works, run your project's build or test suite after installation, e.g. npm test if you have a front‑end test.