search

reactql / kit

ReactQL starter kit (use the CLI)
https://reactql.org
228 stars 38 forks source link

Tighten env var security in browser bundles #109

Closed leebenson closed 6 years ago

leebenson commented 7 years ago

See https://github.com/reactql/kit/pull/107#issuecomment-339238321

klarstrup commented 7 years ago

There still needs to be a way to, from userland, allow additional env vars through to the client.

Things like api hostnames/credentials(ie. dev vs stage vs prod) and analytics keys are environment level settings that are needed in the browser bundle. (And for the former example also needed server side for SSR.)

rwoody commented 6 years ago

Is there any documentation about using custom process.env variables on the server side? I've just realized that the Webpack setup inside kit was clobbering my environment variables in .env when trying to load through motdotla/dotenv.

leebenson commented 6 years ago

env vars will be totally flexible in kit v3.0. There won't be any major changes to the current branch, because it'll wind up being Typescript in 3.0 anyway. Hold tight - hoping to release before the month's out.

rwoody commented 6 years ago

mrsteele/dotenv-webpack seems like a popular choice for this problem. It's a Webpack plugin that can bundle only process.env values used in the source code - server side or client.

YoniH commented 6 years ago

What can I do now if I want to pass an env var from Heroku for example, and use it from my client code?

I tried changing my build script in package.json to: "build": "cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod MYVAR=$MYVAR webpack --colors" (added MYVAR=$MYVAR)

...hoping that when the build script runs on Heroku, Webpack will replace process.env.MYVAR with the value of MYVAR. But when the client code runs, process.env.MYVAR is undefined.

I guess I should in addition or instead also do something in my webpack configuration in the kit, but not sure exactly what and where.

Any help would be appreciated

rwoody commented 6 years ago

No, env vars added there won’t do anything. You’ll need to change the kit folder’s source code so they get included in the Webpack build for the server until the next version.

On Tue, Nov 28, 2017 at 7:37 PM, YoniH notifications@github.com wrote: What can I do now if I want to pass an env var from Heroku for example, and use it from my client code?

I tried changing my build script in package.json to: "build": "cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod MYVAR=$MYVAR webpack --colors" (added MYVAR=$MYVAR)

...hoping that when the build script runs on Heroku, Webpack will replace process.env.MYVAR with the value of MYVAR. But when the client code runs, process.env.MYVAR is undefined.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub [https://github.com/reactql/kit/issues/109#issuecomment-347723557] , or mute the thread [https://github.com/notifications/unsubscribe-auth/AA6AKuyhNLtn4aKRJy2lzJZXk3Wkr0cxks5s7LVCgaJpZM4QFiyQ] .

leebenson commented 6 years ago

Apologies for the generic response, but I've released a new v3.0 kit, which has been re-written from the ground up.

It bumps the ReactQL stack to Webpack 4, React 16.4, Apollo Client 2.0, and adds Styled Components, full SSR (even in development), and has been re-written in Typescript. It's leaner, faster and has been brought completely up-to-date.

If you're still using ReactQL (and I appreciate you may not be, given the time lag in my response), I'd recommend checking out the new kit to see if your issue has been answered. If not, please feel free to post a new issue at https://github.com/leebenson/reactql