I am pretty new to React and front end world.So ignore mistakes.
So i am using auth0 for authentication in my react app. Login button is a component which redirecta to auth0 authentication button and upon login user can go to /profile component. Using react router for going to profile component.
All this works perfectly in localhost.
But the moment i deployed on s3 and cloudfront. it shows profile key not found so based on various solution (https://stackoverflow.com/a/58978355/13126651)on stack now add i can see my go to profile component however the page is entirely blank nothing is being render on profile component.
UPDATE :- the error is definitely related to cloudfront, because if i directly access my s3 bucket website endpoint,it renders everything works.
I solved it by add error response 403 404 for cloud front.
Related
I have made a back button for my isomorphic react application and am accessing the current URL of the page to check if my user is coming from the inside my application entry point or directly entering the URL for the subpage of my application into the browser. The thing is that if someone has hit my subpage URL directly then I redirect them to a default page otherwise I allow goBack functionality provided by withRouter HOC from React.
my code to handle Back button functionality looks like this
if(this.props.location===reactReferer.referer()){
this.props.history.push('/about')
else { this.props.history.goBack(); }}
what am I doing wrong as this doesn't seem to be working? I imported the following package and npm installed it 'react-referer'
In my app I have react-router, redux and redux-first-history all working nicely. Certain routes in certain circumstances must navigate the user to another website e.g. for authentication with SAML. As React Router doesn't have a way to navigate to external sites I have to resort to manipulating the location.href.
An example route test would be:
User lands on a login page (Route handled by RR6)
User enters email address which is checked via an API
Server responds that this user is set up for password login (4) or SAML (5)
Password login - browser shows password box
SAML login - browser navigates to SAML IdP (Handled by manipulating location)
When running tests I get errors from jsdom which is expected:
Error: Not implemented: navigation (except hash changes)
The problem is if I patch the location object in order to test as suggested by many then this breaks React Router navigation.
What is the best way to either handle external navigation or patch things correctly so that my tests work?
Just add another forward slash to the url.
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
navigate("//google.com");
so I've got a React app being served by Nginx and it uses an API server backend to which the NGINX server forwards requests, which is consumed by the React App. The react app uses the React Router package for routing.
Most of the react app is pretty simple, when you go to a specific page, it mounts a React Component which fetches some data from the API Server, and then updates itself to display that data. In doing so, it also updates the Document Title and other metadata related to the data that was fetched.
The react app is just a basic Create-React-App scaffolded application and the NGINX config is just pointing and the default index.html (which in turn loads the javascript chunks etc, standard React infrastructure).
I have a problem now where the app generally works well but if you copy a link from the app and paste it to someone, it will always show the base title of the application, and indeed if you preview the HTML source of any page on the webapp, it will always show the base title.
Here is an example (although SO doesn't do metadata link previews afaik):
https://bugwalker.io/bugs/92
My guess is that the requests that fetch metadata for a link, or fetch source page, don't have Javascript enabled and as a result it never mounts the react components and never gets to update the title etc.
Is there a way to fetch the metadata to populate the title and other metadata even when javascript is disabled? Or is there something else going on that I am completely missing?
Thanks in advance!
For this you need react helmet: https://github.com/nfl/react-helmet. On each page of your React application you should specify the title like so:
<Helmet>
<title>Some Page</title>
</Helmet>
I am serving a production build index.html of react from an Express server. The react app uses react router for navigating. When using react router, there is a problem that when refreshing the page, it can not get the data anymore because it is sending GET request to http://example.com/abc and that URL is not handled in express. So I found the solution by handling every get request: app.get('*') to redirect back to the home page so the page can get all the resources it need. However, I have other end points in express that can send data to the front-end and if I redirect all GET request that end points does not work anymore. How should I solve this ?
So I found the answer by moving the app.get('*') below any other GET end points
I have multiple apps running in the same domain in Azure.
I added react project last week.
We have back office app separately running built using asp.net MVC.
we have react project now. When I load the react in the browser it works correctly.
let's say xxx.azurewesites.net/ will load react by default and xx.azurewebsites.net/backoffice/login.axpx will load another app.
If I type the URL to access the back office app the problem comes in, now react scripts in the browser cache picks up the URL and try to match with react router and loads no route match page. I'm unable to load the back-office app anymore if I hard reload the page it loads the BO App now. how can we handle this problem I want to access the BO App even the react is loaded in the browser. How to prevent the react from getting the URL. I want to skip react router and send the request to the server so that server will send the BO App page.