Single-page application framework: App Shell [free tutorial]

Switch to ´Responsive´ next to ´UIBilder´

Does somebody may know something here? :relieved:

Unfortunately I know nothing about how to make it native. I saw your other thread and paged Jared to see if he can help.

I’m assuming you’ve read those big threads about native wrappers from BDK and someone else.

2 Likes

Hi Rico,

Thanks for all the videos.
I have trouble to achieve a similar use case.
If we take the example of your video when the page is more than 1240px, how do you make to move the content to the left when you hide the nav bar with the button ?
I can make it move to the left by using the rule hide when <1240 but not when the screen is bigger than 1240.

Normally when it’s bigger than 1240 it should appear automatically thus ‘pushing’ the content block to the right. Could you share a video walk-through of it; maybe I can spot the problem.

These tutorials and Setapp/Paste are pure fire, great job!

2 Likes

Migo, I had a similar problem. I rewatched the video several times and went to video 2 where he starts creating the group and in no time I saw the creation of the dashboard group and like magic on page refresh this group appears. It ended up costing me hours to try to find the problem and I still couldn’t. What I have by default is the index page, group b and group a. When I was placing the parameters for navigation, then the dashboard group appeared and the only place I saw the creation of the dashboard was in the database. Could you share how can you? I will be very grateful!

Hello @rico.trevisan, thank you very much this tutorial!

Maybe a dumb question: is it necessary/recommended to use the built-in index page to create a single-page application or it can be done on a random page?

I worked several months on a classic webapp with several pages and discovered the benefits of single-page app (SPA) recently. I created a specific page to start building a SPA and for the moment I would like to keep all the others pages (for the classic webapp structure with several pages) I have created so far in case I encounter issue with the SPA structure.

I am asking this as index page is a built-in page in Bubble, maybe there are specificities with this page.

Thank you :pray:

You can do this on any page.

The only caveat is that if you’re trying to do with path navigation – a concept I don’t talk about in this video but it’s in my todo list for a future video – you cannot use the index page.

1 Like

Thank you very much @rico.trevisan :pray:

If I understand correctly, doing the Single Page Application on another page than the index page gives even more flexibility in case I want “to do with path navigation”. Is that right?

Also, does “path navigation” refers to this in the Editor?
image

1 Like