Electron: Dynamic pages with Bootstrap?

Wappler General Need Help
1

Hi,

Bit of a noob question here, but I want to achieve this with Bootstrap: https://docs.wappler.io/t/creating-dynamic-pages-in-framework7/25504

Is there a tutorial for the bootstrap version of this? There is https://docs.wappler.io/t/applying-dynamic-paging/2865 but it doesn’t seem to be the same thing.

2

Hi @Digo, in short that can be done using Bootstrap.

To understand the difference:

  1. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  2. Framework7 is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS native look and feel.
3

Hi,

Thanks, so I did try this before making this post by using the steps in that guide anyway, but it didn’t seem to work. Clicking on any of the dynamic links will simply show an invalid white page. I also noticed the following error when checking the developer console. I’m running this in Electron, just in case that changes anything.

Here’s the error:

routes.js:1 Uncaught TypeError: Cannot set property 'router' of undefined
at routes.js:1

The routes.js file (which I have not manually modified) :

dmx.routing.router = 'hash';
dmx.routing.routes = [
  {
    "path": "/catagory/:id",
    "url": "./catagory.html",
    "name": "catagory"
  }
]
4

Hi guys,

Is there anyway to transform this into a bug report? I don’t seem to be able to edit the title to something more appropriate anymore.

Just before my trial expired, I done a few tests. It seems redirects work correctly on both mobile and normal websites, but as soon as you create them via Electron you get the error in my above post, and they do not work. I tried this with both the AppConnect and Framework7 redirect types in the project settings. I had also tried this on a few fresh projects just to make sure this was the case.

My trial has now expired, but I plan on purchasing Wappler, so it would be nice to have this fixed seeing as Electron and Routes are what I need to create the project I am attempting to create.

5

Electron uses the file protocol to load the page, single page apps don’t work then. Use a module like electron-serve to get it working.

6

Tried this out just now but couldn’t get it working.

But surely this shouldn’t also happen when Browser is selected as the platform, should it?

7

No, in the browser it should work fine.

8

This certainly seems like a bug then.

Create a desktop project > Select Browser (and/or Electron in my case) > Create Routes > Run.

Produces the same error as when running in Electron, here.

However, creating a blank web project and creating routes works fine, it’s just when using the desktop project type that routes do not work either when using browser or electron as the platform.

9

Still having this issue. Anyone have any ideas?

10

To the routing with electron mobile apps with bootstrap you need to create a Single Page App.

This tutorial explains it best: