Proxy Script for both development and Production?

[SOSANA]

Hi,

We are using micro-services architecture with different ip address and port number setting for production and development. We are finding that is a real pain to be updating this manually and would like to know if someone has already come up with alternative options regarding this issue already and what where the suggestions on how to add in another proxy script for development and one for production that we could run or allow multiple ip address from one proxy script?

Any help, ideas, or suggestions on this would be great.

Regards,

Zach

[viankakrisna]

CRA builds to a static file for production. Proxying means that we need some 'middlemen' to catch all the request first, then pass it to the backend. It is possible in development because we use webpack dev server. For @SOSANA use case, i think its best to use a production flag, and wrap your choice of http library to change the base url based on the flag.

[gaearon]

I think the answer by @viankakrisna is correct.

Proxy in development is just a productivity feature. It’s useful if you serve the single-page app from your API server in production, but want to use the development server provided by CRA while you work on the app. However proxy is just that: a development feature. It is not meant for production.

In production, CRA produces a static bundle. At this point you can do anything you want with it. The notion of a proxy doesn't make sense there because there is no development server. It is up to you to serve the bundle with any server, and you indeed can tweak the API call URLs depending on process.env.NODE_ENV or a custom environment variable if your API is on a different host or port than the one the bundle is served from. I believe reading custom environment variables is described in the User Guide.

I hope this helps!

[SOSANA]

@viankakrisna @gaearon so how can I allow all or any access wither I am in dev or prod mode?

Right now we get cors errors if proxy script is not set to localhost and port number for dev as we run our api server in dev env mode as well for ex and before pushing to our production env we have to manually update the proxy script.

@viankakrisna your suggestion is to use a production flag, and wrap your choice of http library to change the base url based on the flag. I think I am following you on this. If I make a config file/script that executes our env say in a switch statement for ex if process.env.development is set do this, or if process.env.production do this etc?

[viankakrisna]

Yes, usually i wrap all my api calls in a single service (like an sdk) so i can tweak my base url faster. For your case (micro services with different ports), maybe you can create a reducer like function that wraps your api pathname calls that map to respected base url.

You can add cors support for your services http://enable-cors.org/server.html. If you don't want that, I think the best way is to setup an nginx server that acts as a router (it could also acts as a load balancer + you dont need to manage multiple port on your js file).

[SOSANA]

@viankakrisna that is the plan once the client approves to use nginx in future.

until than what trips me up is "proxy": "http://localhost:8080" if I set it to "proxy": "node envConfig.js" should I expect that the returned results should suffice to allow cors requests from CRA? On my api server I already have the env configs to allow both dev/prod cors for CRA

[viankakrisna]

i dont think you can do that. I mean something like https://gist.github.com/viankakrisna/2b0cdd8f595ebe931d97b298b988d752
you can easily swap out the config for base url

[SOSANA]

Thanks @viankakrisna appreciate your advice and feed back.

[shr33narayan]

Also, Give a try to .env.production .env.development making use of the same variable or global variable depending upon the choices.

[ghost]

FYI You can use proxy_pass when your production server is Nginx.

upstream backend-server {
  server api.example.com;
}

server {
  listen 80;
  server_name example.com;
  root /var/www/build;
  index index.html;

  location /api/ {
    proxy_pass http://backend-server;
  }

  location / {
    try_files $uri /index.html;
  }
}

Now I can fetch('/api/foo') to api.example.com/api/foo.
Hope this helps.