Problems with routing on mobile app using Bootstrap 5

[daves88]

Hi Wapplers,

I have setup a fresh new Wappler Mobile project using Capacitor and Bootstrap. I followed directions on Wappler forum and I created a new home page and login page. I am trying to navigate from home to login using routing but it’s not working. Also, I edited the routing for home to just be “/” as per the instructions but thats not defaulting to home page when I launch the app either. In both instances I receive a file not found error: File /Users/david/Desktop/dealcast/www/ not found when I launch http://localhost:50847/ and File /Users/david/Desktop/dealcast/www/login not found when I try click on an anchor button from home page. If I add a .html to then end of login then it works, but that defeats the purpose of routing?

I have found many topics on this but the answers are always the same - follow instructions on the one post which I did but still nothing.

Any ideas?

Thanks

[franse]

Hello!
Are you following this tutorial?

Mobile Apps: Routing with Bootstrap

Intro Thanks to the App Connect Client Side Routing it’s possible to use routing for your mobile apps built with Bootstrap. You just define a single index.html file and load all your content pages inside it. Project Set Up We start with creating a new project. Open the Project Manager and select New Project: [Screenshot_1] We select Mobile - Bootstrap Blank: [Screenshot_2] Enter the project name, select the project folder, set the runtime to Capacitor and click Save: [Screenshot_3] A…

[daves88]

Yup I am

[franse]

Also, the team explain here how it works:

Routes not working for mobile Bootstrap app

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 [image] routes.js [image]

Can you show the routes.js and maybe some code?

[daves88]

My “home” page has this code: `

StickyMobile BootStrap

<div id="preloader">
    <div class="spinner-border color-highlight" role="status"></div>
</div>

<div id="page">

    <div class="header header-fixed header-transparent header-logo-center">
        <a href="index.html" class="header-title color-theme">Sticky Mobile</a>
        <a href="#" data-back-button class="header-icon color-theme header-icon-1"><i class="fas fa-arrow-left"></i></a>
        <a href="#" data-toggle-theme class="header-icon color-theme header-icon-4"><i class="fas fa-lightbulb"></i></a>
    </div>


    <div class="page-content pb-0">

        <div class="card" data-card-height="cover">
            <div class="card-top mt-3 pt-1 text-center">
                <div class="content me-5 ms-5 mb-0">
                    <img class="preload-img img-fluid ps-3 pe-3" width="250" data-src="images/undraw/6.svg">
                    <h1 class="mt-5 mb-0 font-30"> StickyMobile 5.0</h1>
                    <p class="mt-n1 color-highlight font-12">Simply the Best Mobile Webkit on Envato</p>
                    <p class="boxed-text-xl">
                        Powered by Bootstrap 5.x with AJAX Transitions providing full
                        PWA, RTL and Dark Mode integrations!
                    </p>
                </div>
            </div>
            <div class="card-bottom">
                <a href="#" data-back-button class="btn btn-m text-uppercase font-700 mb-2 btn-center-xl bg-highlight">Start Using Sticky</a>
                <a href="#" data-back-button class="btn btn-m text-uppercase font-700 mb-4 btn-center-xl border-highlight color-highlight">Request demo account</a>
                <p class="font-11 line-height-xs boxed-text-xl text-center mb-3">
                    Voted the best Mobile Template by almost 1000 buyers. Sticky is the best choice for your Mobile Website and PWA.
                </p>
            </div>
        </div>

    </div>


</div>

<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

`

[franse]

I see the href index.html

Can you show the properties of that link?
Are you using the open link button? Or the route icon?

[daves88]

I updated that link apologies:

<a data-back-button="" class="btn btn-m text-uppercase font-700 mb-2 btn-center-xl bg-highlight" href="/login">Login</a>

I am using the route icon not the link button.

So when I click that login button it takes me to another page that says “File /Users/david/Desktop/dealcast/www/login not found.”

[franse]

What if you manually change to ./login?

[daves88]

Nope still file not found

[daves88]

The weird thing is if I delete all the code on that page and just have the following:

<!-- Wappler include head-page="index.html" is="dmx-app" id="home" appConnect="local" bootstrap5="local" capacitor="local" components="{dmxBrowser:{}}" -->

<button id="btn1" class="btn" dmx-on:click="browser1.goto('/login',true)">Button</button>

When I click that button to take me to login page it doesn’t do anything. It’s as if the button is not active?

Adding a simple link leads me to the file not found error as well. Thats with nothing else on the page

[daves88]

Extremely frustrating I don’t think routing works at all. Even just having no code with a simple link on content pages and a simple nav on the index page does not work.

[franse]

I’ll try to recreate the issue.
Strange because I was able some days ago when I tested the “push notifications and routing”
Give me some minutes my friend

[Teodor]

Are you sure you enabled the internal option for your links as explained in the docs?

And then, don’t forget to check the Internal option. This will allow the content page to be loaded inside the view component on the main page and not opened as a separate page:

[franse]

@Teodor I was able to replicate the issue:

Index page:

<html>

<head>
	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<meta charset="UTF-8">
	<title>Untitled Document</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<script src="js/routes.js" defer></script>
	<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
	<script src="dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
	<script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
</head>

