How to use variables with different values for production?

[oren]

I am switching to preact-cli from the preact boilerplate and I noticed that there is no webpack configuration file. The only missing feature for me is the ability to change the URL of my server: during development I am accessing localhost:3000 and during production api.my-server.com. With the preact boilerplate I use webpack's DefinePlugin:

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(ENV),
  'API_HOST': (ENV === 'production') ? JSON.stringify('https://api.my-server.com') : JSON.stringify('http://localhost:3000')
}),

(Here is the code as part of the entire project)

How do I achieve the same capability with preact-cli? I don't mind not using webpack at all. I know it can be done with grep and sed but that might not work on windows machines.

Thanks!

[developit]

Hiya - you can use process.env.NODE_ENV, it'll be "development" or "production" just like in your setup:
https://github.com/developit/preact-cli/blob/master/src/lib/webpack-config.js#L245

const API_HOST = process.env.NODE_ENV === 'production' ? 'https://api.my-server.com' : 'http://localhost:3000';

Because of the way Webpack + Uglify work, this will actually get statically compiled out in production, so the above code will turn into simply:

const API_HOST = 'https://api.my-server.com';

[oren]

what setup? currently the cli doesn't have webpack config. I am afraid to copy my entire webpack config just because of this need. can i have empty webpack config that only have those lines?

[developit]

In the CLI's existing internal webpack config, this is already in place. You can just use the value in you code like I showed above, it already works. This shouldn't require it, but what you're referring to is being implemented in #56 :)

[oren]

awesome. thanks