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/
Related
I am trying to tie my react app to firebase,
I understand the general idea behind but the it seems like there are few different binding
options depending on how much you want get into functionality of firebase.
0.0 basically without registering a firebase app in the project to my react app and using any service lets say from authentication or database. Ive been able to use make POST and GET request as well as sign up and in users without regiestering an app from firebase website.
just have to use the end points given by the service you wish to use.
1.0 I guess this is the more proper way which registering a firebase app to my react app
either by using npm or script/cdn. I am new to firebase so i did not know that i had to do this.
2.0 basically the same step as 1.0 but also initializing/configuring firebase app(?) with Firebase CLI which creates things like
A firebase.json configuration file that lists your project configuration.
A .firebaserc file that stores your project aliases.
this is now where i get confused as to how to go about combiniing with my react app.
for example, locally, react app is running on port 3000 but when i use CLI's firebase emulators: start script, what will happen to my react app which is running on 3000.
How do you guys set this up correctly? i guess it depend on how much backend i want to use but what i need firebase for mostly is to use authentication and database...
I’m trying to deploy a basic react app to Azure app services, but I cannot get it to work.
The app itself is the initial app created following npx create react app my-app command. I want to get this one working first before trying to deploy my actual react app.
The Azure App Service is a Linux setup, using node 16.
I’ve added “pm2 serve /home/site/wwwroot --no-daemon” as the startup command. I’ve also added PORT 3000 and WEBSITE_PORT 3000 in app settings.
Lastly I’ve added a web.config file to the react app itself.
Nothing I do seems to work though as it is not loading at all. I just get ‘application error’ if I try to open the app.
The only two errors i can see in the logs are:
“…didn't respond to HTTP pings on port: 3000” and “… did not start within expected time limit”
My deployment is set as continuous via git hub, though as this is building without an issue I think the problem must be something in the Azure App Service settings but I’m lost as to what.
Does anyone have any ideas to fix this?
It could be that there is no access to port 3000 in the app service.
It depends on how you have set it up what needs to be fixed. It could be the network settings on the app service. If your app service is on a VNET then it could be the settings on the VNET that need to be updated.
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
Let's say I have a React app and want to connect locally to my local Tomcat server (for ultimately consuming REST endpoints from my React app). I have 2 questions;
Is there a standard local workspace setup recommended by React to point to our localhost running backend services?
Is there an easy/configurable setup, where I have both options e.g. switch from connecting to actual backend service TO say using mock
endpoint responses on my local i.e. by a simple config change ?
Note: I am trying to avoid hardcoding any absolute URLs on my client-side i.e. In my client side code, I would just have the endpoint defined as "mycontext/my/endpoint" and say if my React app is running on say http://localhost, then it should automatically construct the full endpoint as http://localhost/mycontext/my/endpoint
You can define environment variables, which could include the address of the API server you'd like to use. Then you would simply change that variable any time you wish to hit a different API server (be it localhost or remote).
If you are using Create React App to bootstrap your setup, you can also use the proxy setting in your package.json.
I'm coming into an existing application where a single React application exists that calls multiple APIs. The APIs are written in .NET Core and I've been instructed they are typically hosted with IIS Express when debugging locally.
Where I'm running into trouble is understanding how the React application will hit the backend API projects, when the API projects are running on multiple IIS Express instances that don't have static ports.
For instance, I'll hit "run" on the React project which launches the React application along with a controller that might be running on localhost:5888. I can easily hit the controller from the React application using window.host + /Controller/ which will handle resolving the port for me. However, if I "run" another API, from a separate Visual Studio instance, it'll get hosted on a random port, something like localhost:5889. If I try to hit that API with window.host + /SecondAPIMethod/ from the React application, it'll come up with a 404 error, because the React app doesn't know what port the IIS express instance with the second API is running on.
I've been told by coworkers that Swagger is the key to managing this, but I'm unsure how.
It is not running on any random port. Port number is specified in the project properties. When you are debugging in visual studio, you can set the port number by going to project properties -> debug -> App URL.
When you deploy the web api on IIS Server, it will run on the port you have specified when configuring the web api.
Now when you know the web api (with port number) in advance, you can hard-code the url or put it in app settings file of your react app. Hope this helps.