Routes not working for mobile Bootstrap app

[kfawcett]

Wappler Version : 5.3.3
Operating System : Windows 11
Server Model: node.js
Database Type: sqlite
Hosting Type: local capacitor, but testing in browser at the moment.

Expected behavior

Route should display correct page

Actual behavior

A 404 file not found error occurs

How to reproduce

Untitled: Feb 1, 2023 10:59 AM

Project settings

routes.js

[kfawcett]

Looks like I cannot define a route for the index.html page. Is this expected?

I was able to create content pages and navigate to those using links on the index.html page, but the URL shows index.html . Any way to have that rewritten to / or is this a limitation of the mobile app setup?

Here’s an example:
http://localhost:63441/index.html#!/dashboard

I realize this will not be shown to users because there is no URL shown in mobile/desktop apps, just curious.

[kfawcett]

It also seems the routes only work when you assign them to links on the index page. Trying to use them in page flows do not work.

[franse]

@kfawcett

Here’s an example:
http://localhost:63441/index.html#!/dashboard

Bump, this is expected?

Doesn't occur with Framework7.

[patrick]

You could have a / instead of #!/ on the client, the only problem is that when you refresh the page you will get a 404 error when there is no server-side rewrites. The #! always works and doesn’t require any server-side rewrites.

[franse]

Thanks Patrick, so it’s okay the routing http://localhost:63441/index.html#!/dashboard
I’m asking this beacuse I’m running in some issues with this:

if (window.location.pathname === "/index.html") {
        console.log("true");
    } else {
        console.log("false");

It will always return true because /index.html#!/dashboard === /index.html

Any workaround for this?

EDIT: Found out that setting the value of “window.location.href” navigates to the provided URL but inside a const returns the location.

[patrick]

If you don’t like the hash routing, you can set it to use path with the following:

dmx.routing.router = 'path';

Using path for routing can give some issues when page is getting reloaded and when there is no default document. When you go to http://localhost:63441/ it is possible that you get a 404 instead of the index.html.

When using the hash router window.location.pathname will not work. you can use the following code:

const location = dmx.routing.getUrlInfo();
if (location.path === '/') {
  console.log('true');
} else {
  console.log('false');
}

The object returned from getUrlInfo() has the following properties: path, query and hash.

[franse]

Thanks for all your inputs, means a lot for me.

I think this is a bug, right?
Going back doesn’t reload the content page when it comes to going to main

Another thing (maybe related):

@patrick

When you go to http://localhost:63441/ it is possible that you get a 404 instead of the index.html .

Well, that’s exactly what is happening right now.

1. Scenario 1

• 
• 
• 

2. Scenario 2

• 
• 
• 
  
  Note the last screenshot index.html returns empty.

[patrick]

The warning is because you didn’t have a route defined for /, which is the root route (index.html).

With mobile app different routing than hash will not work since you can’t do rewrites.

[franse]

Thanks Patrick

@patrick

is because you didn’t have a route defined for / ,

Sorry but the scenario 2 has a route defined for / and then all stills failing.

Sorry, maybe I’m not understanding it very well

[patrick]

The / route should not load the ./index.html, the Url points to the content page and is loaded within the dmx-view component. Loading the index.html will result in an infinite loop of loading itself.

[franse]

@patrick

Loading the index.html will result in an infinite loop of loading itself.

You mean loading ./index.html? Because:

@patrick

The warning is because you didn’t have a route defined for / , which is the root route (index.html)

I tried routing the index.html (main page) with Wappler, don’t know why it considers as a content page. Will try manually edit that

[patrick]

Your index.html is your main page. On that page you use the dmx-view component that loads partial pages (content pages). The routes point to the pages that will be loaded into the view component. When you have a route to index.html it will result in an infinite loop. The routes should only point to the partial pages that you want to load in the view component.

[franse]

@patrick

When you have a route to index.html it will result in an infinite loop.

It makes sense. But:
So this is wrong (from the docs) ?

Just followed the tutorial.
But I’ll do it again to see it with more details.

Sorry for bother you and thanks again for your time

[Teodor]

@franse

So this is wrong (from the docs) ?

That’s the documentation about creating Single Page Apps for web apps, not for mobile apps. Routing for mobile apps works differently.

[franse]

Got it Teodor, I tried the both ways, and both are failing (Opened a bug report)

There’s a way I can set / to a main page in mobile?
My page starts on index.html, if I go to about.html,
I cant go to the main page (even with a content page on it)

[Teodor]

As @patrick explained, you can’t link to your main page. You need to link to a content page.

[franse]

Yes! I got that.
But:

1. I open my mobile app with the blank screen (index.html)
2. Go to about.html
3. I cant go back

The reason I need an answer is because I need to close the app if path=main screen=the same as I open the app (index.html)

Don’t want to use browser history, just use the back button to a main page and if not, exit the app.

[Teodor]

Well why not create a “home” page as a content page then and load it?