Browser Preview stopped working

[Ebenezer_Amoh]

Hello, everyone. I currently use Bubble and decided to check out Wappler. I started using Wappler two days ago and I’ve been using the uniqueideas.com tutorial which has been very helpful.

Everything was going fine until I got to the Server Connect part of the lesson where I was just clicking around following the lesson. Now, when I click on “Open in Browser”, the pages don’t load and this is what I see:

I haven’t changed anything on the Target side / hosting side so I can’t figure out what the issue is.

When I created a new project, the “Open in Browser” worked fine and I could preview my apps in the browser. However, I would like to figure out how to resolve the issue with the first project where I can no longer preview the app. That way, I don’t get stuck if it repeats itself after I’ve committed so much time and effort in building something on Wappler.

Thank you.

[ben]

Which server model are you using?

[Ebenezer_Amoh]

I’m using NodeJS

[ben]

Apologies for the delay, I haven’t used Docker in ages so I had to reinstall.

Everything works fine. In other words, I have done a few test and cannot replicate the problem. I am using a SQLite database.

Going further, in Project settings go to Targets and test the connection.

[ben]

Also test the database connection:

[Ebenezer_Amoh]

HI Ben,

I really appreciate your assistance in helping me figure this out. This is what I got when I clicked the yellow highlighted part:

So I went into the Target section to test it and got this message that the connection was succesful (I couldn’t locate though the exact screen you have in the second image that shows the “test” option under the red arrow. Maybe it’s because I’m using a default db?):

[Apple]

Just to rule out the obvious, click the Deploy button:

And do you see a green circle like the screenshot above?

[Ebenezer_Amoh]

Yeah. It’s green. I clicked on Deploy but the page isn’t loading still.

The interesting thing is that when I click to view the data in the default db, the data appears in Wappler, suggesting that the connection is active (unless it’s cached). So I suspect there might be something I must have clicked on that isn’t affecting the actual db connection but is preventing the data from displaying in my browser when I attempt to preview. But I may be wrong.

[Ebenezer_Amoh]

Out of curiousity, I just deployed to the AWS server as well and tried running the page from there and got a similar message:

[Apple]

Can you show the web server log of your Development target? You can find in the same bar my screenshot showed. I suspect it’s crashing for some reason

Let us know if you need help finding it. I’m not at the computer right now, that’s why I’m not posting a screenshot

[otavionestares]

How your routes are set? Seems like a route issue!

[Ebenezer_Amoh]

Thank you guys so much for the assistance and engagement thus far. The level of responsiveness and support has been amazing.

@Apple: Here’s the web server log. I see this screen repeated several times when I scroll up. The red line seems to be an issue but I’m not sure how to resolve it:

@otavionestares: When you talk about routes not being set correctly, are you referring to this page below or something else? How do I check that?

[otavionestares]

yes! how is it set? Like this?

[Ebenezer_Amoh]

this is what I have for the page in question. But it’s similar to the other pages. Do you see any issue?:

[Apple]

Per the screenshot it’s not a route issue, it’s a missing Redis module. Can you click a button that says something like install NPM modules? It’s in the same bar you find the green circle, but on the right side

Also try to untick and re-tick the Redis option on your project settings if it doesn’t work

[Ebenezer_Amoh]

I just installed the npm modules by clicking the circled icon, and got this result below. I also checked and unchecked the Redis option in the project settings. However, the browser preview is still not working for this project:

Since it says it cannot find the module ‘connect-redis’, and using the pointers provided so far, I decided to run an internet search of how to use npm to install ‘connect-redis’ and came up with this (I have no idea what it means):

That got me the result below, which I then proceeded to follow the instructions to update:

The highlighted area below is the result I got from running the update:

The browser preview is still not working so let me refresh my laptop in case the updated npm modules need that to happen to take effect.

UPDATE: Just restarted my computer. Problem still exists. I can’t preview tht project in the browser.

[Apple]

Run the same npm install command, but on the Web server terminal (it runs inside the Docker container instead of your computer)

[Ebenezer_Amoh]

is this the web server terminal? I doesn’t seem to respond to me typing.

[Apple]

Yes, that’s one!

It doesn’t seem to respond to typing? Hm… That’s unexpected

Alternatively, you can open your Docker Dashboard (outside Wappler) and manage to find your app’s container, there’s a Terminal button as well you can click and it’ll open a terminal for you

And what version of Wappler are you using?

[Ebenezer_Amoh]

I opened it in Docker Desktop and entered the Terminal from there.

This is the result I got. I’ve also numbered the additional commands I run. However, looks like there a number of warnings and errors: