react-app-rewire-define-plugin equivalent

[saostad]

Hi,

is there any way to define environment variable in webpack config?
something like :

const rewireDefinePlugin = require('react-app-rewire-define-plugin')

// Use `webpack.DefinePlugin` to add the version number from package.json
config = rewireDefinePlugin(config, env, {
  'process.env.VERSION': JSON.stringify(require('./package.json').version)
})

[harrysolovay]

Hi @saostad –– absolutely. You can install react-app-rewire-define-plugin and use it in conjunction with @rescripts/rescript-use-rewire:

.rescriptsrc.js

module.exports = [
  [
    'use-rewire',
    'react-app-rewire-define-plugin',
    process.env.NODE_ENV,
    {
      'process.env.VERSION': JSON.stringify(require('./package.json').version)
    }
  ]
]

Although I'd recommend doing this instead:

.rescriptsrc.js

const {appendWebpackPlugin} = require('@rescripts/utilities')
const {DefinePlugin} = require('webpack')

module.exports = config =>
  appendWebpackPlugin(new DefinePlugin({
    'process.env.VERSION': JSON.stringify(require('./package.json').version)
  }), config)

^ that should do the trick.

Please let me know if you encounter any problems. If this solves your problem, please close the issue 👍

& thanks for using Rescripts! Let me know anything I can do to make it a better developer experience for you!

[saostad]

thanks for quick response.
how can I check if I am in prod or dev environment?
I need something like this:

const { appendWebpackPlugin } = require("@rescripts/utilities");
const { DefinePlugin } = require("webpack");

require("dotenv").config();

// if in dev (npm start script)
const API_URL = process.env.API_DEV_URL

// if in prod (npm run build script)
const API_URL = process.env.API_PROD_URL

module.exports = config =>
  appendWebpackPlugin(
    new DefinePlugin({
      "process.env.API_URL": JSON.stringify(API_URL)
    }),
    config
  );

[harrysolovay]

@saostad it depends where you need the reference. I don't think you'd need the dotenv dependency. You should be able to reference env variables directly from process.env. My understanding is that DefinePlugin is meant to make variables globally accessible to the app after it has been built. hope this has been helpful!

[saostad]

what I wanna do is just run build or start command but because I have 2 different API url for dev and prod environments I wanna define one global variable (API_URL) and in build time set it based on the environment.
technically if I run
npm start set API_URL to http://dev.mydomain.com
and
npm run build set API_URL to http://prod.mydomain.com
and in my react app just use process.env.API_URL

[harrysolovay]

@saostad then you'll probably want to do something similar to what you had above:

const { appendWebpackPlugin } = require("@rescripts/utilities");
const { DefinePlugin } = require("webpack");

const { NODE_ENV, API_PROD_URL, API_DEV_URL } = process.env
const API_URL = NODE_ENV === 'production' ? API_PROD_URL : API_DEV_URL

module.exports = config =>
  appendWebpackPlugin(
    new DefinePlugin({ API_URL }),
    config,
  );

Also, @rescripts/utilities has built-in support for currying, so you could do this instead:

const { appendWebpackPlugin } = require("@rescripts/utilities");
const { DefinePlugin } = require("webpack");

const { NODE_ENV, API_PROD_URL, API_DEV_URL } = process.env
const API_URL = NODE_ENV === 'production' ? API_PROD_URL : API_DEV_URL

module.exports = appendWebpackPlugin(
  new DefinePlugin({ API_URL }),
);

Please let me know if this was helpful (and if so, please close the issue) 👍

[saostad]

this is the only way it works for me:

const { appendWebpackPlugin } = require("@rescripts/utilities");
const { DefinePlugin } = require("webpack");
require("dotenv").config();

const { NODE_ENV, API_PROD_URL, API_DEV_URL } = process.env;
const API_URL = NODE_ENV === "production" ? API_PROD_URL : API_DEV_URL;

module.exports = config =>
  appendWebpackPlugin(
    new DefinePlugin({
      "process.env.API_URL": JSON.stringify(API_URL)
    }),
    config
  );

for some reason I still need to do require("dotenv").config();
thank you so much.

[harrysolovay]

@saostad ohhh––you're passing the environment vars through a .env file, not as script params... in that case, using dotenv should do the trick. Please let me know if you have any other problems :)

[saostad]

Correct!
it's working well!
Thanks.

[saostad]

I have created a repo in case anybody wants to see the solution