Wappler v5.4.0 broke website styles inside design view

[Apple]

Wappler v5.4.0 (MacOS) broke website styles inside Wappler UI, meaning my project shows unstyled in Wappler v5.4.0 like it’s a website from the 2000.

What exactly has changed from v5.3.3 to v5.4.0 regarding this?

I confirm:

1. No project changes were performed during the upgrade from v5.3.3 to v5.4.0
2. main.ejs renders correctly, although it does show an error (related to an EJS expression) in the console that didn’t appear in previous Wappler versions. Fixing the error doesn’t fix the other pages
3. Reverting to v5.3.3 makes it work again

On a regular page:

Project settings that are unchanged since forever:

[George]

Was that on a specific content page? The head of the main page gets now fully included to correctly render.
This was available as experimental options for a few months to test.

Could you post the html code of the main page and the content page so we can check?

Try also other pages

[Apple]

@George

Was that on a specific content page?

None of the content pages were working/styled

@George

The head of the main page gets now fully included to correctly render.

Interesting! I had experimental off

I found the cause of the issue, on main.ejs it was like this:

<link rel="stylesheet" href="bootstrap/5/darkly/bootstrap.min.css" />

I prepended a /, like this:

<link rel="stylesheet" href="/bootstrap/5/darkly/bootstrap.min.css" />

I also did the same with other similar tags (such as script tags), now it’s working

Is there a config to change to automatically fix this? The dmx components stuff already had the slash prepended though

[patrick]

You probably had it configured once as relative to document instead of relative to site root, it doesn’t update existing pages after you change that setting, it should fix the urls when you save the file again.

With the url fixed, do the content pages now show correctly again?

[Apple]

@patrick

You probably had it configured once as relative to document instead of relative to site root

Possibly

@patrick

it should fix the urls when you save the file again

Saving the file didn’t fix the URLs

@patrick

With the url fixed, do the content pages now show correctly again?

Yes

[George]

@Apple

Saving the file didn’t fix the URLs

You need to save the main page again.

[Apple]

You mean save main.ejs again? That’s what I did

[George]

Yes that is what I mean. And the bootstrap include links didn’t became absolute? Or did you already change them to begin with /

[Apple]

They didn’t change on their own, I changed them to begin with / and then reverted to test

[Emiel]

This also happened to one of my projects. Any solutions yet??

[George]

Yes solutions is just to have site relative links in your project, which is required for NodeJS

It is on option in your project settings. Set it and save your main page and make sure includes are absolute from your site root.

[Emiel]

@George

Yes solutions is just to have site relative links in your project, which is required for NodeJS

This was the setting in my project settings already and most of the script and style links were prepended by a ‘/’, except the custom bootstrap stylesheets and scripts. Manually prepended a / to those paths as well like @Apple did, which fixed the issue.

Thanks for the quick reply @George!

[George]

@Emiel

custom bootstrap stylesheets and scripts

Aha custom bootstrap theme? Yes you have to fix those manually.

@Apple was your case also custom bootstrap?

[Apple]

As far as I remember it’s one of those Bootswatch themes (don’t remember if it’s the original location or not), but I also had some custom CSS in a separate file

[TwitchBlade]

It’s not just a NodeJS issue, same thing happened in all my PHP projects.

[updates]

It happens in my node.js project. Wappler visualises the page with styles and suddenly as I made some modification sometimes show it like html 1.0. Also in previous versions
Then I must restart it to get the page properly shown

[bpj]

@george this is causing me problems too

I am working in a PHP with a head index page and lots of routes. Where route pages are in the root folder everything works ok. The content page references the head as ‘index.php’ and design view shows and everything saves ok.

When, however, a route page is in a subfolder I get issues. If I change the reference to the head page to ‘index.php’ design view works but it will not save as Wappler says it cannot find the head page. If I change the head reference to ’ …/…/index.php’ design view now doesn’t work but it will save.

I have site root selected in project settings: