Setup with ddev

Recommended way to run BrowserSync when using ddev

While not strictly necessary to run the node commands through ddev, there are some use cases that justifies it.

There's a good blog post called Drupal Radix Sub-theme Browsersync With DDEV by Kent Richards that you can read, but here's the gist:

Steps:

1. First set your nodejs_version to `lts/jod` so it is the same as your version defined in .nvmrc in the sub-theme

ddev nvm install lts/jod

Then re-run your ddev:

For ease of use, you can define a ddev command in .ddev/commands/web/ and create a watch file (no extension needed) with the following:

#!/bin/bash

## Description: Installs nvm version and runs npm watch
## Usage: theme:watch
## Example: ddev theme:watch THEME_NAME

GREEN='\033[0;32m'
RED='\033[0;31m'
NC='\033[0m\n' # set no color and line end

printf "${GREEN}Launching npm install inside ddev${NC}"

if [ -z "$1" ]; then
    echo "Please provide a theme name. Usage: ddev theme:watch THEME_NAME"
    exit 1
fi

cd web/themes/custom/$1
nvm alias default `cat .nvmrc`
npm run watch

Once that's done, you can run the watch command with: ddev theme:watch THEME_NAME . You may also create additional commands if you need them accordingly.

Special thanks to Nathan Kendall, Kent Richards, and others in this issue