RockDevTools - A Fresh Start for Development Tools (AIOM + LiveReload)

[bernhard]

Hi everyone!

I've started working on a new module that contains development tools like asset minification. Why a new module when RockFrontend and RockMigrations already have similar features?

I wanted to start fresh to make the code cleaner, and most importantly make it work properly with template cache! The old implementation in RockFrontend using page render hooks simply couldn't handle that.

The module is intended for development-only and should be disabled on production. The idea is to create minified assets while developing and then push the minified assets to production and there just include them in your markup!

LiveReload has also been moved from RockFrontend to this module. It's simply not a frontend-tool but rather a development tool! Using RockMigrations, for example, I'm always using the LiveReload feature on the backend, so it does not really make sense to have it in the frontend module 🙂 

Download & Docs: baumrock.com/RockDevTools

[rastographics]

I set the configuration as instructed $config->rockdevtools = true.

Yet still there is no config UI or evidence in the dashboard of rock dev tools anywhere besides the module install screen.

I even tried commenting out the 2 lines in the module's source code that exit early if $config->rockdevtools is not true. 

Any ideas on troubleshooting to get this module to appear in the ui?

[bernhard]

Not sure I understand your message. RockDevTools does not provide a UI. It provides an API to minify/merge assets and it provides SSE based live reload for your local pw development.

[Stefanowitsch]

Hi @bernhard i have a question about porting old projects that used the asset bundling and minification from RockFrontend the new method in RockDevTools.

My problem is that i get this error message on every project, after installing RockDevTools and trying to merge and minify my assets in my _init.php:

Error

Call to undefined function rockdevtools()

My _initp.php looks like this:

<?php
/**
 * Initialization file for template files 
 * 
 * This file is automatically included as a result of $config->prependTemplateFile
 * option specified in your /site/config.php. 
 * 
 * You can initialize anything you want to here. In the case of this beginner profile,
 * we are using it just to include another file with shared functions.
 *
 */

include_once("./_func.php"); // include our shared functions

if ($config->rockdevtools) {
    $devtools = rockdevtools();

    // force recreating of minified files on every request
    //$devtools->debug = true;

    // parse all less files to css
    $devtools->assets()
        ->less()
        ->add('/site/templates/styles/less/uikit/_custom-import.less')
        ->add('/site/templates/styles/less/project/*.less')
        ->add('/site/templates/styles/less/custom/*.less')
        ->add('/site/templates/RockPageBuilder/**.less')
        ->add('/site/templates/RockPageBuilder/*.less')
        ->save('/site/templates/styles/styles.css');

    // merge and minify css files
    $devtools->assets()
        ->css()
        ->add('/site/templates/styles/styles.css')
        ->save('/site/templates/styles/styles.min.css');

    // merge and minify JS files
    $devtools->assets()
        ->js()
        ->add('/site/templates/uikit/dist/js/uikit.min.js')
        ->add('/site/templates/uikit/dist/js/uikit-icons.min.js')
        ->add('/site/templates/scripts/main.js')
        ->save('/site/templates/scripts/scripts.min.js');
}

 

[bernhard]

Hi @Stefanowitsch the module needs to be installed otherwise the rockdevtools() function will not be available

[Stefanowitsch]

3 minutes ago, bernhard said:

Hi @Stefanowitsch the module needs to be installed otherwise the rockdevtools() function will not be available

I have the module installed. 

[bernhard]

Ok then it means you are missing the ProcessWire namespace on the _init file 😉 

I've added a note to the docs, thx.

[Stefanowitsch]

40 minutes ago, bernhard said:

Ok then it means you are missing the ProcessWire namespace on the _init file 😉 

This does not help either 😞

I have the feeling this in in my case a somehow cache-related problem (if that is even possible?) after tinkering with the namespace (and removing it again) in the _init.php and the included _func.php it is working now. Even without the namespace (?).

[rastographics]

Sorry but I'm excited to try this module for live reload in my dev environment and I've followed the only instructions I can find (at https://github.com/baumrock/RockDevTools/tree/main/docs).

1. Install the module

2. Add $config->rockdevtools = true; to the config.php file.

 

Now...how do I enable live reload? 

[Stefanowitsch]

On 4/27/2025 at 3:45 AM, rastographics said:

Sorry but I'm excited to try this module for live reload in my dev environment and I've followed the only instructions I can find (at https://github.com/baumrock/RockDevTools/tree/main/docs).

1. Install the module

2. Add $config->rockdevtools = true; to the config.php file.

 

Now...how do I enable live reload? 

Live Reload should be enabled by default, if you activate rockdevtools in the config file. That's basically all you need to do.

It can be customized, too:

https://www.baumrock.com/en/processwire/modules/rockdevtools/docs/livereload/

[rastographics]

Thank you @Stefanowitsch I didn't know there was documentation existing for this! I knew there had to be something I was missing.

 

I know RockDevTools is running now because I see the sse request in the browser console. but it gets a 404. any ideas the next place i can look at?

 

@bernhard, it may be helpful for others who find your module in the Modules Directory if there was a more direct reference to the docs on baumrock.com?

Right now, the RockDevTools Module page just says "see docs folder", at which point I just think to go to github and look at the docs folder, which also has no reference to the baumrock documentation.

[bernhard]

Thx @rastographics cleaning up old todos and just found your message! did you solve your problem?

Thx for the hint about the docs, I've added a link to baumrock.com 🙂 

[bernhard]

@Stefanowitsch asked whether it is possible to add sourcemaps to the compiled files. Now it is! 🙂 

[millipedia]

On 4/28/2025 at 4:03 PM, rastographics said:

I know RockDevTools is running now because I see the sse request in the browser console. but it gets a 404. any ideas the next place i can look at?

 

Just came across the same 404 error that @rastographics was having.

In my case it was because I was using a default nginx config that had a default rewrite rule of:

try_files $uri $uri/ /index.php?$args;

rather than rewriting to ?it=

try_files $uri $uri/ /index.php?it=$uri&$args;

Turns out that PW PagesRequest has a fallback so that using the different rewrite url mostly just worked (I've been using it for weeks and hadn't noticed anything), but @bernhard is explicitly looking in $_GET['it'] to see if livereload needs to be returned.

Updating the rule as above fixed things.

It might have been a completely different reason for @rastographics of course, but just in case someone else has the same issue that's what did it for me.
 

 

[bernhard]

Thx @millipedia anything I can do about it or that I can improve?

[millipedia]

26 minutes ago, bernhard said:

Thx @millipedia anything I can do about it or that I can improve?

Well it's not really a bug since your code does exactly what is intended. 

If you want to avoid user getting the 404 on misconfigured servers then you could try inspecting using the whole uri rather than the GET parameter.

Just trying:

// if (!str_ends_with((string)@$_GET['it'], 'rockdevtools-livereload')) return;
if (!str_ends_with((string)@$_SERVER['REQUEST_URI'], 'rockdevtools-livereload')) return;

in the couple of places you have it works fine for me even if I use the wrong rewrite rule.
I think REQUEST_URI should be fine to use these days.... 

[bernhard]

Thx @millipedia can you please try the lastest version from the dev branch? 🙂 

[millipedia]

Yep - just tried the dev version and that works for me.

[bernhard]

Ever wondered how long it takes for RockDevTools to collect the filemtime() for all watched files? I did, so I built a nice little info/debugging tool that will also help with customising /debugging which files are being watched:

Result: For 541 files it takes around 1ms on my macbook air m1 😎

[gornycreative]

Hi @bernhard

I'm getting caught up on updates and I was wondering if you were planning to add a variable array back into the Less and SCSS compile functions. In StylesArray back in the older version of RockFrontend you used to have a setvar function, and for debugging I also added a way to get variables (since these are sometimes calculated).

Do you want me to add it back in an submit a PR?

[bernhard]

Hey @gornycreative that's not planned from my side and I'd not recommend adding it unless you really don't have another option. I added this once so that I can create different colored versions of one website, but using css variables for this is much better! When you use LESS variables you need to keep track of every stylesheet that you generate, eg style-magenta.css and style-blue.css; having 10 colors means having 10 css files to create and load, whereas when using css variables it's just one!

With css variables you can even set different color schemes within one page just by setting a new value for your --theme-color or whatever css variable: <section style='--theme-color: red;'>...</section>