Preview not matching browser view, page not formatted correctly?

Hi,

Not sure what’s going on but my preview is not matching the browser view. I have Bootstrap 4 installed and the page type is content.

I also noticed there was no head or body in the code, but this comment was where the head should have been:

Code view:

Browser view:
Screenshot_337

Wappler view:

How do I fix this?

What is this page you are trying to preview? Is it a content/include page? How did you set it up?

First, I started by creating main.ejs, which is a layout page. The only component I added on main.ejs is a brand menu right block. In the code, it also has the normal doctype, html, head, and body tags.

Next, I created register.ejs, which is a content page and the layout is main.ejs. After that, I started adding components to the register.ejs page. Register.ejs does not have the normal doctype, head, body tags, etc.

I noticed, every time I create a new content page with main.ejs as the layout, this is the only code that shows up:

When I create a new content page without a layout, I get the normal doctype, html, head, body layout

Ok that is how it is supposed to be. Can you check your browser console for errors, when you preview the page in the browser?

Screenshot_341

I guess it’s a chrome extension?

You can ignore the source .map warnings. So there are no other errors on the page - even if you reload it?

No, that’s the only error I’m getting in the console

Can you provide a link to your page please?

It’s on localhost right now and I don’t have a website, so I I’ll try connecting it to a domain

Have you tried restarting the server using the restart server button in Wappler bottom bar?

Just tried restarting the server and Wappler, and they didn’t do anything

Does this happen with all your content pages?
Are the routes properly created in the routing panel?

The error occurs with all content pages that are connected to a layout page. Content pages without a layout page work normally and have the html tags.

Not sure if I set up routing properly, I never touched anything there but here’s some screenshots:

Screenshot_343

Ah you are using docker? Have you deployed your site to your docker instance before previewing it in the browser?

Yes, I’m using docker. This green circle means that it was already deployed to docker, right?

Screenshot_344

No, it means the target is active. Click the deploy button please and then preview in the browser.

Hmm, clicking the deploy rocket and refreshing didn’t work

You are probably not doing something right, or something is not properly setup. Close Wappler, restart Docker desktop and restart both. Deploy again and check the results.

Just restarted my computer, wappler, and docker, and it’s still not working. I think it has something to do with the HTML, not showing up, right?