I’m interested in making a mobile app from a multi-page app that I currently have. The trickiest part seems to be duplicating the workflows on multiple pages to a single page.
What recommendations are there for doing this without having to recreate each workflow individually? Or is this just not possible?
Has anyone converted a multi-page app to a single page app? Can you share your experiences with that process?
Bubble lets you copy & paste things but it breaks all of the references and when you start rebuilding the expressions they’ll almost always disappear and force you to start from scratch.
In case it helps in the future, when you build an app always use extra elements or custom states as “unnecessary” intermediate steps. Like, if you have a search, don’t just reference the input directly. Instead, reference a hidden input with its initial contents set to the visible input. That way if you have to change something you can leave the invisible input alone so none of the expressions referencing it will break.
Some tips that will help rebuild the app:
Clone the app and try rebuilding parts of the app in the clone to see how that works. If it seems doable, you can do it in the original app, or just leave the original app alone and work in the clone. If you want to migrate your domain to the cloned app you can. I’ve done that for a client over 3 or 4 versions.
Open the app in multiple tabs. You can be in the editor in multiple places by having different tabs open. That’s particularly helpful when you need to rebuild expressions because you can be looking at the original expression in a different tab.
When you put everything onto one page you can either make a thick stack of overlapping groups or a long string of non-overlapping groups. Having work with both I think I like the long string of non-overlapping groups better, but neither is ideal.
When you convert to single-page you have to actively manage the user’s navigation because the browser’s Back button will take them away from the app entirely. You also want them to come back to a sensible place in the app if they reload it, not just back at the beginning of the app. So you need to build database fields to track the user’s current status in the app and have the app respond to that status, rather than respond directly to user actions.
You’ll have a problem with filling the screen on mobile. Bubble does width just fine but it sucks at height. There’s a post somewhere in the forum about an html element hack to force the height of a group to update and keep the app from being too short or too long, but I don’t remember where it is and never actually tried it myself.
This was comprehensive and helpful. My biggest problem is that I was inconsistent from page to page on how I organized similar features. It was much faster to just rebuild from scratch, unfortunately
You can try to convert some of your pages to reusable groups. Depends on the structure of your app whether that works or not.
But one of the challenges of having everything on a single page is to keep an overview, and the reusable groups can be a big help here. It will allow you to create decoupled components. Only issue is that you cannot access elements inside a reusable group, so it has to be pretty self contained.
