RockFrontend Site Profile - RockFrontend + UIkit + TailwindCSS

[bernhard]

Hey @uliverse I don't see the topbar error so I'm wondering if you might have an outdated cache or something? Can you try do do a completely new installation? Can you provide exact steps what you did?

Regarding tailwind not recompiling... how does your /site/livereload.php look like? Does livereload work?

PS: Here are the docs for livereload: https://github.com/baumrock/RockFrontend/tree/dev/docs/livereload

[uliverse]

I cleared the database and re-installed everything (local MAMP installation), but the problem persists. I am going the traditional way: download Processwire, download SiteRockfrontend, move the site-rockfrontend folder into the root folder and install PW with Rockfrontend as site profile. Then run "npm install -D" in the root folder of the project. My installation looks like the screenshot now.

The relevant part of livereload.php looks like this:

if (!defined('PROCESSWIRE')) die();

// early exit if not in debug mode or livereload is not enabled
if (!wire()->config->debug) return;
if (!wire()->config->livereload) return;

// run npm build to compile css from tailwind
exec('npm run build');

The fronend is reloading after a file change, but the tailwind.css is not being recreated. If I manually execute "npm run build" it works. Is it possible, that the exec command is run in the site subfolder and therefore not working correctly?

About the topbar: the path to the topbar.css is not correct:

 

Edited 16 hours ago by uliverse

[bernhard]

Hey @uliverse thx for that screenshots. I was able to reproduce the issue when installing PW in a subfolder. I never do that, so it causes trouble more often that I'd like, because I don't realise if anything doesn't work.

Your issue is fixed now in the latest version 3.21.1

2 hours ago, uliverse said:

The fronend is reloading after a file change, but the tailwind.css is not being recreated. If I manually execute "npm run build" it works. Is it possible, that the exec command is run in the site subfolder and therefore not working correctly?

This works for me in my subfolder installation, so my guess is that exec() is not available in your setup?

Could you try this /site/livereload.php ?

<?php

namespace ProcessWire;

/**
 * This file will be loaded by RockFrontend whenever livereload detects
 * a change in the source files. By default it will run npm run build to compile
 * the css from tailwind, but you can add other commands to run other scripts
 * like running tests or linters as you need.
 *
 * If you are not using Tailwind or you don't need to compile anything, you
 * can remove this file.
 */

if (!defined('PROCESSWIRE')) die();

// early exit if not in debug mode or livereload is not enabled
if (!wire()->config->debug) return;
if (!wire()->config->livereload) return;

// run npm build to compile css from tailwind
// check if exec is available and allowed
if (function_exists('exec') && !in_array('exec', explode(',', ini_get('disable_functions')))) {
  exec('npm run build');
} else {
  rockfrontend()->getLiveReload()->log('exec() not available');
}

Or in Tracy try this:

What does it show?

[uliverse]

42 minutes ago, bernhard said:

Hey @uliverse thx for that screenshots. I was able to reproduce the issue when installing PW in a subfolder. I never do that, so it causes trouble more often that I'd like, because I don't realise if anything doesn't work.

Your issue is fixed now in the latest version 3.21.1

This works for me in my subfolder installation, so my guess is that exec() is not available in your setup?

Could you try this /site/livereload.php ?

<?php

namespace ProcessWire;

/**
 * This file will be loaded by RockFrontend whenever livereload detects
 * a change in the source files. By default it will run npm run build to compile
 * the css from tailwind, but you can add other commands to run other scripts
 * like running tests or linters as you need.
 *
 * If you are not using Tailwind or you don't need to compile anything, you
 * can remove this file.
 */

if (!defined('PROCESSWIRE')) die();

// early exit if not in debug mode or livereload is not enabled
if (!wire()->config->debug) return;
if (!wire()->config->livereload) return;

// run npm build to compile css from tailwind
// check if exec is available and allowed
if (function_exists('exec') && !in_array('exec', explode(',', ini_get('disable_functions')))) {
  exec('npm run build');
} else {
  rockfrontend()->getLiveReload()->log('exec() not available');
}

Or in Tracy try this:

What does it show?

I have changed the livereload.php, but the result is the same.
In Tracy I get

array (0)

Edited 14 hours ago by uliverse

[bernhard]

40 minutes ago, uliverse said:

I have changed the livereload.php, but the result is the same.
In Tracy I get

array (0)

I guess that shows the problem. You can try if shell_exec works. Other than that I fear I cant help with this one as it's totally specific to your environment. You can try to ask an AI to help. And I can't recommend DDEV enough (https://ddev.readthedocs.io/en/stable/)

Maybe anyone else has ideas?

PS: Of course you can use any other npm based workflow and add another script like "npm run watch" that you start during development. I don't like this approach, but that's how 99% work I guess, so maybe you prefer such a setup too.

[uliverse]

Thank you, @bernhard! Too bad... I will try to figure out why exec is not working in MAMP...