<body is="dmx-app" id="index">
	<header class="">
		<div class="container">
			<div class="row">
				<div class="col">
					<nav class="navbar navbar-expand-lg  justify-content-end">
						<a class="navbar-brand me-auto" href="#">Navbar</a>
						<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
							<div class="navbar-nav">
								<a class="nav-item nav-link" href="/" internal="true">Home</a>
								<a class="nav-item nav-link" href="/profile" internal="true">Profile</a>
							</div>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</header>

	<div is="dmx-view" id="view1"></div>
	<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Home page:

<!-- Wappler include head-page="index.html" is="dmx-app" id="home" appConnect="local" bootstrap5="local" capacitor="local" -->
<h1>Home</h1>

Profile page

<!-- Wappler include head-page="index.html" is="dmx-app" id="profile" appConnect="local" bootstrap5="local" capacitor="local" -->
<h1>Profile<br></h1>

Routes.js file

[
  {
    "path": "/",
    "url": "./home.html"
  },
  {
    "path": "/profile",
    "url": "./profile.html"
  }
]

According to the docs, I should see the home paragraph when I start the app, and navigate without issues, but that is not happening.

Also found this on console:

2024-04-11 11:04:20.437 13549-13622 Capacitor               com.example.app                      D  Handling local request: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js
2024-04-11 11:04:20.438 13549-13622 com.example.app         com.example.app                      E  Failed to open file '/data/data/com.example.app/code_cache/.overlay/base.apk/assets/public/dmxAppConnect/dmxRouting/dmxRouting.js': No such file or directory
2024-04-11 11:04:20.439 13549-13549 Capacitor/Console       com.example.app                      E  File: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js - Line 7 - Msg: TypeError: Cannot set properties of null (setting 'innerHTML')
2024-04-11 11:04:20.500 13549-13549 Capacitor/Console       com.example.app                      E  File:  - Line 821 - Msg: TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.503 13549-13549 Capacitor               com.example.app                      E  JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot read properties of undefined (reading 'router')","url":"http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js","line":7,"col":6130,"errorObject":"{}"}}
2024-04-11 11:04:20.504 13549-13549 Capacitor/Console       com.example.app                      E  File: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js - Line 7 - Msg: Uncaught TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.504 13549-13549 Capacitor/Console       com.example.app                      E  File:  - Line 821 - Msg: TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.505 13549-13549 Capacitor               com.example.app                      E  JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot read properties of undefined (reading 'router')","url":"http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js","line":7,"col":6130,"errorObject":"{}"}}
2024-04-11 11:04:20.505 13549-13549 Capacitor/Console       com.example.app                      E  File: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js - Line 7 - Msg: Uncaught TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.506 13549-13549 Capacitor/Console       com.example.app                      E  File:  - Line 821 - Msg: TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.506 13549-13549 Capacitor               com.example.app                      E  JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot read properties of undefined (reading 'router')","url":"http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js","line":7,"col":6130,"errorObject":"{}"}}
2024-04-11 11:04:20.506 13549-13549 Capacitor/Console       com.example.app                      E  File: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js - Line 7 - Msg: Uncaught TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.507 13549-13549 Capacitor/Console       com.example.app                      E  File:  - Line 821 - Msg: TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.507 13549-13549 Capacitor               com.example.app                      E  JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot read properties of undefined (reading 'router')","url":"http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js","line":7,"col":6130,"errorObject":"{}"}}
2024-04-11 11:04:20.508 13549-13549 Capacitor/Console       com.example.app                      E  File: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js - Line 7 - Msg: Uncaught TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.508 13549-13549 Capacitor/Console       com.example.app                      E  File:  - Line 821 - Msg: TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.509 13549-13549 Capacitor               com.example.app                      E  JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot read properties of undefined (reading 'router')","url":"http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js","line":7,"col":6130,"errorObject":"{}"}}
2024-04-11 11:04:20.509 13549-13549 Capacitor/Console       com.example.app                      E  File: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js - Line 7 - Msg: Uncaught TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.509 13549-13549 Capacitor/Console       com.example.app                      E  File:  - Line 821 - Msg: TypeError: Cannot read properties of undefined (reading 'router')
2024-04-11 11:04:20.510 13549-13549 Capacitor               com.example.app                      E  JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot read properties of undefined (reading 'router')","url":"http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js","line":7,"col":6130,"errorObject":"{}"}}
2024-04-11 11:04:20.510 13549-13549 Capacitor/Console       com.example.app                      E  File: http://localhost/dmxAppConnect/dmxRouting/dmxRouting.js - Line 7 - Msg: Uncaught TypeError: Cannot read properties of undefined (reading 'router')

ScreenRecorderProject70

[daves88]

Yes still not working

[daves88]

thank you glad it’s not just me. I figured there has to be a bigger underlying problem. Let’s wait and see what they diagnose as the issue

[daves88]

Also, would be good to have dynamic actions such as the Browser “go to” to work with routing as well but that seems to be completely broken.

[franse]

There’s a navigate action under “view”
I think it’s main.navigate or app.main.navigate
I’m not sure exactly how it’s named, and right now I’m unable to test it…
Don’t remember the exact moment but was working on some past time

That also doesn’t work?

[daves88]

Thats okay. Not sure where to find navigate option but yes dynamic events for traversing pages is not working at all. Might all be related to the same issue which hopefully they fix soon