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.
Related
I'm completely new to using Nextjs and want to learn it by building a project. I also want to use tRPC with it. I was reading the docs on using NextJS and tRPC and I learnt that there is a built in server in the /api under the pages folder. All the endpoints and server functions lives there.
I was wondering if I should be deploying all my server functions inside just the api folder or creating a separate custom Express server. It seems unscalable and weird to put all my server code into one client endpoint. To be clear I just want to do Authentication and CRUD functions but for future bigger projects, where such code would be split into microservices, would that then be deployed on a custom Express server instead?
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 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/
Some years ago I implemented a websocket (Ruby based) on a intranet website to create a one direction message system. Admin types a message and all the clients that are registered on that channel get the message.
It is working well but now that I'm approaching REACTJS I am thinking about replacing the Ruby websocket with a React component.
Starting from an Apache webserver running php and a Ruby websocket in parallel to it what do I have to do to set up an environment running react?
Install Node on Ubuntu?
Install NPM?
What else?
On react side I'm currently learning the basics and I have not approached yet the differences in terms of application beside a compiled app and the dev version. So I expect that also the compiled version will require the same environment as when I am developing. Am I right?
React is solely a front-end/client-side technology, so it has very little to do with the server.
If you develop a React app using something like create-react-app, the development environment they provide allows you to disregard the backend/server-side while you develop. It does this by serving the files on a local webserver.
If you have a server that makes a web socket available, your React component can connect to it and use it.
After development the React code must be transpiled, and all you need is to serve the static files. For example you might end up with a chat.html file that uses styles.css and connect.js, and you'll need a server to respond to requests for those files.
So I would say that if you already have an exposed web socket, you do not need a new production environment on your server.
*If you intend to build a new websocket on Node or if you need to build yourself an additional REST API that's going to require setting up a Node environment on your server*
I have a client/server app running on NodeJS with an AngularJS frontend. I want to use the built in debugging features of Webstorm, but it just won't work.
Imagine following scenario:
I have a webstorm project with a client folder and a server folder. I can start the debuggers for the client and the server, and it works. But both sessions are on different ports. So an AJAX request to the server inside the client doesn't work without using CORS and telling AngularJS to use a different server address.
In the production version the client will be published under the server, but for developing there is no need to do this.
Does anyone know how achieve this? Something like: The system should behave like one server, under one URL.
Or is my approach stupid?
Best regards,
Kersten