Issue with nodemon in Rails esbuild application

Question

I’m encountering an issue with nodemon in my Rails esbuild application. The esbuild setup for a new rails app uses nodemon by default to watch for changes in the .scss files and trigger the CSS build process (yarn build:css) whenever changes occur. However, despite trying various configurations and troubleshooting steps, I haven’t been able to get it to work properly and the ./bin/dev keeps ending unexpectedly. I wonder if anyone else had experience with this or might have an idea on what other steps I can take to troubleshoot?

Project Setup:

I’m using Rails with esbuild for JavaScript bundling and Sass for CSS preprocessing. My project is structured as a Rails application with the usual directory layout.

Steps Taken:

1. I initialised my project with the following command: rails new app_name -d postgresql -j esbuild --css bootstrap

2. Then I added esbuild-rails by running (https://github.com/excid3/esbuild-rails): yarn add esbuild-rails 3. I created an esbuild.config.js in the root folder with the following content:

const path = require("path"); 
const rails = require("esbuild-rails"); 
require("esbuild") 
  .build({ 
    entryPoints: ["application.js"],
    bundle: true,
    outdir: path.join(process.cwd(), "app/assets/builds"), 
    absWorkingDir: path.join(process.cwd(), "app/javascript"), 
    plugins: [rails()], 
  }) 
.catch(() => process.exit(1));

In the package.json, I changed the script to: "build": "node esbuild.config.js"
Then ran yarn build.

What I’ve Tried:

Nodemon comes installed by default with Rails esbuild, but I encountered issues where it exits with code 1 without triggering the CSS build process or a log with more info about the error.
I tried switching to chokidar as an alternative file watcher, but encountered the same issue.
I verified the installation of both nodemon and chokidar and ensured they were accessible from my project directory.
I reviewed my project configuration files (package.json, esbuild.config.js, etc.) for any syntax errors or typos.
I uninstalled nodemon globally and reinstalled it locally in my project to ensure it was using the correct version.
I’ve checked the compatibility of my Node.js version, nodemon, and other dependencies to ensure they were compatible. Here are the versions being used:
- npm -v: 10.5.0
- yarn -v: 1.22.22
- node -v: v21.7.3
- nvm -v: 0.39.1
- rails -v: Rails 7.1.3.2
- nodemon -v: 3.1.0
When running yarn build:css manually, it works fine without any issues:

yarn build:css
$ yarn run v1.22.22
$ yarn build:css:compile && yarn build:css:prefix
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
$ postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css
✨  Done in 3.72s.

Current behaviour:

When running ./bin/dev to start my Rails application, nodemon starts watching for changes in my .scss files but exits with code 1 without triggering the CSS build process (yarn build:css).

Expected Behavior:

I expect nodemon to watch for changes in my .scss files and trigger the CSS build process (yarn build:css) whenever changes occur, without exiting prematurely.

Additional Information:

I’ve tried adding --verbose and --inspect flags next to nodemon in the script, but still didn’t receive any error messages.

12:20:17 web.1  | started with pid 38513
12:20:17 js.1   | started with pid 38514
12:20:17 css.1  | started with pid 38515
12:20:18 js.1   | yarn run v1.22.22
12:20:18 css.1  | yarn run v1.22.22
12:20:18 js.1   | $ node esbuild.config.js --watch
12:20:18 css.1  | $ nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css"
12:20:18 css.1  | [nodemon] 3.1.0
12:20:18 css.1  | [nodemon] to restart at any time, enter `rs`
12:20:18 css.1  | [nodemon] watching path(s): app/assets/stylesheets/**/*
12:20:18 css.1  | [nodemon] watching extensions: scss
12:20:18 css.1  | [nodemon] starting `yarn build:css`
12:20:18 js.1   | Done in 0.55s.
12:20:18 js.1   | exited with code 0
12:20:18 system | sending SIGTERM to all processes
12:20:18 css.1  | exited with code 1
12:20:18 web.1  | terminated by SIGTERM

Here’s the full package.json file for context:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.4",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.19",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "esbuild": "^0.20.2",
    "esbuild-rails": "^1.0.7",
    "nodemon": "^3.1.0",
    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
    "sass": "^1.75.0"
  },
  "scripts": {
    "build": "node esbuild.config.js",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you in advance for your help!

Maxence · Accepted Answer · 2024-04-17 10:19:36Z

My config is a bit different than yours. I use esbuild, but I don't use esbuild-rails and I don't have any esbuild config file.

Though I heavily rely on foreman to start multiple services simultaneously.

Basically I start my rails app with foreman start -f Procfile.dev -e .env.local

and my procfile.dev file looks like this :

web: rails server -p 3004 
sidekiq: bundle exec sidekiq
js: yarn build:dev --watch
scss: yarn build:css:application --watch
tailwind: yarn build:css:tailwind --watch
print-pdf: yarn build:css:print-pdf --watch
emails: yarn build:css:emails --watch
minify: yarn build:css:minify --watch

With my package.json scripts looking like :

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --minify --outdir=app/assets/builds && yarn run build:css",
    "build:dev": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "yarn run build:css:application && yarn run build:css:minify && yarn run build:css:tailwind && yarn run build:css:print-pdf && yarn run build:css:emails",
    "build:css:tailwind": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/builds/tailwind.css",
    "build:css:application": "yarn run sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css",
    "build:css:minify": "cleancss -o ./app/assets/builds/application.min.css ./app/assets/builds/application.css",
    "build:css:print-pdf": "yarn run sass ./app/assets/stylesheets/print-pdf.scss:./app/assets/builds/print-pdf.css",
    "build:css:emails": "yarn run sass ./app/assets/stylesheets/emails.scss:./app/assets/builds/emails.css"
  },

I am not familiar with nodemon, but spawning services in Foreman works like a charm.

After a quick check of nodemon, you may try the below instead:

"watch:css": "nodemon -L --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""

seems like the L flag tells it to be kept live. Though I cannot confirm it works.

EDIT: My bad, it's your JS which exited with code 0. Maybe try running your nodemon script in console just to see if it's not the escape characters by chance. (or replace your escaped double quotes with single quotes)

Collectives™ on Stack Overflow

Issue with nodemon in Rails esbuild application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related