Sage 10 app.css Not Present with 'yarn dev' on Windows with WSL

kwdit · March 23, 2022, 6:42am

I have my site set up with Laragon on Windows.
I’m using WSL to run build commands within the theme directory.

If I run yarn build I can see app.{random version}.css within my code.
My heading colour reflects the Tailwind CSS that I’ve added.
If I change my Tailwind CSS class to a different colour, the text reverts to it’s default.
I understand that this is due to the new style not being present within the app.{random version}.css file.

If I run yarn dev the colour change to my heading displays correctly again.
I’m a little confused as to what’s going on here.
There’s no sign of app.css or app.{random version}.css etc at this point.
I’ve got 4 css files being loaded. Two are core and two are plugin related.
I’ve tried searching the code for the class name, encase the style is injected directly into the code.
Anyway, the bigger issue is that if I change my Tailwind CSS class to another colour, the text reverts to it’s default again.

With Sage 9, I was used to viewing my site via http://localhost:3000/ with BrowserSync.
I’m not sure if it’s related, but when I visit http://localhost:3000/ I just get an error.
Cannot GET /
Sorting out BrowserSync is next on my list, but there doesn’t appear to be as much information on this, with Sage 10.
Do I need to tackle accessing my website via http://localhost:3000/ to see TailWind CSS changes update, without having to run yarn build each time?

Am I fighting a loosing battle trying to develop on Windows with Laragon and the WSL?
Should I be focussing on a setup that involves more complex tools, like Docker and Devilbox etc?
I also use Mac’s, but I’d still like to be able to do local development in a Windows environment with WSL, as well as Mac local development.

Any advice would be greatly appreciated. Thanks!

ben · April 6, 2022, 2:47pm

With Sage 10 it is expected for there not to be a stylesheet request in your browser when using yarn dev because it’s injected by Javascript

The rest of your problems should be solved by configuring your Bud proxy and serve values correctly

install browsersync: yarn add browser-sync browser-sync-webpack-plugin --dev
modify bud.config.js:

# @ bud.config.js
const bs = require('browser-sync-webpack-plugin')

...
    .use(new bs({proxy: 'http://example.test'}))

full config example

const bs = require('browser-sync-webpack-plugin')

module.exports = async (app) => {
  app
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })
    .assets('images')
    .watch('resources/views/**/*', 'app/**/*')
    .use(new bs({proxy: 'http://example.test'}))
};

kwdit · April 7, 2022, 4:07pm

Thanks for taking the time to review this post.

On Mac, I can visit the “server url” and I see live updates, without installing browsersync.

On Windows, I’ve now used WSL2, Docker and Devilbox to set my site up.
The site is working, but for changes to show on the DEV url, I’d need to refresh the browser.

When I run yarn dev, I get the following output.

None of the requested ports could be resolved. A port was automatically selected: 45425
server url:    http://localhost:45425/
proxy url:     http://kwd-it.loc/

When I visit the proxy url, things continue to work as described above.

When I visit the server url, I just get the following.

	This site can’t be reached
	localhost refused to connect.
	Try:
	Checking the connection
	Checking the proxy and the firewall
	ERR_CONNECTION_REFUSED

I’ve tried fully disabling ESET and retesting, but this doesn’t help.

I naively thought I had browsersync working on my Mac, due to the live updates.
I guess not, if I haven’t even installed it.

Since reading your post, I’ve installed browsersync on my Windows setup.
I’ve also adjusted bud.config.js as follows…

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */

const bs = require('browser-sync-webpack-plugin')

module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    .use(new bs({proxy: 'http://kwd-it.loc'}))

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
    //.proxy('http://kwd-it.loc')

    /**
     * Development URL to be used in the browser.
     */
    //.serve('http://localhost:3000');
};

I’ve re-ran yarn build followed by yarn dev.
I now get the same message about the port and the URL’s given to me are as follows.

server url:    http://0.0.0.0:33653/
proxy url:     http://kwd-it.loc/
--------------------------------------
       Local: http://localhost:3005
    External: http://172.16.238.10:3005
 --------------------------------------
          UI: http://localhost:3006
 UI External: http://localhost:3006

