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.
Related
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/
To begin with - let us suppose we have a React application. We want to build it and deploy to 3 environments - dev, test and production. As every front-end app it needs to call some APIs. API addresses will vary between the environments. So they should be stored as environment variables.
As every modern, progressive developer we want to use containers. In particular Kubernetes.
We want to build our web application and deploy it on K8S cluster. The container image should be built and kind of sealed for changes, then before deployment to each particular environment the variables should be injected.
But it seems there's one great impossibility here. When it comes to .NET apps for example, when we have .dll compiled, it reads a config file in the runtime. It's not a case with React. After we generate build we have just static files. The variables are changed to static values in the process of building React app. It seems there's no way to update it after that point - or is it?
The way you are trying to solve your problem is not correct.
You don't need to know anything about the addresses of the backend services in your react app. Only the frontend server/gateway that is serving your react app needs to know about the backend services. Any request from the react app should be proxied via the gateway.
See API gateway pattern - https://microservices.io/patterns/apigateway.html
You can use config map to store the API endpoint address and refer it as environment variable in the pod.
If you want to change some values while the pod is running you can mount the config map and any change to it will be synced in the pod
So I have an application that will have many different microservices that will each run on their own server. For the frontend, there will be a react server that will hopefully be able to make http requests to all of these different microservices.
My question is how do I configure the urls in order to route them to the different servers? Say the react server is running on localhost:5000 and my microservice is flask and is running on localhost:3000. Currently I'm using axios to make a put request, but everytime it is sending the request to localhost:5000.
Thanks!
You have probably just used a relative url like
/mymicroservice/api
So Axios assuming it's also on
localhost:5000
You will need to use absolute URLs for your requests. You should put together a table of URL's that you are going to use, and use a different set when you get to other environments (such as production)
I have a ReactJS project with its own Dockerfile, exposing port 3000:3000.
I also have a PHP project with its own Dockerfile, exposing port 80:80. The PHP app also has containers for MySQL, Redis and Nginx
For the PHP app, I have a docker-compose file that creates a network (my-net) for PHP, Nginx, MySQL and Redis to communicate on. However, I now want the ReactJS (which is in a separate project) to be able to communicate with the PHP app.
I added a docker-compose file to the React project, and added it to the network from the PHP project my-net and declared it as external so that it doesn't try to create it.
This seems to work: From the ReactJS container, I can ping app (the name of my backend service) and it works properly. However, from the ReactJS code, if I use something like axios to try and hit the backend API, it can't resolve app or http://app or any variation. It can however access the underlying IP address if I substitute that into in axios.
So there seems to be some issue with the hostname resolution, and presumably this is on the axios / JavaScript end. is there something I'm missing or a reason this isn't working?
When the JavaScript runs in a browser (outside of Docker) you can not use app because that is only available inside the Docker network (via the embedded DNS server).
To access your PHP server from outside use localhost and the exposed port (80) instead.
I am currently working on an Angular website that communicates with a RESTful API running on node.js that I built only for this app. They are two separate projects that runs on different ports.
While developing, I make the Angular app communicating with the local API. In production, the path to the API will be the IP address of the server. This is not a lot of work but I then need to change the address every time I want to deploy to production.
So here is some questions (sorry if this is a duplicate, I couldn't find it) :
Is it possible to create a two-sided variable (in grunt, in angular) in order to use some address (localhost) for development and another address for production ?
Maybe I got it all wrong and I should merge the API with the app ? I would have one big web server running on the same port and I could use relative paths and get rid of hostnames. How can I do to merge the express routes for the API with the angular routes ?
Thank you !