I am building a SaaS application using Next JS. I am wishing to take advantage of SSG for SEO on landing pages, pricing etc. However for the actual application I am wishing to use a SPA since its highly interactive and do not wish to use SSR (at least initially) since I have more past experience with SPA (and don't want the server costs to begin).
My desire is to have https://example.com/ (in pages folder) render the SPA (route to SPA/index.tsx which is the default create react app entry point) if the user is logged in.
essentially:
pages/index.tsx
imports...
export default function Home() {
if (isLoggedIn) {
route to SPA
}
return <LandingPage>
}
Example file structure
Pages
index.tsx
_app.tsx
_document.tsx
dashboard
SPA
index.tsx
App.tsx
Any advice or help on how to do this would be great.
Thank you :)
Solution I ended up using was to use a subdomain.
E.g. host the next app with landing pages etc on example.com and then host the react app on app.example.com. Once a user signs in redirect them to app.example.com which still has access to the auth session.
Related
What is the need of showing different URL path in react application, I can display all the react component conditionally on same URL path
What is the need of showing different URL path in react application, I
can display all the react component conditionally on same URL path
While you could render a single React app component that conditionally renders dynamic content without using the URL path, using routing/navigation libraries like react-router allow the app to do this conditional content rendering based on the URL. In other words, instead of using internal conditions to render dynamic content the app is using the URL.
React apps are essentially Single Page Apps (SPAs), meaning when the React app is hosted on a server only the single root index.html file is requested and sent over the wire.
A single-page application (SPA) is a web application or website that
interacts with the user by dynamically rewriting the current web page
with new data from the web server, instead of the default method of a
web browser loading entire new pages. The goal is faster transitions
that make the website feel more like a native app.
Using different URL paths in the browser's address bar is an easy way to let the React app know what "page" the user is really trying to access. If all the user enters is "https://yourDomain.com/app" where the app is hosted, then how would they get to any specific page after the initial page load other than navigating there via the app's navigation? The URL path is what allows direct navigation via a browser, e.g. "https://yourDomain.com/app/login".
If I did understand you right you mean the use of different URLs on the same website for different pages of your website. If thats the case you want to use a libary for routing. I personally like React-Router-Dom, there is great documentation on online pages and Youtube. Just search vor react-router-dom v6.
You can add it like so: npm install react-router-dom
if not, please elaborate your question further
I have a React app which is stored in an AWS CodeCommit repo, and I want to create a holding page for it. Basically, a page called maintenance.html, which I can redirect to when the rest of the site is down for maintenance. I'm not sure how to do this.
I've created maintenance.html and put it in the root folder, but when I go to mysite.com/maintenance it redirects me to mysite.com. I assume this is because React kicks in, doesn't recognise the route, and therefore redirects me.
Is there a way to create a single page in the root of a React application, which the user can navigate to directly?
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.
we have some wrapped up SPA react application, we need to host it inside another react application landing page as well as many other stand alone react applications, what is the best way to achieve such behavior?
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.