Dynamic pages not rendering correctly

Wappler General Bugs
#1

Hello, I am grateful for any help / suggestions on this weird problem I am facing:

Using Wappler 3.9.9, I am trying to follow Ken Truesdale’s lessons on user management. I created a Docker project on local machine with Node.js and MariaDB, successfully deployed and I can view index.html in browser.

The presumed bug is whenever I create a dynamic page, it previews and styles correctly in Wappler but does not seem to be aware of css in browser. I can create additional static pages and style them and there are no issues.

Am I missing an important step to make dynamic pages render correctly in browser?

#2

Hi Ken, any errors in the browser developer tools?

I’m not a fan of Docker but perhaps the actions aren’t deployed to Docker? Is there a Publish feature you can do to make sure it’s all deployed to Docker?

#3

Make sure that App Connect is added:

Screen Shot 2021-06-10 at 10.39.53 AM
Screen Shot 2021-06-10 at 10.39.53 AM980×490 38.1 KB

And also, there was a Wappler change that requires content pages to have a layout. Make sure you first create a vanilla layout and then create your content page and select the layout when creating.

#4

Sadly those didn’t work. App Connect local is selected, and I retrospectively added the layout to the page that was not rendering :confused:

#5

As I said, static pages render fine and there are no Docker errors in the console or within Docker logs.

#6

Are you sure you have a layout page selected for your content page? And are you sure you are not trying to preview the content page directly in the browser?

#7

Yes, I am :smiley:

Wappler_-_The_Visual_Web_App_Creator-2
Wappler_-_The_Visual_Web_App_Creator-2917×828 55.7 KB

#8

So are you opening the content page directly in the browser and not through it’s layout page?

#9

Not sure what you mean. I have some updates from work overnight (overall 6 hours later!): the page definitely had some errors - even applying a layout, saving and re deploying did not help. A new page with layout applied before viewing in the browser worked.

The key here is Wappler is meant to be a ‘visual’ designer but whilst in app preview and the browser appearance did not mach. That is poor.

Having used Wappler for a month or so, I find that 80% of time is taken to design the look at feel of the pages. I find configuring server actions more intuitive than the design system. This should not be the case.

#10

I mean that when you create a content page - it is not a full page. It is meant to be called within a layout page.

And that is because you cannot run the content page directly in the browser, it must be called within its layout page otherwise the style will be “broken”.
Content pages are part of layout pages and cannot be used separately.
The concept is explained here:

#11

So does that mean you cannot have pages without templates? If yes, this was not clear at all in many parts of the documentation. If yes, again this is confusing - as the template field could be left blank. My page which appeared broken initially was not a template based page. I added the template based on your suggestion.

#12

You cannot have a content page without a layout page and you cannot run content pages alone in the browser. The content pages can only be loaded inside a layout page.
Explained in the tutorial I linked to.

#13

Thanks Teodor. There are many Wappler tutorials out there which do not mention this key thing (I know you previously relied on SSI - which I learnt from a tutorial I hit when initially checking out Wappler).
It would be great to have an entire explanation section devoted to styling elements. This I feel is the major pain point of Wappler. Reading forums attest this thesis.

#14

That’s not the case. Content pages/layout pages for Nodejs have nothing to do with SSI and they are different things.

#15

I mean relied on SSI for creating template based pages.
So this only applies to Node.js? As I said at the start of this thread, it did not seem to affect static pages which were html pages. Dynamic pages broke.

Please please can you make it clear in the documentation? I wasted hours of my time tearing my hair out!

#16

SSI are used for other server models, like PHP.

NodeJS layout and content pages are different and they work differently.
Static pages are full html pages, unlike the content pages which are “parts” of the whole content.

#17

Thanks Teodor - hope this post will help generations of Wappler newbies! I guess lots of people who are new to web development will be attracted by Wappler’s ‘visual’ offering and will hit this wall quite easily. Perhaps you ought to have a high-level ‘idiots’ guide aimed at these.