# Single-page application framework: App Shell \[free tutorial\] **URL:** \ **Category:** Tips\ **Created:** [October 23, 2021, 6:43pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108 "2021-10-23T18:43:37Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [October 23, 2021, 6:43pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/1 "2021-10-23T18:43:37Z")
One of my biggest struggles when building an app was how to **organize** the damn thing. Over the years, I’ve scrapped together a single-page application framework that I refer to as **App Shell**. It has worked wonders for my apps and those of my customers. Hopefully it can **help you out**. * * * ### 1. Intro and Key Concepts 2 min [![](https://img.youtube.com/vi/QdzGIdmhxs8/maxresdefault.jpg "1: Intro and key concepts -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=QdzGIdmhxs8) ### 2. Building the Canvas 18 min, a bit ranty, skip if you’re advanced [![](https://img.youtube.com/vi/-E97-W5KkTc/maxresdefault.jpg "2: Building the canvas -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=-E97-W5KkTc) ### 3. Hiding the Nav Bar 2 min [![](https://img.youtube.com/vi/h_TqdhnxJUM/maxresdefault.jpg "3: Hiding the nav bar -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=h_TqdhnxJUM) ### 4. Navigating using option sets 8 min, ⭐⭐⭐ one of my favorite concepts. [![](https://img.youtube.com/vi/zmIXfB1jjRk/maxresdefault.jpg "4: Navigation in single-page apps using options -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=zmIXfB1jjRk) ### 5. Setting the default nav state 3 min, ⭐ shows a benefit of using option sets [![](https://img.youtube.com/vi/8whQng9xoUg/maxresdefault.jpg "5: Setting the default nav state -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=8whQng9xoUg) ### 6. Adding a bit of color 5 min, skip if you’re not into design stuff. [![](https://img.youtube.com/vi/uJKlS5ca61g/maxresdefault.jpg "6: Adding a bit of character to the navigation bar -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=uJKlS5ca61g) ### 7. Adding icons 3 min, ⭐ very handy [![](https://img.youtube.com/vi/eC-CSlMIM7A/maxresdefault.jpg "7. Adding icons to the navigation bar -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=eC-CSlMIM7A) ### 8. Distinguishing by user type 5 min, ⭐⭐ another great use of option sets. [![](https://img.youtube.com/vi/BUGyHCzFIG0/maxresdefault.jpg "8: Different menu items by user type -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=BUGyHCzFIG0) ### 9. Hide nav bar when in mobile 1 min, ok to skip. [![](https://img.youtube.com/vi/PwiWztd-11Q/maxresdefault.jpg "9: Nav bar moves away when in small format -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=PwiWztd-11Q) ### 10. Creating reusables 5 min, ⭐⭐ another key concept. [![](https://img.youtube.com/vi/3A4Dbqw47kk/maxresdefault.jpg "10: Creating the first reusable -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=3A4Dbqw47kk) ### 11. Passing data to reusables 7 min, ⭐⭐ [![](https://img.youtube.com/vi/2i4tpqgxoow/maxresdefault.jpg "11: Passing data to reusables -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=2i4tpqgxoow) ### 12. Left-align the content 7 min, ⭐⭐⭐ [![](https://img.youtube.com/vi/ZOpZQdJy9xI/maxresdefault.jpg "12: left align the content group -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=ZOpZQdJy9xI) ---
**Author:** ![lucas.ar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lucas.ar/32/63393_2.png) [@lucas.ar](https://forum.bubble.io/u/lucas.ar)\ **Post date:** [October 23, 2021, 7:09pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/2 "2021-10-23T19:09:33Z")
This looks like gold! Will feedback tmr! ---
**Author:** ![chris.williamson1996](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/chris.williamson1996/32/70581_2.png) [@chris.williamson1996](https://forum.bubble.io/u/chris.williamson1996)\ **Post date:** [October 23, 2021, 9:27pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/3 "2021-10-23T21:27:28Z")
Love it! Looks great! ---
**Author:** ![eLPDev](https://avatars.discourse-cdn.com/v4/letter/e/f08c70/32.png) [@eLPDev](https://forum.bubble.io/u/eLPDev)\ **Post date:** [October 23, 2021, 9:52pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/4 "2021-10-23T21:52:36Z")
Thanks for sharing, @rico.trevisan! What was that cool color popup that you kept using during the design video? It slid up from the bottom of your screen. ---
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [October 23, 2021, 10:05pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/5 "2021-10-23T22:05:45Z")
It’s [Paste](https://setapp.com/apps/paste). Over the years I’ve copied a bunch of the TailwindCSS colors to it. I get Paste via the app subscription service, Setapp. I cannot recommend it highly enough. (use this [referral link](https://go.setapp.com/invite/af885f1e-d57c-4293-b53a-45bea5bbc71b). and we both get a free month.) ---
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [October 25, 2021, 6:44pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/6 "2021-10-25T18:44:48Z")
Thanks for all the feedback and questions (I got some DMs here and on Twitter). I’m gonna groom my beard, iron some shirts, set up my camera, and embody my inner @gregoryjohn and remake these tutorials. OK, I gotta go buy some beard oil first. ---
**Author:** ![timgarrett111](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/timgarrett111/32/6913_2.png) [@timgarrett111](https://forum.bubble.io/u/timgarrett111)\ **Post date:** [October 29, 2021, 2:48am UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/7 "2021-10-29T02:48:43Z")
Awesome! thank you very much! I’m just wondering how secure it is passing parameters through the url? Fantastic tutorials. 🙏🙏🙏 ---
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [October 29, 2021, 8:33am UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/8 "2021-10-29T08:33:54Z")
That’s a good question. I don’t think so, but I haven’t pushed the edges of this. I’m passing around unique IDs which don’t “leak” much information by themselves. I guess that as long as your privacy settings are properly set up, you should be good. ---
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [October 30, 2021, 1:55pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/9 "2021-10-30T13:55:55Z")
Added a new chapter to left-align the content group. [![](https://img.youtube.com/vi/ZOpZQdJy9xI/maxresdefault.jpg "12: left align the content group -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=ZOpZQdJy9xI) ---
**Author:** ![MattDot](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mattdot/32/81979_2.png) [@MattDot](https://forum.bubble.io/u/MattDot)\ **Post date:** [November 4, 2021, 11:34am UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/10 "2021-11-04T11:34:55Z")
really smart @rico.trevisan keep em coming ---
**Author:** ![mav](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mav](https://forum.bubble.io/u/mav)\ **Post date:** [November 15, 2021, 8:33pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/11 "2021-11-15T20:33:54Z")
Great video. How to see the “dimentions: responsive” change in the top bar of the browser? EDIT: Found it. “F12” the second left phone/tab icon. [![](https://img.youtube.com/vi/-E97-W5KkTc/maxresdefault.jpg "2: Building the canvas -- Bubble.io SPA (single page app) tutorial.") ](https://www.youtube.com/watch?v=-E97-W5KkTc&t=181) ---
**Author:** ![drixxon](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/drixxon/32/90231_2.png) [@drixxon](https://forum.bubble.io/u/drixxon)\ **Post date:** [November 16, 2021, 8:58pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/12 "2021-11-16T20:58:25Z")
You have opened my eyes and completely changed the course of my startup! From the bottom of my heart, I would like to thank you. I started transitioning my app into a single page via the use of conditionals which was messy & flawed. 20 different “don’t show when” conditionals per every group page is just bad programming, though, I didn’t know any other ways to accomplish it. Using options sets & parameters has made eveything 100x easier and faster. It’s even inspired me to do a complete UI overhaul now that the entire app is on a single page, and I can have these elements talking to each other. 🙂 I started Bubble last year in HS, and this is the most excited I’ve ever been. Good design finally meets good performance!!! Seriously I might name my firstborn after you bro. ---
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [November 17, 2021, 4:58am UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/13 "2021-11-17T04:58:04Z")
Wow, thank you! I’m honored. That newborn will have a place to stay anytime he/she swings by Belgium! ---
**Author:** ![mav](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mav](https://forum.bubble.io/u/mav)\ **Post date:** [November 20, 2021, 5:47pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/14 "2021-11-20T17:47:18Z")
Hi Rico, Wonderful tutorial. I have a small problem. I think the problem is in two places. 1. The video in the second tutorial is blurry so maybe I’m missing something there. 2. I’ve used an open/close in one menu image (yes/no) instead of two links, and I think that’s causing the problem. I’ve tried to make the \_nav options go from group content to another and it’s not working. I don’t get the automatic options you get in the tutorial like in **[here](https://youtu.be/zmIXfB1jjRk?list=PLGIPNPvC76kfpYQzUhyBqRQw7XH_VUqBI&t=327)**. Do you know what I’m doing wrong? ---
**Author:** ![mav](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mav](https://forum.bubble.io/u/mav)\ **Post date:** [November 23, 2021, 5:47pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/15 "2021-11-23T17:47:36Z")
Fixed it somehow. Some groups were seen and some were not. I think the problem was with the layout visibility. Made all groups hidden. ---
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [November 23, 2021, 6:54pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/16 "2021-11-23T18:54:31Z")
I’ve gotta make some space for a refactoring of that video - you’re not the only to mention it. Also, I need to “port it” to the new engine. ---
**Author:** ![mav](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mav](https://forum.bubble.io/u/mav)\ **Post date:** [November 24, 2021, 9:36am UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/17 "2021-11-24T09:36:43Z")
Cool. For some reason it now shows me one issue “Go to page index must be the last action in the workflow”. When I move it to the end, it won’t show me the moves of the groups when I click on the nav options. I’ve made the menu close automatically when clicking on the options in the nav, I don’t know if that made the problem or not. If I delete the “go to page index” it won’t show moves of the groups. What’s wrong? ---
**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\ **Post date:** [November 26, 2021, 9:52am UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/18 "2021-11-26T09:52:09Z")
I found it more efficient to close the menu on the page load instead. ![CleanShot 2021-11-26 at 10.51.44](https://us1.discourse-cdn.com/bubble/original/3X/9/c/9c30e2de3d2d9e6830732e7ccd9696a68eec0772.jpeg) ---
**Author:** ![privatesoap59](https://avatars.discourse-cdn.com/v4/letter/p/e56c9b/32.png) [@privatesoap59](https://forum.bubble.io/u/privatesoap59)\ **Post date:** [March 4, 2022, 3:29am UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/19 "2022-03-04T03:29:07Z")
Hi, Im a total beginner in Bubble. Can you please share how do you create the preview page as shown in your videos? As in it allows you to drag and resize the screen to test out different screen resolution. ---
**Author:** ![robin\_rob96](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@robin\_rob96](https://forum.bubble.io/u/robin_rob96)\ **Post date:** [March 8, 2022, 5:04pm UTC](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108/20 "2022-03-08T17:04:41Z")
Hi, I’ve used your videos to switch from a MultiPageApp to a SPA with the tricks showed. Now I realised, that if i want to have a native App, I can’t use `Go to page: index` (With additional page parameters of course). So, what is the best way? Don’t using page parameters at all and using only states for managing current visible group/ reusable component? (You might have additional tipps for going full native support) Thx [Next page](https://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108.md?page=2)