React and Grunt - Envify NODE_ENV='production' and UglifyJS

Question

I am using Grunt to build a React project and I want to have 'dev' and 'prod' flavours. As react docs says:

To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.

I am very new using grunt, browserify and stuff but let's see. First problem I have is with envify, I use it as a transform:

browserify: {
  options: {
    transform: ['reactify'],
    extensions: ['.jsx']
  },
  dev:{
    options: {
      watch: true //Uses watchify (faster)
    },
    src: ['js/app.js'],
    dest: 'js/bundle.js'
  },
  /**
   * To use React in production mode, set the environment variable NODE_ENV to production.
   * A minifier that performs dead-code elimination such as UglifyJS is
   * recommended to completely remove the extra code present in development mode.
   **/
  prod: {
    options: {
     transform: ['envify'] //How to set up NOD_ENV='production' ?
    },
    src: ['js/app.js'],
    dest: 'js/bundle.js'
  }
},

Ok, doing grunt:dev works just fine. So when running grunt:prod... How can I set NODE_ENV: 'production'? I mean, I know I am passing 'envify' as a transform but... No idea how to use that.

After this, I also have an uglify task:

uglify: {
 prod: {
   files: {
     'js/bundle.min.js': ['js/bundle.js']
   }
 }
}

So after calling grunt:prod, what it creates is two files (bundle.js and bundle-min.js). In production I will like to only have bundle.min.js. I know I can do:

js/bundle.js': ['js/bundle.js']

But mmm I don't know if there is a way to just rename it to bundle.min.js, I guess so... the problem is that in the html I have:

<script src="js/bundle.js"></script>

Is there here also a trick to make it accepts either bundle.js or bundle.min.js?

Thanks in advance.

Answer 1

Transforms are local, and well made packages put their transforms in their package.json file. Unless you're using envify in your own code, you don't need to do anything with it.

What you do need is grunt-env, or another way to set environmental variables.

Here's an alternative by using package.json:

{
  "scripts": {
    "build": "NODE_ENV=development grunt build-dev",
    "dist": "NODE_ENV=production grunt dist"
  }
},
"devDependencies": {
  "grunt": "...",
  "grunt-cli": "..."
}

The benefit here is that the person using your package doesn't even need to install grunt globally. npm run build will run ./node_modules/.bin/grunt build-dev with the correct environmental variable set.

Answer 2

Both John Reilly's and FakeRainBrigand 's answers did not work for me. What worked for me was the following:

Step 1 - Run this command where your package.json is

npm i grunt-env --save-dev

Step 2 - Add the code in "evn:" to your Gruntfile.js within grunt.initConfig like so:

grunt.initConfig({

...

env: {
    prod: {
        NODE_ENV: 'production'
    }
},

...

});

Step 3 - Add the grunt task to your Gruntfile.js

grunt.loadNpmTasks('grunt-env');

Step 4 - Call it before browserify like so:

grunt.registerTask("default", ["env", "browserify"]);

Answer 3

Just an addition to the great answer by FakeRainBrigand, if you're running on Windows (like me) then you need a subtly different syntax in your scripts section:

{
  "scripts": {
    "build": "SET NODE_ENV=development&&grunt build-dev",
    "dist": "SET NODE_ENV=production&&grunt dist"
  }
},
"devDependencies": {
  "grunt": "...",
  "grunt-cli": "..."
}