Recommended way to run 'npm run watch' from ddev

Hey Andreas, thanks for a thoughtful issue, I believe the easiest solution for building themes or running npm commands in specific directories in general with ddev, is to use some sort of workflow automator tool such as Ahoy CLI

so once you set it up you'd do something like: ddev ahoy theme:watch or ddev ahoy theme:build or similar

In general hooking your theme watch/dev command to your ddev start IMO is not optimal, as you mentioned you sometimes don't necessarily need to do anything with your theme, you just need your container running

take a look at Ahoy and let me know if you come up with something and I'll add it to the documentation

--> This works, but I wonder if there is a better way.

It is not necessary to use the command ddev ssh at all, (and all that that entails). It is not necessary to ssh into your website to do website theming.

DDEV installs all the necessary npm stuff, just like it does with composer stuff, so using ddev npm run watch to live-sync code changes or ddev composer up to update dendencies both work very well, for two different super-common examples.

As a rule, I choose not to install things like composer and npm on my, (Ubuntu), operating system of choice to ensure DDEV is managing those dependencies and their different versions entirely. That also makes altering environments as easy as editing a ddev settings files in .yml.

Which is an amazing thing actually, considering all it takes to install DDEV on something like Ubuntu is the sudo apt install ddev command.

As a DDEV user developing Radix stuff, I find it necessary to use these two commands as follows in order to setup and use a Radix subtheme, (Steps 1 & 2 of the automated setup instructions):

nvm use

ddev npm install

...hope that clarification helps. I have repeated that process many times of a lengthy period so trust me, it works solid. And that's all I have to say about nvm because that's all I know about it.

so using ddev npm run watch to live-sync code changes or ddev composer up to update dendencies both work very well

How do you make it run in the subdirectory where the theme is located?

nvm use

You would have to run this within the container, right?
So ddev nvm use?

These are the precise commands I use:

nvm use
ddev npm install

The first command does not use ddev but the second and all subsequent npm commands do.

You would have to run this within the container, right?

I like how there's no difference between a path within a ddev container and paths defined by the Operating System. The only difference is using a ddev prefix to run a command.

On the production server where ddev isn't used, drush is installed by Composer. To run drush from somewhere deep inside a regular Drupal website, you might do something like the example below, (instead of simply ddev drush uli):

../../../../vendor/drush/drush/drush uli

How do you make it run in the subdirectory where the theme is located?

Just cd to the theme folder the regular way, then run the ddev npm install command.

The first command does not use ddev but the second and all subsequent npm commands do.

How can `nvm use` do its job correctly if run in the host system?
I get this:

~/projects/ar/ar10/web/themes/custom/ar_radix $ nvm use
Found '/home/lemonhead/projects/ar/ar10/web/themes/custom/ar_radix/.nvmrc' with version <lts/iron>
Now using node v20.11.1 (npm v10.2.4)
~/projects/ar/ar10/web/themes/custom/ar_radix $ npm --version
10.2.4
~/projects/ar/ar10/web/themes/custom/ar_radix $ ddev npm --version
4.2.0

So I have the wrong version of npm in the container.

And then on npm install:

~/projects/ar/ar10/web/themes/custom/ar_radix $ ddev npm install
[...]
npm ERR! notsup Unsupported engine for ar_radix@: wanted: {"npm":">=6.0","node":">=16.0","yarn":">=1.6"} (current: {"node":"7.10.1","npm":"4.2.0"})
[..]
Failed to run npm install: exit status 1

So I guess this works if you already had the correct npm version in the container..

(and btw I like npm ci over npm install, see https://stackoverflow.com/questions/52499617/what-is-the-difference-betw...)

Related: https://github.com/ddev/ddev/issues/3747#issuecomment-1471889362

Actually, you don't have to do this at all any more. These days the ddev npm command has
## HostWorkingDir: true

which means that it automatically executes in the same relative directory you're in on the host.

Does these links help?

https://ddev.readthedocs.io/en/stable/users/extend/customization-extendi...

https://ddev.readthedocs.io/en/stable/users/usage/commands/#nvm

https://ddev.readthedocs.io/en/stable/users/usage/commands/#npm

https://ddev.readthedocs.io/en/stable/users/usage/commands/#yarn

Do these links help?

Not really :)
I also looked into various discussions in the ddev issue queue but still stuck.

