React-starter-kit: Environment variables not working

[some81]

I changed PORT to 80 but the app still render on port 3000.
How can I change any of these variables?

[tim-soft]

@some81 Your env var may apply to your app _in production_, but in dev you must specify the port as an option when initializing browser-sync, since this orchestrates the dev server.

BS options go here:
https://github.com/kriasoft/react-starter-kit/blob/6c599b72e6ca1f75f9e52b995a7f9a6f387555ea/tools/start.js#L223

https://browsersync.io/docs/options#option-port

[some81]

I do this npm run start PORT=1234 and the port is till 3000

[hxg543453406]

you can edit the config page(react-starter-kit/src/config.js);
In this page is setting port or default:

module.exports = {
  // Node.js app
  port: process.env.PORT || 3000,  //set port what you like

  // https://expressjs.com/en/guide/behind-proxies.html
  trustProxy: process.env.TRUST_PROXY || 'loopback',

  // API Gateway
  api: {
    // API URL to be used in the client-side code
    clientUrl: process.env.API_CLIENT_URL || '',
    // API URL to be used in the server-side code
    serverUrl:
      process.env.API_SERVER_URL ||
      `http://localhost:${process.env.PORT || 3000}`,
  },

[some81]

I tried that already, but it doesn't work. The port remains to 3000.

[rodeyseijkens]

@some81 are you on windows?

[some81]

Mac

Regards, Alexander Todorov

On Thu, Mar 8, 2018 at 11:52 AM, Rodey [e-mail] wrote:

@some81 https://github.com/some81 are you on windows?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kriasoft/react-starter-kit/issues/1561#issuecomment-371548767,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABHuXViJBxEmTiDeVRsYZq_3T1OMIdQqks5tcWHCgaJpZM4SfkW2
.

[tim-soft]

You are in dev, not in prod. You need to change the default browser sync port

[hxg543453406]

what I said before is in prod Env, If you are in dev that you can edit the start page(react-starter-kit/tools/start.js);

  await new Promise((resolve, reject) =>
    browserSync.create().init({
 // https://www.browsersync.io/docs/options
        server: 'src/server.js',
        middleware: [server],
        port:  8080,  // set the default port you like in the development environment 
        open: !process.argv.includes('--silent'),
        ...(isDebug ? {ui: {port: 8080,weinre: { port: 9090 }}} : { notify: false, ui: false }),  //this setting ui port
      },
      (error, bs) => (error ? reject(error) : resolve(bs)),
    ),
  );

the detail setting options in https://www.browsersync.io/docs/options

[langpavel]

• Environment variables are set before each command like PORT=80 node build/server
• You must use production build for server, please RTFM

[some81]

@hxg543453406 you solution definitely works. Thank you

[some81]

@langpavel dude, I'm asking for development not for prod if you don't understand my question just don't respond. I know very well how to set env variable.

[langpavel]

Hey dude @some81

I do this npm run start PORT=1234 and the port is till 3000

So what I can read from this?
Don't waste my time and don't waste time of all other people by asking like kid.
Environment variables are reflected in development as well as in production mode and your question is kind of stupid, so please, don't attack me, I have better thing to solve.
My pleasure for keeping track of relevant issues open, and please, RTFM next time OR ask properly :smiling_imp:
Cheers

[some81]

@langpavel I asked properly enough! If you don't have attention to help starters to learn 'react-starter-kid', then I guess you should just need to keep coding and leave the rest of the collaborators to help as they did already. The docs are not clear enough when I had to ask questions. You're right don't lose your time and get back to the project because it needs some improvements.

[langpavel]

Then please help us with PR to improve docs. My apologise for my tone of response

[hxg543453406]

you can get the port what you set from the process.argv and set it to the browserSync.create().init({}). I try it works well.

[langpavel]

@hxg543453406 No.

• Production build use only one port from PORT, app will respect env
• In development mode, there are multiple ports used, so one variable cannot satisfy all of them.
  Browsersync is only development tool and it cannot respect PORT set in env because that port is used by application server itself.
  React Starter Kit used 3 different ports in development few months ago —
  
  
  
  • app server (respecting PORT)
  
  
  • webpack dev + browsersync
  
  
  • browsersync itself.
  
  

It's not easy in development but it's very clear in production see? :slightly_smiling_face:

[hxg543453406]

@langpavel Oh, I see！I've got the wrong idea. Thank you

[langpavel]

@hxg543453406 Ok, please, let this be your lesson. We are doing open source to help others to advance, iterate, do things better, so if I or somebody else write you RTFM, please do. I's my free time and this is one of potentially thousand issues I'm looking just for fun and self reflection.
I have no good from issues like this and I have no more motivation to contribute if other people don't try to open editor and search. I'm not programer of people, I'm trying to bring ideas. Keep this in mind and if you will have a better day because you reuse work of others, please, be kindful and graceful. You got all the good from this kit for free, please, reward us, look at other issues, answer that you know, rate the other that you are interested, be nice.
We have trouble with duplicates and classification so I pick one issue at a time if nobody mention me directly. But I always respond if I'm asked as @langpavel.
Thanks for empathy in future :smiling_imp: