At the top of your webpack.config.js file define your environment variables like so:

/**
 * Example Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const API_URL = process.env.API_URL = 'http://localhost:3000';
const METADATA = {
  API_URL: API_URL,
  ENV: ENV
};

Then in the plugins array use DefinePlugin method to define global variables configured at compile time:

/**
 * Make Webpack Constants Available Globally
 */
   new webpack.DefinePlugin({
     'ENV': JSON.stringify(METADATA.ENV),
     'API_URL': JSON.stringify(METADATA.API_URL),
     'process.env': {
       'ENV': JSON.stringify(METADATA.ENV),
       'NODE_ENV': JSON.stringify(METADATA.ENV),
       'API_URL' : JSON.stringify(METADATA.API_URL),
     }
   }),

Re-compile and now your variables will be globally available.

The post Environment Variables in Webpack appeared first on Trim Agency.

Let’s look at the problem….

var obj1 = { key: 'some value' };

var obj2 = obj1;
obj2.key = 'another value';

console.log( obj1 === obj2) // true
console.log( obj1.key ) // 'another value'

When we changed obj2’s key property, it also changed obj1’s key property. No bueno!
The solution:

var obj1 = { key: 'some value' };

var obj2 = Object.assign( {}, obj1, { key: 'another value' });

console.log( obj1 === obj2) // false
console.log( obj1.key ) // 'some value'
console.log( obj2.key ) // 'another value'

As you can see we changed obj2’s key property and it left obj1’s state intact! Now that’s immutable!
Object.assign takes objects as its parameters and passing in an empty object as the ‘target’ keeps our ‘source’ objects intact.

Object.assign is widely supported by desktop and mobile browsers, please check Mozilla for more info.

The post Immutable Objects using Object.assign appeared first on Trim Agency.