When creating a new page in a nodejs project is it .ejs or is it html and where do I save it?

Wappler General
#1

I am working on a project in Wappler beta 5 on nodejs and when I create a new project is creates a index.ejs file and puts it in the Pages /views folder. Considering it creates the index as .ejs, when creating a new page I assume I should be creating an .ejs page, but when I go to save it wants to add it to the /public folder, so what is it: views or public?

Also when creating a .ejs file it appears that the layout does not respond as expected, it appears to ignore css. I have no idea what is going on here and no idea if this is the node.js beta version is so buggy that I am better of just working with html pages and if so where am I supposed to put them assuming that one day node.js will work.

I don’t want to waste my time building in php (not ideal) only to have to rebuild the whole lot in nodejs later.

Perhaps I am just better working on html pages and worry about the .ejs until the issues have been ironed out?

Thanks!

2 Likes
Node.js Integration in Wappler
2021: The Year in Review
#2

In NodeJS all dynamic pages that require server side rendering or includes will be pages with extension ejs

Static pages that don’t have any dynamic data will be just plain HTML and saved in the public folder.

The Pages Manager in Wappler takes care of all this for you. That is why it has a dynamic / static switch so you don’t have to bother with file extensions and locations.

Just use the Page Manager to create and manage your pages.

1 Like
#3

Same goes also for page routes - the Pages Manager automatically creates a route to that pages for you.

So unless you want a very different exotic route than the path of your page you don’t have to go to the routing manager and edit the routes.

It is good to understand though the usage of routes and the difference between dynamic and static pages. So know what is going on.

1 Like
#4

I have the same issue - all the pages created using Node.js on a Docker machine (on local machine) ignores CSS. The pages are correctly in ‘views’ and loads - just does not look right. Any idea why this might be? I am beginning to think it might be a Wappler bug…

#5

It sounds like you have created a ‘content’ page but not assigned a ‘layout’ page.

Node content pages require a complimentary layout page to add all the css, script files and extensions. Choosing ’none’ for the layout doesn’t give you a usable page.

@george,
This is possibly the most common confusion appearing in the forum at the moment. Why not add a blank layout in projects that the none option points to? It would solve a lot of questions.

1 Like
#6

Someone highlighted that yesterday. It is indeed selected on the page as in the screenshot. Is that what you mean?

layoutpage
layoutpage601×640 38.5 KB

#7

As I already explained this to you in another topic: you cannot load the content page directly in the browser.
It should be loaded Inside the layout page in the browser.

1 Like
#8

Teodor, clearly I haven’t got it - and please consider the outside possibility that you are not understanding me either!

I am NOT trying to load a content page in the browser.

Here is my issue, again:

I created a .ejs page called test.ejs, and assigned it a layout page, which has a content page on it. the test.ejs previews correctly in Wappler, but not in the browser.

#9

Your test content page should be loaded in its layout page in your browser.
It doesn’t matter if you assigned a layout page to the content page. It cannot be loaded in the browser directly!

#10

So, the “preview in browser” button on Wappler should not be used while working on a dynamic page while using Node.js? That’s all I am trying to do. I have a page in design mode, I want to view that in the browser. Please can you list the steps to do that?

#11

It should not be used for content pages…

And it’s explained here how to use content pages with layout pages and preview in browser:

#12

But this is not a content page I am talking about. I click the + button whilst in Dynamic tab. I edit that page and add elements to it. How can I preview that page in browser?

#13

I am pretty sure it’s a content page reading your explanation:

Check the tutorial please. It’s explained how to use them.

#14

Screen Recording

#15

What is the content of layouts/main?

#16

That is your content page! You need to load the main page in the browser and load the content page inside it.

#17

Wappler_-_The_Visual_Web_App_Creator
Wappler_-_The_Visual_Web_App_Creator2045×1099 136 KB

#18

How do you do that?

#19
#20

What is the route you have for that page?