Firebase Hosting does not load page of React app upon refreshing page - firebase

I have hosted a React app on Firebase and navigating via links and buttons works as intended (e.g. clicking the login button results in a route of "myapp.com/login" that shows the correct content). However, only refreshing the base url "myapp.com" yields a correct result. Once I refresh a non-base url such as "myapp.com/login" (not via link / button but via the browser address bar) I get the following error:

Related

Broken styles issue with React-snap

We have created a web app using react native web. We want to add a server-side rendering to our app. We have added a code to render the page server-side, but it's not working, I can see the blank white page in the network preview tab and the server only sends my index.html file as a response.
I found some articles that are suggesting to use prerendering of the app.
To add prerendering to our app I tried react-snap (https://www.npmjs.com/package/react-snap), a snapshot is created but when I started the app it's only loading the first page(landing page) of the app, No events are working on this page(click events) and styles are also missing, there is no way to navigate in the app.
Expectations: The app should be server-side rendered, I should see the snapshot of the page in the network preview, the server should return a snapshot of the page in the response.
Can anyone suggest a solution to fix this?

Android - Firebase Deeplink URL is lost when we call the deeplink URL from another website instead of passing it directly in href tag

We are using hybrid platform - kony for mobile application(android and IOS).
I have configured dynamic links in firebase dynamic links section. When we add the links directly in our email buttons as href tag and if user clicks that link in gmail from mobile browser it's working without any issues in both android and ios. Received dynamic link URL in mobile app and able to navigate user to particular screen based on URL params.
But for tracking purpose(Analytics), on click of that email button we are redirecting the user to our vendor website from there it is getting redirected to firebase dynamic URL. By doing in this way, IOS is working as expected, user is taken to particular screen.
But android has issues. App is opened in normal mode instead of deeplink mode. dynamic link is missing. So we couldn't navigate user to that particular screen.
I have added valid SHA-1 and SHA-256 release keys as well in my firebase project.
I have valid assetlinks.json file for the domain which i created. It's a custom domain with xxx.page.link(below one for reference).
URL which is used in href tag: http://t.XXX.com/click_stats/?ID=xxxx&ContactID=xxxxx&Tracking=98c68752ea4f4af1ab9922178ff608c1&StepId=128262
Firebase Deeplink URL: https://xxx.page.link/frmOffers
So 1st link will be added in email buttons href tags- when user clicks 1st link,we will capture analytics and redirect to 1st link. Android app is opening but not in deeplink mode. Link url params are missing.
Please check and help. If IOS is working why android is not working.
[{"relation":["delegate_permission/common.handle_all_urls"],"target":{"namespace":"android_app","package_name":"com.xxx.xxx","sha256_cert_fingerprints":"xxxx"}}]
you need to write an Kony FFI for this we handled this kind of use case recently and solved via FFI.

Route to /login and /{PageName} in an asp.net app not working

In an ASP.NET Blazor App with Identity I have a page with the page routing
#page "/{PageName}"
When I change the page routing of the login page in Areas/Identity/Pages/Login.cshtml to
#page "/login"
and enter the URL 'localhost:44397/login', the login page shows up as expected.
However, if I follow the link in header bar that I have adapted in LoginDisplay.razor to Log in, the URL changes to 'localhost:44397/login' as expected, but the login page does not appear. Instead, the above page is rendered, where the PageName parameter is set to 'login'.
Endpoint routing obviously works if the URL is entered manually but fails when clicking a link, as if half of the routing middleware would have been bypassed. I tested this with a fresh Blazor template and have no more ideas where to look for the bug.
Accoring to this article, a click on a hyperlink in a Blazor component is intercepted automatically. While the URL in the browser is updated, the request is not sent to the browser but the page is renderd by Blazor. In my case, Blazor can find a suitable page (the one with the #page "/{PageName}" directive) and renders it.
To force loading of the page, NavigationManager can be used:
Login
The href is necessary to render the link with the typical layout. It's probably not the most elegant solution but at least it works.

Vue Router: access page directly from browser address bar

I'm using Vue Router history mode for my Vue.js app. My problem is that, when I try to refresh a page that is not the root page, or enter its URL in the browser address bar, "page not found" 404 is displayed.
Now, in the Vue Router guide they warn about this (see https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), and suggest the solution to "add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in".
With this solution, if I try to access one of my non-root pages (with corresponding URL) through the browser address bar, the root page will be displayed. Is this interpretation correct?
My question: is there a way to achieve the behaviour such that I can access my different pages directly from the browser address bar, and upon refresh stay on the same page?
If you use the aforementioned configuration. Your backend will route all requests to index.html. Then when the Vue-Router is mounted, it will check the URL and provide the corresponding component. The implementation above will work.

Express.js partial: Pressing 'back' in browser

My tech stack: Node.js, express.js, backbone.js.
My web app is a two page app (you can hit two express routes to get fully rendered pages). Let's call them page A and page B. When I load page A and click on a link to load page B and then I press the back button, I only get a partially rendered page A (the part of the page that I can also deliver as an express.js partial with res.partial (not partial() within a template) via XHR).
From what I've debugged so far, pressing back in the browser doesn't hit an express route. When I inspect what Javascript is loaded there are no resources loaded. I was thinking I could do some debugging with the fronend routes (I'm using Backbone.js), but all I see is the partial HTML loaded on page A with no CSS styling and no JS resources.
Any direction on how to debug this issue?

Resources