Using npm and CakePHP 3 - file locations

Question

If you use npm to install a package in CakePHP the directory structure will be like this:

bin/
composer.json
composer.lock
config/
favicon.ico
.gitignore
.htaccess
index.php
logs/
node_modules/
.npmrc
package-lock.json
phpunit.xml.dist
plugins
README.md
src/
tests/
tmp/
vendor/
webroot/

So I've installed a package with npm like this, which has created .npmrc:

npm install --save-dev @fortawesome/fontawesome-pro

This copies the files into node_modules/

But in Cake this isn't accessible because it would need to be inside webroot/

For example if you link to node_modules/@fortawesome/fontawesome-pro/css/all.css you'll get a 404 because node_modules/ isn't accessible to CakePHP where it is in the filesystem.

So other than manually moving the files - very tedious everytime you use npm:

mv node_modules webroot/node_modules

What strategy do people use in this sitation?

Cake version is 3.7 but I don't think that matters in this case.

Answer 1

I personally use the AssetCompress plugin to handle these matters. In the file config/asset_compress.ini you define your assets and their location and you control where (inside webroot) you want the compiled/compressed assets to be placed.

Follow the plugin installation instructions and add the following to the default/sample config/asset_compress.ini`:

...
[css]
paths[] = ROOT/node_modules/@fortawesome/fontawesome-pro/css/*
cachePath = WEBROOT/cache_css
...
[awesome.css]
files[] = all.css
filters[] = CssMinFilter
...

and your template will use it like so:

<?= $this->AssetCompress->css('awesome.css') ?>