Unified yarn build --watch command js+css

[bbonamin]

Hello!

This is fantastic. I've been following along the progress in https://github.com/rails/jsbundling-rails and was wondering how to set up Tailwind. I did a small PoC using it as a postcss plugin but the setup in this gem is SO MUCH NICER.

Now, to use the sister gems, my understanding is that now we need to run yarn build --watch and yarn build:css --watch side by side. Is there a way to merge that into a single command? Perhaps at install time if the other gem is detected we could add yet a third task to package.json such as https://github.com/open-cli-tools/concurrently#why that runs both?

Unfortunately from initial testing concurrently doesn't seem to pass flags to child processes so we'd need a different task for "watch"

[dhh]

I don't think it's trivial, because some of these watchers kinda take over the terminal. They're not just appending to a log. But if someone figures it out ✌️

[t27duck]

A common pattern I've seen is to use the concurrently npm package to string together the commands side by side. It would require a separate watch and build command in package.json, though.

[tommasongr]

You can use foreman to start all your processes together.

In your project root create a Procfile.dev file with this configuration:

rails: bin/rails s -p 3000
js: yarn build --watch
css: yarn build:css --watch

And a .foreman file with this configuration:

procfile: Procfile.dev

Then install foreman gem install foreman (they recommend to not put it the bundle)

With this configuration you can simply run foreman start to start all your processes at once

[bbonamin]

Foreman is nice but it introduces complexity such as not being able to summon a REPL/breakpoint in the middle of Rails code (unless you use a "remote" REPL).

I guess that coming from ./bin/webpack-dev-server which takes care of JS + CSS. Or just JS while CSS was being taken care of by Sprockets, it'd be nice to have something similar here!

[tommasongr]

Foreman is nice but it introduces complexity such as not being able to summon a REPL/breakpoint in the middle of Rails code (unless you use a "remote" REPL).

Yeah that is quite annoying but for simple website projects (where you don't have a lot to debug) I find it quite useful 🙃

[tommasongr]

Anyway I love this new direction for managing assets in Rails! Especially for js and the speed improvements that ESM or esbuild bring to it.

Being new to Rails and coming from VueJS development where Vite (esbuild) is quite popular I was frustrated by the slow Webpack build time.

I'm looking forward to try importmaps in Rails 7.0 🎉

[dhh]

Implmented the foreman approach with a bin/dev bin stub. Thanks!

[ahoward]

perhaps i'll put together a PR but, running with tmux (and the tmuxinator gem) solves all these issues, including being able to interact with any/all subprocesses. the dev experience is sooooo much better than foreman and about a million LOC less that it's almost certainly worth requiring that binary. it is for all possible rails envs afaik

[ritchiey]

I realise this is an old thread but it might benefit someone to know that https://github.com/DarthSim/overmind is a great foreman replacement that solves the problem of not being able to interact with the processes individually.