Set base path for all the images in by react app - javascript

I am basically building a MERNy app and I want to fetch images saved on my back-end server and show it on the front-end.
My question is, how can I set the base path of my server for all the images that I fetch on my website like I can set Axios baseUrl. Because right now I add this to my src tag: http://localhost:5000/images/myImage.jpeg. How can I make it so that I add only /images/myImage.jpg and let it fetch from the server? Because whenever I deploy my back-end server I will have to change all the occurrences of localhost with my domain.

You can use a Reverse Proxy to abstract the image path. This way you can have three servers running behind a single domain.
Express - is the API server for all your Ajax request. When a request is sent into MyDomain.com/api it will be redirected internally to API_SERVER_INTERNAL_HOST:3000/
Web Server (Images) - it another Web Server that serves static files but its files will be the images the user uploaded. When a request is sent into MyDomain.com/images it will be redirected internally to API_SERVER_INTERNAL_HOST:3001/
Web Server (React) - is a Web Server that serves static files (HTML, CSS, js, fonts, images, etc..) that build your app.
/api :3000 +---------------------+
+---------------->+ Express |
| +---------------------+
|
MyDomain.com +---------------+ | / :8080 +---------------------+
+-----------------+ Proxy (Nginx) +------------------->+ Web Server (React) |
+---------------+ | +---------------------+
|
| /images :3001 +---------------------+
+---------------->+ Web Server (Images)|
+---------------------+
This setup is varied flexible and if in the future you will like to use 3rd party Web Server for hosting images you can just change the proxy config.
See the following for getting started with Nginx reverse proxy setup: https://www.nginx.com/blog/deploying-nginx-plus-as-an-api-gateway-part-1/
In addition:
you can use MinIO as the Images Web Server. MinIO uses the same interface as S3 and is really nice if you need to manage a Static files Web Server (the express app will use the MiniIO API to upload the user image to the Web Server)

Related

Bokeh: change the endpoints for /static

Is there a way to change the endpoint that static JS files get served up from in Bokeh?
I have a number of bokeh dashboards that are accessed from behind a load balancer
Any request to https://myloadbalancer/{dashboard_name} is sent to the load balancer
The loadbalancer then routes the requests to the correct dashboard server based on the value of /{dashboard_name}
For any given dashboard, bokeh then attempts to access static javascript via https://myloadbalancer/static
For this to work, I need to create a new bokeh server just to serve up static files and then configure the loadbalancer to route requests to https://myloadbalancer/static to the new server
This approach is fine, until you start getting different javascript dependencies in the different dashboards
Does anyone know of a way to change the /static path of a bokeh dashboard. So that for example it reads static files from https://myloadbalancer/{dashboard_name}/static?
You can run your bokeh serve command with the option --prefix <base_path>. This will put <base_path> behind every resource requested to the Bokeh (Torando) web server, this applies also for /static resources.
Here you can find the official Bokeh documentation page.
Kind regards

Fetch JSON from same Server (localhost) but different Virtual Host

I'm having quite a basic issue I suppose. I've set up CraftCMS to be reachable via Apache Virtual Host http://craftapi and am using Element API with routes such as http://craftapi/projects?page=1 etc.
On a separate Virtual Host http://mysite I've set up a react-static install which should fetch the JSON using Axios from http://craftapi/projects?page=1 but it throws after Importing routes from directory... with:
Error: socket hang up
Am I not allowed to fetch from a different domain? Even if it is hosted on the same server?
Thanks

IISnode application info

I have a Project which I want to access from multiple IIS applications, each hosted at a different port.
Lets say, we have the following folder structure:
MyProject
Application 1 (has its server.js file and web.config)
and I have these applications in my IIS:
Website 1: hosted at http://localhost:8080 has an application
App - points to Application1 above - http://localhost:8080/App
Website 2: hosted at http://localhost:8082 has an application -
SomeOtherApp - points to Application1 above - http://localhost:8082/SomeOtherApp
How do I get the IIS Application host info in the server.js file, just like I can get the port info by using process.env.PORT?
I need the application name info ( /App or /SomeOtherApp ) and the host info (localhost:8080 or localhost:8082) in the server.js file before i start the app.
I know that we can get app this info from req.headers once the app starts, but i need it before the app starts. And since the web.config is also common to both applications I cannot set these there.
Can we get this information from IISnode?? If not, is there some other platform which can give me this information in the server.js file?
Thanks.

SSL With node / IIS

My current setup with the company i've joined is IIS is being used as our main web server, using a CA signed certificate. I've got access to the certificate.pdx aswell as the private key.
I've setup a https node API server to handle some real time stuff / act as a simple additional middle layer, but my website is being served through IIS. The flow of the application is something like this.
1) Visit web page where IIS will then serve it
2) Click on a button, which then makes a GET request to my node server
IIS NODE
E.g 100.10.10.10:3000/mypage > Click Button > 100.10.10.10:4000/myGetRequest
At the minute i'm just using self signed in my development environment, and manually accepting the certificates.
My question is can I just use the same certificate that IIS is using on my node HTTPS server, or do I need a different one?
It would be best if the IIS could proxy the requests to your Node app. That way your Node app wouldn't even need a certificate (if it's on localhost). See this answer for more details:
Configuring HTTPS for Express and Nginx
It uses the example of nginx but you should be able to proxy the requests with IIS as well. See this tutorial:
Setup IIS with URL Rewrite as a reverse proxy for real world apps

A Local Server Configuration for Single Page Applications

I am looking for a local server configuration that will correctly serve single page applications that utilize push state. This server configuration needs to serve the single page(index.html) for all configured routes but serve assets based on url requested. The Backbone router in the single page will handle customization based on the url.
url: /
serves: /index.html
url: /any/configured/path
serves: /index.html
You can use any server but I prefer one for development work that has a simple setup/install such as:
Python's SimpleHttpServer
connect (npm package)

Categories