The localhost URL’s just return the same error as before.
The 0.0.0.0 URL returns the following…

This site can’t be reached
The web page at http://0.0.0.0:33653/ might be temporarily down or it may have moved permanently to a new web address.

Without including .serve('http://localhost:3000'); the server url appears to revert to a 0.0.0.0 IP.
This wasn’t included in the “full config example” though.

I’ll try and test out this process on Mac tomorrow.
It appears I’ve still got a lot to learn outside of Roots/Sage.
Hopefully, I’ll have it all working soon.

ben · April 7, 2022, 9:09pm

You wouldn’t use both Browsersync and Bud .serve/.proxy in your config, you would want to be using one or the other. That’s why it’s not included in the full config example

kwdit · April 14, 2022, 2:05pm

Thanks for claryfying Ben.

I was quite happy with Bud .serve/.proxy on Mac. I was getting the live updates, which is what I’m after.
I’d be OK going without all of the other features that come with Browsersync for now.

I guess the probem that I really want to solve, is that I can’t access my serve URL via my browser.
On Mac, http://localhost:3000 works fine.
It appears my issue is that port 3000 isn’t accessible via Windows and is restricted within my php container.
The link below discusses how to make ports accessible outside of my PHP container.
Reverse Proxy with HTTPS — Devilbox 1.0 documentation
I’ve tried completing these steps, but updating the port to use 3000 instead. Still no luck!

Anyway, I realise these are really Windows DEV questions, so I’ll keep on hunting and hopefully make some progress soon.

mazero · May 13, 2022, 9:23am

Hi,
@kwdit @ben

Did you manage to solve this problem?
I am experiencing the same thing. I’m running on WSL with Apache2 installed and the resources don’t reload when I run the yarn dev (bud) command - no watcher is working.

 */
.proxy('http://mywebsite.local')

/**
 * Development URL to be used in the browser.
 */
.serve('http://localhost:3000');

Can you tell me why?

mazero · May 13, 2022, 9:50am

Hi,
@kwdit @ben

Did you manage to solve this problem?
I am experiencing the same thing. I’m running on WSL with Apache2 installed and the resources don’t reload when I run the yarn dev (bud) command - no watcher is working.

 */
.proxy('http://mywebsite.local')

/**
 * Development URL to be used in the browser.
 */
.serve('http://localhost:3000');

yarn run v1.22.18
$ bud dev
[99%] [done] MultiCompiler plugins

┌ assets ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ │
│ app app.js 64.79 kB │
│ editor editor.js 55.78 kB │
│ vendor/bud.app.editor vendor/bud.app.editor.js 50.03 kB │
│ ᠃ manifest.json 113 bytes │
│ ᠃ entrypoints.json 109 bytes │
│ ᠃ wordpress.json 33 bytes │
│ │
│ │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
duration 1s 345ms

mode development hash 20959821afc97000ff5e
bud 5.7.6 webpack 5.70.0

server url: http://localhost:3000/
proxy url: http://mywebsite.local/

[99%] [cache] begin idle

Can you tell me why?

kwdit · May 14, 2022, 5:50am

I’m afraid I can’t help at this stage.

I’ve invested so much time in Sage and other work commitments have taken priority now.

Currently I’m focussing on just using Docker instead of Laragon, with a Bedrock setup and a custom theme. Once I’m more familiar with this setup and I have some time free again, I’ll revisit Sage 10.

As soon as I’m up an running with Sage 10, I’ll revisit my posts and be sure to add any helpful information that I can provide. Please do the same, if you make any progress. Thanks!

simonizljubljane · May 16, 2022, 8:45pm

Maybe I can help.

I just finished setting up Sage 10 on WSL and managed to get it working with HMR (hot reloading) and Tailwind autocomplete in PHPStorm.

Steps that I took:

Install WSL
Install Docker for Windows
Install Devilbox to WSL (follow this guide Step 1 - Step 8)
Enter php container (from devilbox dir run ./shell.sh) and install wp with wp-cli:

