[Solved]-How to inject port and host using ENV variable in Create React App Proxy settings?-Reactjs

you can define env variable for port and host. react_app_port: "port of application", react_app_host: "host of application"

to inject all the env to your application you can use webpack define plugin.

you need to add in plugins section like.

const env = require("path to your env file")
//other webpack settings
plugins: {
//plugins
new webpack.defineplugin(env)
}

now if you see the code of create-react-app it looks in env variable first to find the port and host.

also, note that

you must create custom environment variables beginning with react_app_. any other variables except node_env will be ignored to avoid accidentally exposing a private key on the machine that could have the same name

is it possible to set proxy settings in cra differently than with package.json?

no. it is not possible. well, at least not yet (2017/01/14).

the react proxy functionality is getting a bit complicated and as a result, the idea of setting up a proxy in a react app from env variables will be implemented as soon the simplification of the "advanced" proxy configuration is finished.

is this sentence about proxy or dev server itself?

it is about the dev server itself. all proxy configuration, as things stand, is configured in package file.

regarding:

use environment variables to inject the right server host and port into your app.

this refers to neither the proxy server nor the dev server. this is a recommendation on how to handle per-environment server settings if proxy does not provide enough flexibility for you (i.e. if you need to use protocols other than http, https, or ws). for example, if you have an api call within your code, you can use an environment variable to do something like this:

axios(process.env.react_app_base_url + endpoint, options).then(data=>{ console.dir(data); })

where each environment has it's own definition of react_app_base_url.

without package.json:

it is not possible to influence proxy settings without modifying package.json.

see configuring the proxy manually (cra docs)

package.json is the only documented way to influence proxy settings.

you can also see line 96 of cra's start.js. this implementation leaves absolutely no ability to use env vars to inject the host/port to cra's proxy settings.

this is really one of the reasons i detest cra, to be honest. all of this behavior is so very easily handled when not bound by the limitations of cra.

you could just eject create react app:

npm run eject

all of these problems will go away instantly... the start.js script referenced above is a bit of the code that is ejected. so you would very easily be able to replace those proxy settings with env vars.

just be certain to create a checkpoint for yourself prior to doing this as there is no reverting an ejection.

however--if you must stick with cra--you can very easily modify package.json using environment variables.

how to inject env vars into package.json at build time:

this is essentially what cra does with the react_app_ env vars (though it directly injects them into process.env).

package.json is just a big json object, so all you need to do is parse it on the server side right before you deploy, update the "proxy" value to the ones provided by your env vars, save the file, and then run your build/deploy.

here is a very simple example of how to achieve this, you just need to run this script before deployment in a context where you still have access to process.env:

const fs = require('fs');

// read/process package.json
const file = './package.json';
let pkg = json.parse(fs.readfilesync(file).tostring());

// at this point you should have access to your env vars
pkg.proxy = `${process.env.host}:${process.env.port}`;

// the 2 enables pretty-printing and defines the number of spaces to use
fs.writefilesync(pkg, json.stringify(file, null, 2));

i know this doesn't explicitly answer the question of how to handle this "without package.json", but i don't think that's the necessary approach anyways.

further, this does asnswer the title question of "how to inject port and host using env variable in create react app proxy settings?"

note: this feature is available with react-scripts@2.0.0 and higher.

you can manually configure proxy now. you need to install http-proxy-middleware first.

npm install http-proxy-middleware --save

then create a file src/setupproxy.js with following content.

const { createproxymiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // you can pass in an array too eg. ['/api', '/another/path']
    createproxymiddleware({
      target: process.env.react_app_proxy_host,
      changeorigin: true,
    })
  );
};

you can add proxy now in the .env file, remember you need the react_app_ prefix for development server to pick up the environment variable.

react_app_proxy_host=http://localhost:5000

ref: proxy manually