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 September 30 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 September 30 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.

[uliverse]

I think I have to give up on exec at this point, this is way over my head... The problem seems to be that the exec function can't be called in my MAMP environment, not even when I add the full path to the npm script.

However I found that tailwind comes with a "--watch" command to monitor any changes. And this works! I guess only until the console is closed, but better than manually initiating the build command with every change... I run a command like this: 

npx tailwindcss -i ./input.css -o ./site/templates/bundle/tailwind.css --watch

The input.css looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

I'm sure I totally messed up your setup, but it seems to work.

I was also wondering if the standalone CLI might not be easier to install for most people on shared hosting...

Edited October 1 by uliverse

[bernhard]

The --watch command is fine and as I said most likely what 99.9% of tailwind users do. I don't like it, because it does not recompile the css in the way "npm run build" does. It has some caching, so if you add classes during dev and then remove them, they stay in your css, which I don't like, because I want to immediately be able to "git commit" my changes without having to run "npm run build" before (and likely forget that).

But if watch works for your setup its totally fine to use.

Again. I can't recommend DDEV enough and in the time of your troubleshooting you'd likely had it installed and working ^^

12 minutes ago, uliverse said:

@tailwind base;
@tailwind components;
@tailwind utilities;

I don't know why you added components here, but if you need them go ahead. The problem with adding anything other than what I do in the site profile is that these things often interfere with UIkit or whatever framework you use. If you don't use one and use only tailwind then of course you'll likely want to add components as well.

For me all the necessary tailwind magic comes from the utility classes. Everything else I'm using UIkit for.

[uliverse]

26 minutes ago, bernhard said:

The --watch command is fine and as I said most likely what 99.9% of tailwind users do. I don't like it, because it does not recompile the css in the way "npm run build" does. It has some caching, so if you add classes during dev and then remove them, they stay in your css, which I don't like, because I want to immediately be able to "git commit" my changes without having to run "npm run build" before (and likely forget that).

I see... Makes sense.

25 minutes ago, bernhard said:

I don't know why you added components here, but if you need them go ahead. The problem with adding anything other than what I do in the site profile is that these things often interfere with UIkit or whatever framework you use. If you don't use one and use only tailwind then of course you'll likely want to add components as well.

For me all the necessary tailwind magic comes from the utility classes. Everything else I'm using UIkit for.

 I just followed the instructions in the tailwind docs... This is all new to me.   😄