The problem is this:
- "nvm use" sets the node and npm version in the host system, so it is quite useless.
- "ddev nvm use" sets the node and npm version in the container, but only for the duration of one terminal session - which is just that one command. So the next "ddev npm" gets the old version.
- node_version in .ddev/config.yml seems to do nothing. And even if it does, it means the version would be defined by the root ddev config, not by the .nvmrc in the theme directory.

(btw we can take this to slack, but I don't find you there)

not by the .nvmrc in the theme directory

Where does .nvmrc come from to begin with? I am too lazy to look myself now.

btw we can take this to slack, but I don't find you there

That's another level and besides my being preoccupied in life currently, I'm mostly focused on a few specific areas of Drupal. Also chat + timezones is a thing. I'm old, it's late Sunday, maybe I should reconsider Drupal Slack on another day, I'd rather be outside biking or skating but the weather sucks. I'd prefer to run this public thread long if need be for the time being, but we should probably switch to email. Contact me via Drupal.org/contact. Grrr, sorry.

What OS are you using yourself?

Now I cannot explain myself why my ddev setup plus instructions work for me but not for you. But ddev + Drupal + radix 6 + bootstrap + webpack work reliably for me as I've described. My *only* issue, which is no one's fault(!) is I have had some difficulty keeping my downstream GIT subtheme sync'd with upstream Radix changes during the last few months as Radix has been developed and refined. But I've been using ddev on Ubuntu with PHPstorm and those aspects have been running reliably as an atomic clock on my workstation.

Maybe the difference between us is my Drupal websites have been setup, (over and over again, i.e. multiple websites), using ddev plus my doc'd recipes from the get go, while you might be trying to modify an existing ddev/OS setup?

Thinking back to how I got everything to work for me on this workstation, upon realizing ddev was capable of doing all the heavy lifting itself, which is actually very much preferred to begin with, I have had to uninstall and verify I did uninstall all the LAMP stuff like PHP versions and Apache stuff from the Ubuntu OS. I know I ditched all that stuff, but I can't speak authoritatively what I did with regards to nvm and how it is installed on my workstation because to this day I admit my understanding of nvm is fuzzy.

See https://github.com/ddev/ddev/issues/6013
Also this discord convo: https://discord.com/channels/664580571770388500/1199750600653549598/1199...

The problem seems to occur when multiple node versions are installed with nvm in the container.

I found two solutions following these threads:
- Use system node by calling `ddev nvm alias default system`. As long as system node is used, the `nodejs_version` setting from .ddev/config.yml works.
- Call `ddev nvm alias default 20.11.1` instead of `ddev nvm use 20`.

I like the first option more.
But it means at that point we are not really using `nvm` anymore, and we are not using the `.nvmrc` file from the radix sub-theme.

Sorry, cross post :)

Where does .nvmrc come from to begin with? I am too lazy to look myself now.

When generating a sub-theme, it puts a `.nvmrc` file in the root dir of that sub-theme.
This is actually a copy of `radix/src/kits/radix_starterkit/.nvmrc`.
All it contains is one line saying "lts/iron". I imagine this just means get the latest version with long-term support. But I have no idea.
Effectively it will switch to node 20.x and npm 10.x.

Hi donquixote, there is no need to run npm inside the DDEV container when doing the build and compiling SCSS, so making nodejs version inside DDEV irrelevant in this case. Easiest is to do it directly under the local theme folder. The nvm already enforced the version on the user end. The nvm will need to be installed inside container if you prefer to do it there. The steps for both local folder and inside container are the same.

If you already install the nodejs via nvm, on the local theme folder, no DDEV command or environment involved.

$ cd web/themes/custom/ar_radix/
$ nvm use
$ npm install
$ npm run watch
$ npm run production

If you haven't install nodejs via nvm:
The same can be done inside the DDEV (or any docker-based) container.

// On local, you may may have run this, but you might have forgotten. 
$ nvm install lts/iron

// Or for container from local.
$ ddev nvm install lts/iron

// Or inside container.
$ ddev ssh
$ nvm install lts/iron

// Running build inside container.
$ ddev ssh
$ cd web/themes/custom/ar_radix/
$ nvm use
$ npm install
$ npm run watch
$ npm run production

Re: .nvmrc
Yes, correct. "lts/iron" means it will use the latest stable LTS version of v20.x.

Hope that helps.