cd /shared/httpd/sagetest/htdocs
wp core download --locale=sl_SI
wp config create --dbname=sagetest_wp --dbuser=root --dbhost=127.0.0.1
wp config set WP_ENVIRONMENT_TYPE "development"
wp config set WP_DEBUG true --raw
wp core install --url=sagetest.loc --title="Sage Test" --admin_user=user --admin_password=pass --admin_email=user@email.com

Enable port forwarding for port 3000:
In devilbox dir create docker-compose.override.yml with this content:

# IMPORTANT: The version must match the version of docker-compose.yml
---
version: '2.3'
  php:
    environment:
      - DEBUG_ENTRYPOINT=${DEBUG_COMPOSE_ENTRYPOINT}
      - DEBUG_COMPOSE_ENTRYPOINT
      - DOCKER_LOGS

      - COMPOSER_MEMORY_LIMIT=-1

      - NEW_UID
      - NEW_GID

      - TIMEZONE

      - ENABLE_MODULES=${PHP_MODULES_ENABLE}
      - DISABLE_MODULES=${PHP_MODULES_DISABLE}

      - ENABLE_MAIL=${PHP_MAIL_CATCH_ALL:-2}

      ## only change from original docker-compose is 3000:httpd:3000
      - FORWARD_PORTS_TO_LOCALHOST=80:httpd:80,443:httpd:443,3000:httpd:3000,3306:mysql:3306,5432:pgsql:5432,6379:redis:6379,11211:memcd:11211,27017:mongo:27017

      - MYSQL_BACKUP_USER=root
      - MYSQL_BACKUP_PASS=${MYSQL_ROOT_PASSWORD}
      - MYSQL_BACKUP_HOST=mysql

Copy acorn folder from latest Acorn to wp-content/mu-plugins and create loader acorn-load.php in mu-plugins for it:

<?php
require WPMU_PLUGIN_DIR.'/acorn/acorn.php';

From php container (from devilbox dir run ./shell.sh) install Sage
Update bud.config.js like this:

    .proxy('http://sagetest.loc')

    .serve('http://sagetest.loc:3000');

From wsl reload containers:

docker-compose stop
docker-compose rm -f
docker-compose up

Run yarn -dev from theme folder and go to http://sagetest.loc:3000

And that is it

kwdit · May 17, 2022, 6:05am

Many thanks for your reply.

The port forwarding within the docker-compose.override.yml file looked like the missing piece of the puzzle for me.

However, I’m still getting the same error.

This site can’t be reached
sagetest.loc refused to connect.
Try:

Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED

Again, Firewall is disabled and http://sagetest.loc/ works fine.

I noticed the contents of the docker-compose.override.yml-example file didn’t resemble the contents above, so I created a docker-compose.override file with the exact contents above.
Did you provide the full contents or just the top section and I’m potentially missing something crucial?

simonizljubljane · May 17, 2022, 11:53am

For docker-compose.override.yml I followed this instructions:
https://devilbox.readthedocs.io/en/latest/configuration-files/docker-compose-override-yml.html

When you start devilbox it should log something like this to console:

devilbox-php-1    | 2022-05-17 10:46:30,884 INFO spawned: 'socat-3000-httpd-3000' with pid 1222

Maybe try using different browser, I am using Firefox. Also I have https mode only disabled in browser setting because HMR only works on regular http currently for me.

Also if you run yarn build the site will not be accessible on http://sagetest.loc:3000/, this works only with yarn dev.

Maybe you have some other service that is occupying port 3000 on Windows side.
You can modify that bit from docker-compose.override.yml where it says

3000:httpd:3000

to something like

3000:httpd:8080

and then in bud.config.js

.serve('http://sagetest.loc:8080');

HMR enabled url should be then accessible on http://sagetest.loc:8080

kwdit · May 17, 2022, 8:42pm

Thanks again.

I’ve searched the content in the console for socat, but all instances that relate to httpd, either reference port 80 or port 443.

