Using npm with CodeIgniter 4: Best practices?

I've developed a CodeIgniter 4 web app and want to incorporate libraries. In my JavaScript web apps, I typically use npm. What's the recommended approach for using npm with CodeIgniter 4?

Should I initialize npm in the root directory, /public/assets, or elsewhere?
After installing a package (e.g., npm install animate.css --save), how do I reference it in my app? Can I use <link href="<?=base_url();?>/assets/node_modules/animate.css/animate.min.css" rel="stylesheet" />?
When deploying the app to production, should I include the node_modules folder too?

im on Linux and use composer for some stuff and npm for other stuff. For instance I like to use SASS instead of starting with CSS and convert the SASS to CSS. I do that using "grunt"

So from my notes i installed sass, then grunt-cli (system wide)
INstalling grunt pulled in : c-ares-1.19.1-1 nodejs-20.4.0-1 nodejs-nopt-7.2.0-1 grunt-cli-1.4.3-2

installing npm pulled in:

[andrew@darkstar joesoapdev]$ sudo pacman -S npm
[sudo] password for andrew:
resolving dependencies...
looking for conflicting packages...

Packages (3) node-gyp-9.4.0-1 semver-7.5.0-1 npm-9.8.1-1

Now there is system wide and on a local basis. On Arch linux you open a terminal and change directory to the web root of your web dev. eg
this is what I have at my localhost apache server root:

[andrew@darkstar srv]$ tree -L 1 http
http
├── index.php
└── joesoapdev

joesoapdev is a CI4 web dev directory .So to install stuff for web dev calledc joesoapdev i change directory to joesoapdev and at the terminal :
[andrew@darkstar joesoapdev]$ npm init

that will ask some basic questions and should put a " package.json" file at your web root. Now suppose I want to have the use of a grunt plugin for my specific CI$ web app joesoapdev , say I want to have grunt to be able to convert sass to css then i need grunt-sass so:

[andrew@darkstar joesoapdev]$ npm install grunt-sass --save-dev

then say in my Gruntfile.js im going to want to have grunt convert after something new i do, i will need to do :

[andrew@darkstar joesoapdev]$ npm install grunt-contrib-watch --save-dev

So currently grunt working ; npm is installing fine and working . So short answer go to web root of a specific CI4 dev and after installing stuff system wide; you work locally starting with

" npm init"this is the content of my web dev root if it helps

Code:

[andrew@darkstar http]$ tree -L 1 joesoapdev
joesoapdev
├── Gruntfile.js
├── LICENSE
├── README.md
├── app
├── builds
├── composer.json
├── composer.lock
├── node_modules
├── package-lock.json
├── package.json
├── phpunit.xml.dist
├── public
├── scss
├── spark
├── tests
├── vendor
└── writable

Now the grunt file is also at web root , and commands to run grunt tasks are from the context of terminal location also from web root; but that doesn't stop grunt taking files such as custom.scss inside the scss ( same level as public) and putting them as custom.css into public/css

CMS CI4 

Arch Book  CodeIgniter4 on Apache(pages 92-114) 

Github

I would recommend working with JS in a separate directory, frontend/or client/. Not at the root with the app/ Save all compilations in public/build/.
This way you can develop separately and have access from CodeIgniter via a browser. The deployment depends on whether you use the collector (webpack). He will add the modules himself otherwise you need a link to the node_modules folder

Simple CI 4 project for beginners codeigniter-expenses ( topic )

this is what I have in public :

Code:

[andrew@darkstar joesoapdev]$ tree -L 2  public
public
├── css
│   ├── bootstrap.css
│   ├── custom.css
│   ├── custom.css.map
│   ├── font-face.css
│   └── myStyle.css
├── favicon.ico
├── fonts
│   └── amadeus
├── images
│   ├── header.png
│   └── logo3.png
├── index.php
├── js
│   └── bootstrap.bundle.js
├── robots.txt
└── sounds

All thats needed for bootstrap5 5 to work is 2 files a css in css dir and a js file in js directory


to reference that js file in my template view its this line just before html closing tag :

Code:

<script src="<?php echo base_url('js/bootstrap.bundle.js');?>"></script>

No on live you dont need the node_modules directory

CMS CI4 

Arch Book  CodeIgniter4 on Apache(pages 92-114) 

Github