Spa bug

Wappler General Bugs
#1

Hey people.
I think something’s wrong when I create a single-page app on Wappler 6.0.2 stable.

By:
Url rewriting with wappler
Creating Single Page Apps (SPA)

<!doctype html>
<html>

<head>
    <meta name="ac:route" content="/">
    <meta name="ac:base" content="/borrarbootstrap1/www">
    <base href="/borrarbootstrap1/www/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.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 active" href="./" internal="true">Home</a>
                                <a class="nav-item nav-link" href="./about1" internal="true">About</a>
                                <a class="nav-item nav-link" href="./about2" internal="true">Contact</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <div is="dmx-view" id="view1">

    </div>
    <div is="dmx-route" path="/" url="_home.php" id="home"></div>
    <div is="dmx-route" path="/about1" url="_about1.php" id="about1"></div>

    <div is="dmx-route" path="/about2" url="_about2.php" id="about2"></div>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

ScreenRecorderProject32

Btw those console lines are supposed to be there?

I’ve done this already and I know I’m missing something, but I can’t find the problem

Thanks in advance everybody

#2

And I’m with:

/*!
 App Connect
 Version: 1.14.12
 (c) 2023 Wappler.io
 @build 2023-03-14 12:22:18
 */

/*!
 DMXzone App Connect Routing
 Version: 2.0.3
 (c) 2021 DMXzone.com
 @build 2021-09-06 11:50:18
 */

Updating to App connect 2.0.0-beta.18 and routing 3.0.0-beta.4:

image
image1050×780 62.6 KB

#3
#4

The errors with App Connect 2 it looks like it didn’t load the dmxRouting.js file, could you check if it is loaded in the network tab.

Perhaps you could also inspect dmx.routing in the console, it should be an object having the routing properties and methods.

The links like ./about2, were they created by Wappler? This is an old way of defining route links, the links should become like /about2 without the dot at the start.

#5

Yes.
I’ll inspect later since I’m not at home right now.
But the method I’m using should not be working as I’m using ac1 and an old routing.js?
That’s what I found strange

#6

You’re right.

No errors on console now.

But dmxRouting 3.0.0-beta.4 doesn’t work, keeps empty screen. Reverting to 2.0.3 and works fine