I’ve tried Firefox and HTTPS Only Mode was already disabled.

I’ve been running yarn build on the initial setup, but from then on, I’ve used yarn dev.
I’m launching the browser by clicking the link that’s returned from the yarn dev command.

I’ve tried changing 3000:httpd:3000 to 3000:httpd:8080 and also another random port, whilst ensuring bud.config.js is also updated to match accordingly each time.

I’m also following these steps each time, just before running yarn dev.

docker-compose stop
docker-compose rm -f
docker-compose up

I think it’s best I try and get access to a different Windows machine and attempt the steps there.
This will hopefully help me figure out if it’s a machine issue or human error.

Thanks for your help so far, it’s been very useful information.

kwdit · May 17, 2022, 8:56pm

Apologies, I’ve just spotted a typo in my docker-compose.override.yml file name.
This explains not seeing the expected info in the console.

When named correctly, I get yaml: line 3: did not find expected key.
I’ve tackled this issue thanks to the link below…

I’ve taken an exact copy of the original and stripped out everything, but the content you provided.
However, I did leave Services in…

version: '2.3'
services:
  php:
    environment:

Obviously, I’ve added 3000:httpd:3000, in also.

This got my override working and I now see the expected information in the console, when running Devilbox.

However, yarn dev did output a random port, saying port 3000 was in use. I therefore updated docker-compose.override.yml and bud.config.js to use a different port and retested.

This time the expected port was returned via yarn dev, but I was still left with the same error in the browser.

Definitely making progress, but not quite there. Apologies for the hasty tests yesterday.

simonizljubljane · May 18, 2022, 4:28am

My output (only lines where port 3000 is being mentioned) from console after docker-compose up is like this:

devilbox-php-1    | [INFO] Forwarding httpd:3000 to 127.0.0.1:3000 inside this docker.
...
devilbox-php-1    | [INFO] Enabling 'socat-3000-httpd-3000' to be started by supervisord
...
devilbox-php-1    | 2022-05-17 19:18:50,321 INFO Included extra file "/etc/supervisor/conf.d/socat-3000-httpd-3000.conf" during parsing
...
devilbox-php-1    | 2022-05-17 19:18:51,328 INFO spawned: 'socat-3000-httpd-3000' with pid 1220
...
devilbox-php-1    | 2022-05-17 19:18:52,381 INFO success: socat-3000-httpd-3000 entered RUNNING state, process has stayed up for > than 1 seconds (startsecs)

If you don’t see similar/same messages about port 3000 forward then you have something wrong with docker-compose.override.yml or devilbox config.
I would go over log files if there are any errors about this:
https://devilbox.readthedocs.io/en/latest/intermediate/read-log-files.html

Also go over docs for docker-compose.override.yml again.
When I got it working I realized that my WSL was littered with remnants of unsuccessful tries so I decided to delete WSL altogether and install again by following those steps that I wrote in previous post. If you dont find the reason why docker-compose.override.yml is not loading then maybe try this. That way you account for possibility that maybe WSL is not set up correctly.

Also another thing I remebered… Dont run yarn dev from inside php container (when I did this the port was some random number and never the same as that one that I specified in bud.config.js and the link didnt work). Run yarn dev from theme directory in WSL.

kwdit · May 18, 2022, 7:35pm

I think you might have been typing your last reply at the same time that I was typing my last reply.

My override is working OK now and I’m getting the expected output.

I’ve installed yarn within the WSL and tried running yarn dev outside of the Devilbox shell container. No luck there.

I’ve recently wiped my entire machine due the amount of things that I’ve tried over the last few months. I’ll give you an update once I’ve chance to wipe WSL and repeat all steps on a fresh install.

kwdit · May 22, 2022, 12:14pm

I’ve tried removing wsl now and repeating all of the steps from scratch.

I’m still getting the same problem.

I’ve decided to record the process of me muddling my way through the steps…

I can’t imagine you’ve got 35 minutes spare to watch it though and I wouldn’t advise anyone following it as a guide. It’s more of a tutorial on how not to do things.