I am deploy 3 React applications using S3. I am facing a routing problem which I am explaining through an example.
Lets assume the three applications are
1. A login Portal
2. Driver portal
3. Passenger Portal
The login portal is common for both driver and passenger. Once we login as a driver it will direct to Driver Portal. Similarly for passenger portal too login works.
I am using JWT token based on which I am validating the client side routing using React Router. This works locally fine if I have three dev server each for the apps. I am able to redirect from one server to the other.
For example if I run my login at port 3001 and passenger at 3002, On successful login just redirecting it to 'localhost:3002/passenger/:passengerId'
I am trying to deploy statically by generating three folders.
The three three folders is having routes like
1. "/login"
2. "/passenger"
3. "/driver"
The problem I am facing is I am not able to navigate by using the address bar for nested route. For example if I want to access "/passenger/:passengerId", it throws no page found since it is just a static deployment.
I need a solution where I can Hit directly any nested route. This I guess can be done by providing any kind of fallback if we have a nested route starting with "/passenger/***" to fallback to the index.html inside the passenger folder.
I am not exactly sure how this can be done. Or even if there is a different approach by which I can deploy it would be helpful.
Related
I am utterly confused about which platform configurations to use under Azure AD app's Authentication blade.
There are 2 platform configurations I am confused about:
"Web"
"Single-page application"
The app I have registered is a React JS app, which in my mind, is both a Web app AND a SPA.
This "rabbit hole" get's deeper as I'm trying to configure redirect URIs so i can use MSAL.js to authenticate and authorize within the app.
Essentially, it comes down to this (for my http://localhost:5000 development environment):
If I specify my URI under Web, then I get error:
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
And from what ive been reading, Web platform is the way to go (not SPA).
Can somebody shed any light onto this convoluted area?
Which platform configuration should I be using for a ReactJS app?
Thank you.
• React js is mostly used to develop SPA (single page application) as it is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page. The goal is faster transitions that make the website feel more like a native app.
• When building you react-app, you can see that there is only one App.js from where your entire web-app is loaded in fragments and components. This behaviour of rendering components and pages on a single page and changing the DOM (is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
• So, when you are using react js as a building code platform, I would suggest you use SPA as the platform in Azure AD app registration. That does not mean you cannot use react js to create an app on a remote web server and deploy it, you can but for hosting react js coded application script and running it as a worker process and provide a desirable output you need script execution backend runtime like ‘ngrok’ and ‘node.js’ to supplement the execution and provide compatibility with the web server environment.
Please refer below links for more information: -
Why is React Js called as Single Page Application
https://learn.microsoft.com/en-us/answers/questions/315313/azure-app-registration-causing-the-following-error.html
I made a Dashboard using plotly Dash for my office and this Dashboard should go alongside a Digital report I made using React and plotlyjs.
Here is the structure of the website:
I used this Hackers and Slackers guide to run the dash app on flask server. I also integrated React and Flask successfully and was able to fetch data from flask to react and display it.
Now the issue I am facing is I am unable to access the dashapp at localhost:3000/dashapp. I was able to access the app at localhost:5000/dashapp. How can I make this accessible at localhost:3000/dashapp along with other react pages?
If you have two different applications, they cannot run on the same port. So one should run in 3000, and other in 5000.
However, you can have some apache configuration for redirecting the requests from browser to two different apps using one port. So, based on the configuration, if you do localhost:80/dashapp, this will point to localhost:5000/dashapp. And if you do localhost:80/reactapp, this will point to localhost:80/reactapp.
Refer to this for configuring the apache: https://geekflare.com/multiple-domains-on-one-server-with-apache-nginx/
We have a react app hosted on IIS. We have the following scenario. A shop registers on this site say with a shop name MyShop. Our website will automatically have a landing page called inshopshape.com/MyShop which works fine. Now we want to have shops to have their own domain say for example MyShop.com. Once they go in this URL they should automatically go to inshopshape.com/MyShop WITHOUT changing the address URL on browser. So someone could go to www.myshop.com/products/test and under the hood it should show inshopshape.com/myshop/products/test
Kindly note the following
Website is hosted on IIS
This is a single page app done with react
If the solution provided is one with rewrite rules on IIS then you should keep in mind that react routes should still work when users navigate to the website
I can do a forwarding with masking but that's not good for SEO
Hi I am creating an app which have 3 parts- Admin, Client and User. Admin has all the features, while client has some of the features while client has some. So I thought to have a common code base and will be providing access based on subdomain.
Now I could not find any suitable article across the internet for the same.
Lets say the user clicks the link admin.company.in/login it will open admin login page.
Similarly, client.company.in/login will open client's login page
How can I achieve this and also test it locally?
React has nothing to do with this. You have to build two different react applications and server them client.company.in and admin.company.in respectively. To achieve this you have to deploy the application to the server and server with webserver (eg:nginx).
I have an application which has a landing page developed using AngularJS. The login screen is developed using AngularJS and when the user logs in, the token should be saved in local storage and go to the landing page.In that Landing page there is a button. When I press that button the page should route to a page which is developed using ReactJS which runs on a different server running in a different port .
(Eg. React app in port 3000 and Angular port is 4000)
When the page is redirected to the ReactJS page, that page should be able to access that user token which we previously saved in local storage . Also I want to know the security aspect of saving the token in local storage and is there any other alternatives to do that.
OK.. not sure if this will suffice as an answer, but why do you want it to run on two separate ports? I have worked on such a project and in my case it was like this..
MYAPP/landing - developed in angular
MYAPP/dashboard - developed in react
so, basically I have the React prod build in one of my subdirectories and the Angular prod build in the rootDirectory and had configured in my server config files to handle the requests accordingly(I used apache websever)..