Single Page Application Question

Hey,

I have a single page app that shows and hides groups to “change pages.” However, this puts the whole application under a single url. For this reason, I cannot give a link to a user that takes them straight to a certain page on the app. The URL link only takes a user to the landing page.

Basically, I would like to find a way that I can create a link that can take someone straight to a certain part of the website (like a specific user’s profile page). I would also like to keep my application as a single page application that shows and hides groups instead of redirecting.

Thank you in advance! Any help is much appreciated.

To enable direct linking to specific sections or pages in your single-page application, consider using page parameters or paths instead of custom states for showing and hiding elements. Instead of relying on custom states, set conditions based on “get data from page URL” with your desired “page name.” When users navigate to a different page, use workflows to go to the current page and pass the page name as a path or parameter.

1 Like

example.com is your URL . Group 1 is visible when example.com/group1. Condition will be get data from page url, type path segment as list item#2 is group1. Lets say a button is clicked group1 is visible . Button clicked - go to page (page name) data to send text ‘‘group1’’ .Now lets say you want example.com/group1/group2 . When button is clicked go to page - data to send will be arbitrary text inside you will write ‘‘group1/group2’’ and group2 will be visible by condition > get data from page URL segmented as list , item#3 is group2 . This idea will be further used for dynamic data of different types via slug passing and SEO practices using formatted as text with text conditions.

@intrascopellc The above will not work the way it is described.

It is important to know what Bubble does to your URL when you have your entire app on a single page. If that page is the Index page, when a user navigates to example.com, then land on the Index page of your app, and if you use a url path to alter the URL to something like example.com/group1, Bubble will automatically change that to example.com/index/group1. This is because ALL pages you build in your app you give a page name to, and in Bubble ALL pages that have a page name (except for Index page) your first item in the URL path list is the page name, so if you have a page called Products, your URL might look like example.com/products and in that situation you can use URL paths without Bubble altering the URL, so it can read as example.com/products/group1.

So if you want to put the entire app onto the Index page, you will likely rather use URL parameters instead of paths because if you use URL parameters Bubble will not modify the URL be default, so it might read as Example Domain.

The issue with using URL parameters is an SEO issue, but for an SPA, you will not be able to achieve SEO success anyway, so likely of no real concern there.

Once you go two levels deep on formatted as text for ‘inline’ conditionals for setting the page SEO values, you will likely no longer get the values populated fast enough for Google to pick them up, so SEO strategy will likely fail.

One of the main issues with going more than 2 levels deep is that you are requiring Bubble to evaluate the conditions (both for YES/NO) before it can move the the correct next ‘level’ to determine, and because Bubble no longer allows us to reference URL data in the SEO page inputs, nor, can you reference other elements on the page itself (so a group with a datasource using the URL), it becomes very tricky to get the right values to populate without using a ‘Do a search for’, and since the ‘Do a search for’ requires the server response, once you add in the ‘Do a search for’ on the SEO formatted as text, you will have a system if more than 2 levels deep that is not able to request from the server and get the server response in time for Google to pick it up.

Correct, but I am doubtful on SEO part , 2 levels deep idea is correct , however I push first 2 levels of formatted as text to be the landing page of SPA , and sort according to relevance ,My idea is that bubble keeps record of formatted as text conditionals and when landing captured by google , level 3 ,4 and 5 will be captured

Your idea - not fact.

Of course , of course Boston has whole lot to offer on SEO part , I would listen to him .

1 Like

I don’t know if that is true or not. You may want to reach out to Bubble support to get to know if they are doing that or not…I would assume they are not, since the actual evaluation of those will not take place if a level before has been evaluated as true.

In terms of the question from the chat using option sets…that is fine, but you need a way to know which option value to display, plus that will only be good for what is traditionally a more static type page like a landing page and not for dynamic content like a product page.

This topic was automatically closed after 70 days. New replies are no longer allowed.