x

Page URL rewrites

Hi,

How can I add an URL rewrite in my application?

For example:

1) A site admin places my app's element on a page "mysite.com/page" and the page displays the content provided by the element

2) When a visitor interacts with the page/element, the element updates the page URL via the History API, e.g. to "mysite.com/page/subpage" . With no page reload. 

3) If the user reloads the page, Weebly routes the request to the mysite.com/page and my element reads the URL to detect the state. 

It's already possible to do #1 and #2, but can I do the #3? 

Thanks,

1,901 Views
Message 1 of 6
Report
2 Best Answers

Best Answer

Hey @makfruit

Glad to provide a good resource to help.

We don't support custom `.htaccess` files at this time. You can configure 301 and 302 redirects, but I don't think that's what you're asking for here.

I visited the URL you provided and followed your recreation steps, and while there was a FOUC during the reload (from the main URL), the page content did indeed load the correct item as defined by the referring URI. Correct me if I am mistaken, but it appears you are trying to expose deep-linking functionality for published applications, is that correct?

If it is, you could perhaps use a [fragment identifier](https://en.wikipedia.org/wiki/Fragment_identifier) to do the job you are seeking.

I have updated the [Weebly Developer Community Sample App - Rewrite History](https://github.com/bdeanindy/weebly-devcommunity-sample-app-rewrite-history) to version 0.1.2, which includes a new button (that appends a hash to history when a DOM element is selected, and then displays the respective content if that fragment identifier is present when the page is loaded.

I had to create a new page called "shop.html" in Weebly as a container for this, but it worked as expected (and if the fragment identifier is not present on page load, the content in the app is hidden)

PLEASE NOTE: While you CAN do this, it doesn't necessarily mean you SHOULD do this, especially if you're describing the same scenario as the shop page you provided in your previous message. You can just use Weebly eCommerce to accomplish this same goal (and we take care of the deep-linking for you).

Does this help?

View Best Answer >

1,863 Views
Message 4 of 6
Report

Best Answer

Yep, we do use the fragment to address the store pages now. Here is an example of our app in action: https://thewitchspyramid.weebly.com/the-witch-shop.html

While working well, this way is not optimal from SEO standpoint. So we replaced it with pushState+URL rewrites approach on other platforms. I hope we will be able to do the same on Weebly sometime. 

I appreciate your help.

Best,

View Best Answer >

1,856 Views
Message 5 of 6
Report
5 REPLIES 5

Great developer question @makfruit!

To be certain I understand, I'm restating your steps (to clarify if you meant in the Weebly Editor or the published site):

  1. You have developed, submitted for approval, and published an Element App to our App Center
  2. Weebly Customer installs your app to their site (but we're not discussing changing `window.history` in the editor)
  3. Weebly Customer publishes their site containing your app
  4. Visitors to the published site interact with your app which modifies state using the History API
  5. Lastly, if the user refreshes the browser window, the new URL (appended to history) is loaded.

Please correct me if any of the above steps are incorrect. Smiley Happy

To be quite honest with you, I was unsure of the answer to this question.

So, I built this sample Weebly DevCommunity App (which is just an element with a single button that does what you indicated). Feel free to use this to test out what I describe below, and as a starting point for any code discussions about this topic. Please keep in mind, this element does not include any OAuth (to keep things simple).

The answer is "Yes", you can modify history and when the browser reloads, the new URL is loaded. Of course, this can easily create a poor experience for the end-user if that page does not exist because an HTTP 404 will be sent.

1,878 Views
Message 2 of 6
Report

Hey @devsupport , 

Thanks for the quick and detailed response! 

You got everything right. The fact that the new URL returns 404 is exactly the point of my question. What you did in the example (great job btw!) is the parts #1 and #2 from the list I posted above. What I need is the part #3 — rewrite the URL so that it routes to the same page, e.g. 

mysite.com/page/subpage -> mysite.com/page

So, as long as the element JS code is loaded in a browser, I can use whatever browser API I want, including the History API. No problem. But to create server URL rewrite rules, I need either access to the server (for example, to add .htaccess on an Apache server) or some kind of API that allows me to add rewrite rules in the app settings, site settings or some server code. 

Does that make sense? 

Here is an example of how I want it to work: http://ecwid.me/kirby-online-store-demo/shop/ . Try to navigate the demo storefront (click through categories and products), you will see the URL updates with each virtual page change (no page reloads). When you refresh a product or a category page in your browser, you will see the same page again — that's because there are server rewrite rules that direct 'shop/something' to 'shop/'. 

Another example here is twitter.com — it works on the same basis. 

Is it possible with Weebly? Can you consider adding this kind of API or customization tools? 

Thanks,

1,872 Views
Message 3 of 6
Report

Best Answer

Hey @makfruit

Glad to provide a good resource to help.

We don't support custom `.htaccess` files at this time. You can configure 301 and 302 redirects, but I don't think that's what you're asking for here.

I visited the URL you provided and followed your recreation steps, and while there was a FOUC during the reload (from the main URL), the page content did indeed load the correct item as defined by the referring URI. Correct me if I am mistaken, but it appears you are trying to expose deep-linking functionality for published applications, is that correct?

If it is, you could perhaps use a [fragment identifier](https://en.wikipedia.org/wiki/Fragment_identifier) to do the job you are seeking.

I have updated the [Weebly Developer Community Sample App - Rewrite History](https://github.com/bdeanindy/weebly-devcommunity-sample-app-rewrite-history) to version 0.1.2, which includes a new button (that appends a hash to history when a DOM element is selected, and then displays the respective content if that fragment identifier is present when the page is loaded.

I had to create a new page called "shop.html" in Weebly as a container for this, but it worked as expected (and if the fragment identifier is not present on page load, the content in the app is hidden)

PLEASE NOTE: While you CAN do this, it doesn't necessarily mean you SHOULD do this, especially if you're describing the same scenario as the shop page you provided in your previous message. You can just use Weebly eCommerce to accomplish this same goal (and we take care of the deep-linking for you).

Does this help?

1,864 Views
Message 4 of 6
Report

Best Answer

Yep, we do use the fragment to address the store pages now. Here is an example of our app in action: https://thewitchspyramid.weebly.com/the-witch-shop.html

While working well, this way is not optimal from SEO standpoint. So we replaced it with pushState+URL rewrites approach on other platforms. I hope we will be able to do the same on Weebly sometime. 

I appreciate your help.

Best,

1,857 Views
Message 5 of 6
Report

I'm curious if anyone else has some insight on how they've approached this issue and might be willing to contribute their ideas?

Did you have any other specific questions?
1,841 Views
Message 6 of 6
Report