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 19 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 16 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...

[uliverse]

Well, I did some more testing and found that the exec function is actually available.

I added this code to my page:

<?php
    $function_name = "exec";
    if ( function_exists($function_name) ) {
        echo "$function_name is enabled";
    }
    else {
        echo "$function_name is not enabled";
    }
?>

As you can see on the screenshot, the result is positive...

Don't get me wrong: I am not trying to ask for your help in my specific case. I believe in your product and I want to help make it usable for as many people as possible!

[bernhard]

Hey @uliverse I appreciate your input! It shows me that there is interest and it shows me that something is not working. If nobody says anything I don't even know if anything is using the modules at all. I tried this and you can also try it:

And this is what my AI says, wich sounds quite reasonable:

Quote

Thank you for providing the context. Let's explore some potential issues that could prevent the `exec('npm run build');` command from working for the user in the forum. Here are some possible reasons and suggestions for troubleshooting:

```php:subfolder/site/livereload.php
// ... existing code ...

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

// Improved version with error handling and logging
$output = [];
$return_var = 0;
exec('npm run build 2>&1', $output, $return_var);

if ($return_var !== 0) {
    // Log the error
    wire()->log->error('npm build failed: ' . implode("\n", $output));
    // Optionally, you can also display the error to the user
    // echo "Error running npm build. Check the ProcessWire logs for details.";
}

// ... existing code ...
```

Here are some potential issues and explanations for the changes:

1. **Path to npm**: The `exec()` function might not be able to find the `npm` executable. This could happen if `npm` is not in the system's PATH or if PHP is running under a different user context.

   Suggestion: Use the full path to npm, e.g., `exec('/usr/local/bin/npm run build 2>&1', $output, $return_var);`

2. **Permissions**: The PHP process might not have the necessary permissions to execute npm or access the required directories.

   Suggestion: Check the permissions of the directories and files involved in the build process.

3. **Working Directory**: The `exec()` function might be running in an unexpected working directory.

   Suggestion: Change to the correct directory before running the command:
   ```php
   chdir('/path/to/project/root');
   exec('npm run build 2>&1', $output, $return_var);
   ```

4. **Error Output**: The original code doesn't capture error output, making it difficult to diagnose issues.

   Suggestion: Capture both standard output and error output using `2>&1` as shown in the updated code.

5. **Error Handling**: The original code doesn't check if the command was successful.

   Suggestion: Check the return value and log any errors, as demonstrated in the updated code.

6. **Environment Variables**: The PHP environment might be missing necessary environment variables.

   Suggestion: Set required environment variables before running the command:
   ```php
   putenv("PATH=/usr/local/bin:/usr/bin:/bin");
   exec('npm run build 2>&1', $output, $return_var);
   ```

7. **Node.js and npm Installation**: Ensure that Node.js and npm are properly installed on the server.

8. **Project Dependencies**: Make sure all necessary dependencies are installed (`package.json` and `node_modules`).

To help the user troubleshoot, you could suggest they implement these changes and check the ProcessWire logs for any error messages. Additionally, they should verify their Node.js and npm installation, as well as the presence and correctness of their project's `package.json` file.

So you need to make sure that exec is working fine. You can do so, for example, by executing something like "exec('touch /path/to/project/foo.txt');" if the file is created exec works. If not, exec doesn't work.

Then check if NPM is available to your exec() command. And then we'll see how we proceed.