Still Frustrated!

[KenSab]

I have read extensively through this forum but due to my dark era of the 80’s, whatever brain cells I have left don’t seem to quite get the grasp of this (what seems to be) lovely software called Wappler!

You wouldn’t know it by my questions here, but I come from a Full Stack development background and while I have never claimed to be any good at it, I do understand and worked with difficult concepts previously.

** I have already read the Wappler documentation/browsed this community discussion & did the course by Ken. I’ve also watched countless Youtube videos (Most of them are outdated (old versions) or a short videos on components).

Okay, sorry for the venting! My questions are…

1. Is there a clear and concise explanation/guideline of the structure of apps being built by Wappler?
   Clarity - When I start a new project in Wappler and create a new page, Wappler loads an .ejs page (I know I can change this & have) but why this page and why isn’t it just a .js or .html for example?

2. Why does the page ask if its a Content or a Layout page? I just need a simple SPA with routing & URL rewriting - is that too much to ask?

3. Why does the first page always start with the ‘BODY’ in the App Structure and not ‘APP’ until I do this App Connect Local thing?

4. When I created a Layout page, I couldn’t see it in a browser & got a 404 for my effort (seemed like a good score but I quickly realized its bad because it was less than half my credit score AND the page didn’t load!). I then had to create a Content page and attach it to the Layout page which when opened in a browser, displayed everything. How do I attach the ‘Fish Slap’ to my F5 key? Is this not like scratching your left ear with your right hand from the back of your head?

5. What are the proper steps in saving & refreshing because I have ghosts that display the page properly at times & not at other times!

Thank you all. Please be gentle with your responses as I can already smell smoke coming from my head AND laptop. While I did try to display some humour, I’m really frustrated as I’ve spent more than 60 hrs and feel that the chair I’m sitting on has a slight edge in intelligence.

[ben]

I’ll do my best to help you. Hopefully others will chime in as I have nearly reached the stage of being an octogenarian.

1. You have started a project with NodeJS as the server model. Wappler uses the Express/NodeJS framework to do its magic, hence the extension of .ejs or Express JavaScript. The .ejs page can be compared to pages with a .php extension if you had used PHP as the server model. You can use .html pages, but these will be static - not dynamic - pages.

2. The Express framework, among other things, is a template system. There is a layout page which I prefer to call template. The content of the content page is pulled into the template to show the complete page. Routing is is an important part of this procedure.

3. If you have set the project up properly this will not happen
   

   

4. The layout page is not part of the routing, it is only a template. The content page, combined with the template is what is shown.

5. When using NodeJS with dynamic pages, you must ensure that you have created the template - or layout - page. Content pages need to be hooked up to the template and the routing must be correct. Wappler will do most of the routing for you, there may be an instance, like the home page, that needs to be adjusted manually.

From here, it is a simple matter to have it function as an SPA, have a look at

Building SPA pages with NodeJS

A single page application (SPA) is a web site/app that re-renders its content in response to navigation actions like clicking a link, without reloading the whole page. It consists of main template and different views, which are rendered in the main template. SPA for NodeJS It’s possible to build SPA pages and enable partial refresh thanks to NodeJS templating system. In our example we will show you a simple SPA page, containing of a main layout with navbar and two views, which will be loaded …

[sid]

@KenSab

Is there a clear and concise explanation/guideline of the structure of apps being built by Wappler?
Clarity - When I start a new project in Wappler and create a new page, Wappler loads an .ejs page (I know I can change this & have) but why this page and why isn’t it just a .js or .html for example?

There is different files created for different server models which are kept to the basic minimum required files need to run an app under that server model.
What you are mentioning is NodeJS server app. In the latest version, this default file is no longer created - which is more in line with the docs. You need to create a layout page & then add a content page to that to get the app running a basic “hello world”.
In case you are still seeing the default index.ejs file created, delete that and start fresh as per docs.

@KenSab

is that too much to ask?

Yes. When the IDE supports multiple server models and multiple ways to configure things under that, it is too much to ask.
Refer the SPA doc link shared by Ben to configure NodeJS app as SPA.

@KenSab

Why does the first page always start with the ‘BODY’ in the App Structure and not ‘APP’ until I do this App Connect Local thing?

This is one of the many quirks of Wappler. What’s happenning here is when you add a new layout page, unless you save it, the default frameworks don’t get applied. Again, as Ben has pointed, you can use the project framework settings to setup what frameworks you want by default.
Once file is saved, you should see the APP and other stuff working well.

@KenSab

I couldn’t see it in a browser & got a 404 for my effort

This was funny.
Not sure if this is a Wappler quirk or NodeJS. You cannot “run” a layout page. Only content pages get loaded. So you always HAVE to add two pages even if you want a single pager app.
Else, the other option is to add a HTML page via add button in files list.

@KenSab

What are the proper steps in saving & refreshing

Not entirely sure what you mean by this.
Specifically for NodeJS, every time you save anything, the local Node server restarts itself, deleting all server sessions in this process. So if you have any security/login restricts in place, you might keep getting thrown to login page. Otherwise, I have never experienced any issues with NodeJS app at all regarding output being incorrect.
One other suggestion here would be to keep any eye on unsaved layout pages. Some changes in content page trigger script/link includes in layout page. Such a scenario opens the layout page in a new tab (if not already open) and it needs to be saved manually.

---

From your stuggle, I see you have almost figured out all of these points already. Just got a bit mad in the process. This might continue on as you ride the Wappler learning curve. But once you get the hand of it, its not too bad.

[KenSab]

@ben - Thank you for your explanation regarding the file structure & framework system. It gave me a much better understanding of how Wappler does things.

I looked at ‘Building SPA pages with NodeJS’ and it is a wonderful starter project geared towards a simple website, unfortunately doesn’t fit my needs.

@sid Thank you for your explanation of how Wappler deals with NodeJS & the Server models.

I may be way off in terms of my design but here is what I’m trying to accomplish…

Build an SPA

• Home Page (Layout Page) - holds the Menu System consisting of Top Navbar AND a collapsible Side Menu Bar which doesn’t collapse completely and doesn’t act like Bootstrap’s OffCanvas but more like Google’s Drawer.

• Home Page displays Navbars with different Options based on Login Status. if a User is not logged in. The Home Page redirects them to a Login Page.

• Home Page displays Navbars/Sidebar AND Content page based on User Role of the Logged In User only.

• Should be done in Bootstrap 5 (Although I would’ve preferred to use Material-Ui).

A great example of what I’m trying to do was done by @AdrianoLuiz in his Fleet and logistics control site except he has used a template system (Vuexy I believe).

I think if I can accomplish the above, I can move past my hurdles in Wappler and be able to create many wonderful things! (until the next mountain of course).

Thank you,
Ken

[sid]

Layout page and content page setup as mentioned in docs is perfectly fine for the design you want.
You just need to show hide elements on this layout page’s navigation based on conditions.

As for login, you should create a separate layout and content page.
You can create a content page in the main layout also, but that would mean more conditions on the navbars and stuff.
Its a good practice in my opinion to just keep login page separate.

[dan65h]

I don’t really have any answer to your questions, @KenSab, but just wanted to say you’re not alone.

I too come from a Full Stack development background and have built complex designs, so am very familiar with the concepts of database development. I stumbled across Wappler while looking for a better platform and thought it looked like a great system, (and still think it is) but have been totally frustrated with the lack of good documentation and outdated instructions. Posting questions here on the message board has seldom been very productive for me. Lots of trial and error and figuring it out on my own.

I’m just hoping that the new version 4 is going to be a big improvement and that they’ll improve the documentation too.

Until then, I’m stumbling along…