# Category Archives: TUTORIALS

Detailed tutorials explaining how to build most common applications, in different languages.

# Check if string has all unique characters

Implement an algorithm to determine if a string (of characters from ‘a’ to ‘z’) has all unique characters or not.

Example 1:

```var s = "abcde";
returns true;
```

Example 2:

```var s = "abcade";
returns false;
```

## Solution

Solution 1: The brute force solution will be to iterate through all characters and compare with all other characters.

```function areCharactersUnique(s) {
for(let i=0; i < s.length; i++) {
for(let j=0; j < s.length; j++) {
if(i == j)
continue;
if(s[i] == s[j]) {
return false;
}
}

}
return true;
}

console.log(areCharactersUnique(s));```

Solution 2: Using an array (or hashMap table) with key equal to the ASCII character code.

```function areCharactersUnique(s) {
var checker = new Array(26);
for(let i=0; i < s.length; i++) {
var pos = s[i].charCodeAt(0) - 'a'.charCodeAt(0);
if(typeof checker[pos] != 'undefined') {
return false;
}
checker[pos] = 1;
}
return true;
}

var s = "abcde";

console.log(areCharactersUnique(s));```

Let’s make it more challenging and prohibit the use of additional data structures like count array, hash, etc.

Solution 3: Using bitwise operations to store into 32 bit if one of all 26 characters is presented or not.
We have 26 letters (from a to z). Let’s imagine that we could have 26 empty slots that we could set up to true if the character exists, pretty much as if we have a hashTable.
for simplicity I will use only 6 slots (from a to G) instead of all 26 that represent the whole alphabet.
In addition we have to mention that the slots are actually 32 (this is usually the length of an integer in JavaScript but we need only 26)

 6 5 4 3 2 1 0 G F E D C B A false false false false false false false

Given the string: ‘ABCG’ for example we will end up with this matrix.

 6 5 4 3 2 1 0 G F E D C B A true false false false true true true

But this could be stored into 32bit value using bitwise operations. The binary representation of the matrix above will be:  1000111

The solution:

```function areCharactersUnique(s) {
var checker = 0;

for(let i=0; i < s.length; i++) {
// Charcode of a is 97 but we want to start with 0
var val = s[i].charCodeAt(0) - 'a'.charCodeAt(0);
// & - Sets each bit to 1 if both bits are 1
// examples:
// 1 & 10 = 0
// 1 & 101 = 1
if(checker & ( 1 << val)) {
return false;
}

// | - Sets each bit to 1 if one of two bits is 1
// examples:
// 1 | 10 = 11
// 1 | 1 = 1
checker = checker | ( 1 << val);
}
return true;
}```

what we just did:
– we started with creating a loop to go through all characters
– we set up an empty value `checker` to store if the character is used or not (this is the binary representation of the matrix above)
– (line 6) grabbing the value for each letter in the string but removing ‘a’ = 97 so ‘a’ character will be equal to 0 and z = 26
– (line 19) we are setting the position of the character into the `checker` to true using bitwise shift left `(1 << a)` and preserving other already set positions using bitwise `|` ‘or’
– (line 11) using the same technique but with bitwise `&` ‘and’ we check if the character position is set to true or not.

Here is a step by  step example for ‘ABCG’ character:
– initially `checker = 0 // or the binary representation is '00000000...0'`
– we are going to insert `a` using Zero fill left shift. This is basically going to add ‘1’ followed by as many ‘0’ to the right of the checker as the value of ‘a’ is. In this case 0, so `schecker = 1 // binary '00000000...1`

– next step inserting ‘b’ follows the same procedure: b = 1, `(1 << b) = 2 '000000...10'` but we also want to preserve whatever was already inserted so we use bitwise ‘|’ ‘or’ which sets each bit to 1 if one of two bits is 1.
so
`checker = checker | (1 << b) = 2`
or the binary representation will be:
`checker = '00000000...1' | (1 << b) = '000000000...11'`

and the same for the rest of the characters

```var a = 0;
var b = 1;
var c = 2;
var d = 3;
var e = 4;
var f = 5;
var g = 6;

var s = "abcg";
var checker = 0;

checker = checker | (1 << a);   // 1
checker = checker | (1 << b);   // 11
checker = checker | (1 << c);   // 111
checker = checker | (1 << g);   // 1000111

```

Let’s modify the problem, and ask to return the index of the first unique character in the string.
For example for string ‘abcac’ the return will be the index of b – ‘1’
This problem is asked in Leetcode

```/**
* @param {string} s
* @return {number}
*/
var firstUniqChar = function(s) {

let lastSingle = null;
let hashMap = {};
for(var i = 0;i < s.length; i ++) {
var val = s[i];
hashMap[val] =  hashMap[val] == undefined ? i: 'not-unique';
}

for(let i=0; i < s.length; i++) {
var key = s[i];
if(hashMap[key] != 'not-unique') {
return hashMap[key];
}
}
return -1;

}```

# LRU Cache

Design and implement a data structure for Least Recently Used (LRU) cache. It should support the following operations: `get` and `put`.

`get(key)` – Get the value (will always be positive) of the key if the key exists in the cache, otherwise return -1.
`put(key, value)` – Set or insert the value if the key is not already present. When the cache reached its capacity, it should invalidate the least recently used item before inserting a new item.

The cache is initialized with a positive capacity.

Could you do both operations in O(1) time complexity?

Example:

```LRUCache cache = new LRUCache( 2 /* capacity */ );

cache.put(1, 1);
cache.put(2, 2);
cache.get(1);       // returns 1
cache.put(3, 3);    // evicts key 2
cache.put(4, 4);    // evicts key 1
cache.get(3);       // returns 3
cache.get(4);       // returns 4
```

This problem was taken from Leetcode

## Solution

The brute force solution will be to use array, to push every new element at the top, and on ‘get’ to pop out the element and to put it at the top of the array.

A better solution will be to use hashmap where the element retrieval will be O(1) (constant) but the hashmap is not keeping track of the order of the elements. To solve this problem we are going to link elements in the hashnmap table with double linked list, where each element will point to its previous and next sibling.
On every ‘get’ operation we are going to re-link the element and it’s siblings.

When the cache reaches the capacity we are going to remove the least used node from the bottom.

 put(1,1) put(2,2) get(1) put(3,3) get(2) put(4,4) get(1) get(3) get(4) return 1 -1 -1 3 4 result 1 2,1 1,2 3,1 => (2) 3,1 4,3 => (1) 4,3 3,4 4,3

```class LRUCache {

constructor(capacity) {

this.tail = null;
this.capacity = capacity;
this.count = 0;
this.hashMap  = new Map();
}

get(key) {
var node = this.hashMap.get(key);
if(node) {
return node.val;
}
if(this.tail == node && this.tail.prev) {
// if the node is at the tail,
// set tail to the previous node if it exists.
this.tail = this.tail.prev;
this.tail.next = null;
}
if(node.prev)
node.prev.next = node.next;
if(node.next)
node.next.prev = node.prev;
node.prev = null;

return node.val;
}
return -1;
}

put(key, val) {
this.count ++;
var newNode = { key, val, prev: null, next: null };

// this.hashMap is empty creating new node
this.tail = newNode;
}
else {
var oldNode = this.hashMap.get(key);
if(oldNode) {
// if node with the same key exists,
// clear prev and next pointers before deleting the node.
if(oldNode.next) {
if(oldNode.prev)
oldNode.next.prev = oldNode.prev;
else
}
if(oldNode.prev) {
oldNode.prev.next = oldNode.next;
if(oldNode == this.tail)
this.tail = oldNode.prev;
}
// removing the node
this.hashMap.delete(key);
this.count --;
}

// adding the new node and set up the pointers to it's neibouring nodes

if(this.tail == null)

if(this.count == this.capacity + 1) {
// remove last nove if over capacity
var lastNode = this.tail;
this.tail = lastNode.prev;
if(!this.tail) {
//debugger;
}
this.tail.next = null;
this.hashMap.delete(lastNode.key);
this.count --;
}

}
this.hashMap.set(key, newNode);
return null;
}
}```

# Trapping Rain Water

Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it is able to trap after raining.

image was borrowed from leetcode

The above elevation map is represented by array [0,1,0,2,1,0,1,3,2,1,2,1]. In this case, 6 units of rain water (blue section) are being trapped. Thanks Marcos for contributing this image!

Example:

Input:

``` [0,1,0,2,1,0,1,3,2,1,2,1]
```

Output:

` 6`

This problem was taken from Leetcode

## Solution

The brute force approach: for each element we go to the right and find the maximum height of the bar, then we go to the left and do the same.

For any element the maximum amount of the water that could be trapped will be the minimum of left height and right height, minus the height of the bar.

So for the array [0,1,0,2,1,0,1,3,2,1,2,1] we go all the way to the right and calculate the max right value, starting from first element ‘0’ max right will be 0. ‘1’ – max right is ‘1’ and so on.
We repeat the same from last element ‘1’ to the first one.

Then the trapped water for the first column will be:  min(maxRight, maxLeft) – theArrayElement[n]

 the array 0 1 0 2 1 0 1 3 2 1 2 1 max right 0 1 1 2 2 2 2 3 3 3 3 3 max left 3 3 3 3 3 3 3 3 2 2 2 1 collected water 0 0 1 0 1 2 1 0 0 1 0 0

The complexity will be O(n2)

```/**
* @param {number[]} height
* @return {number}
*/
var trap = function(height) {
if(height.length < 2)
return 0;

let findMaxLeft = function(idx, height) {
let max = 0;
for(let i =idx;i >= 0; i --) {
max = Math.max(max, height[i]);
}
return max;
}

let findMaxRight = function(idx, height) {
let max = 0;
for(let i = idx;i < height.length; i ++) {
max = Math.max(max, height[i]);
}
return max;
}

let collectedWater = 0;
for(let i = 0;i < height.length; i ++) {

const maxLeft = findMaxLeft(i, height);
const maxRight = findMaxRight(i, height);

let min = Math.min(maxLeft, maxRight);
collectedWater += (min - height[i]);
}

return collectedWater;
};```

The better solution: find all max left and max right with one loop, then do a second loop for each element in the array, and calculate trapped water.

```/**
* @param {number[]} height
* @return {number}
*/
var trap = function(height) {
let maxLeftArray = [], maxRightArray = [];
let maxLeft = 0, maxRight = 0;
const ln = height.length;
let trappedWater = 0;

for(let i = 0;i < height.length; i ++) {
maxLeftArray[i] = Math.max(height[i], maxLeft);
maxLeft = maxLeftArray[i];

maxRightArray[ln - i - 1] = Math.max(height[ln - i - 1], maxRight);
maxRight = maxRightArray[ln - i - 1];
}

for(let i = 0;i < height.length; i ++) {
trappedWater += Math.min(maxLeftArray[i], maxRightArray[i]) - height[i];
}
return trappedWater;

};```
what we just did:

– With one loop find the max left and right bar on each side.
– for any element the maximum amount of the water that could be trapped will be the minimum of left height and right height, minus the height of the bar.

# What are web components?

Web components are new reusable components that add new functionalities to a standard components (ie: img, input, table, h, p, div, etc.) or create new components using and combining the existing standard components. You could read more here: web components

# How to create custom web component ?

The simplest idea of how to create a web component is this: (although this could be highly customised, and done in many different ways, for the purpose of this exercise to be as simple as possible we will explore the simplest approach):

1. Create custom class that will handle the presentational logic of the component.
2. Add the custom tag in the document.
3. Add the styles and the HTML markup to the main DOM. This is usually done by adding the shadow DOM of the new component to the document’s DOM.

Let’s make a real useful web component, while going to the process

# Create a Text Field component with auto suggest drop down drawer and dictionary of the suggested words.

Final product will look like this:

Day:
Month:

First We will

## Create the HTML and the CSS layout.

Create a new file

./text-box-with-dropdown.js

```var template = `
<style>
.wrapper {
display: inline-grid;
}
#drawer {
cursor: pointer;
border: 1px solid silver;
background: #f4f4f4;
}
.selectedRow {
color: white;
background: #606062;
}
p {
margin: 1px;
border-bottom: 1px solid silver;
}
p:last-child {
border-bottom: none;
}
</style>

<div class="wrapper">
<input type="text" id='textfield'>
<div id='drawer'>
</div>
</div>
`;```

We added the CSS, and the HTML markup which consists of a wrapper div, a text field, and a ‘drawer’ div, which will show the suggested words.

Next, In the same file create a class to handle the events.

```class TextboxWithDropdown extends HTMLElement {

constructor() {
// Always call super first in constructor
super();
}

connectedCallback() {
}
}```

And now let’s attach the newly created web component to the document DOM

`window.customElements.define('textbox-with-dropdown', TextboxWithDropdown);`

Now we are going to create the actual HTML document to view the component.

./index.html

```<!DOCTYPE html>
<html lang="en" prefix="og=https://ogp.me/ns#" itemType="https://schema.org/WebPage" data-reactroot=""></html>
<script src="./text-box-with-dropdown1.js"></script>
<style>
body {
background-color: #f5f5f5;
}
</style>

<body>
Day: <textbox-with-dropdown id="txt1" dictionary="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31" value='1'></textbox-with-dropdown>
Month: <textbox-with-dropdown id="txt2" dictionary="January,February,March,April,May,June,July,August,September,October,November,December"></textbox-with-dropdown>
</body>
</html>```

What we just did:
– we created simple HTML document
– Added two instances of our new WEB component `textbox-with-dropdown`
– Passed a property with a list of all days of the month to the first component and set it’s value=’1′ which will be the default parameter.
– Passed months of the year as a property to the second component.

So far the component will be visible but not quite functional. Let’s add all that we need to make the component functional.

First let’s discuss `connectedCallback` hook. It is invoked each time the custom element is appended into a document-connected element, while `attributeChangedCallback` is invoked when one of the custom element’s attributes is added, removed, or changed. How we are going to use this? We are going to move all initialization logic to `connectedCallback`
Then we are going to use `attributeChangedCallback` to listen to attribute changes and update the component. For example if you use the dev tools and inspect the component and edit the `dictionary` attribute, our component will update accordingly.

Next we are going to add a function that will accept a `prefix` parameter, which will be whatever the user starts typing in the text field and will filter the `dictionary` and return only matching words (or numbers).

We will also add `keyUp` events, so the user will be able to use ‘up’ and ‘down’ keys to navigate through the words list, and in addition we will add `mousemove` events to highlight the words where the mouse is.

Go back to text-box-with-dropdown.js and add these functionalities.

./text-box-with-dropdown.js

```var template = `
<style>
.wrapper {
display: inline-grid;
}
#drawer {
cursor: pointer;
border: 1px solid silver;
background: #f4f4f4;
}
.selectedRow {
color: white;
background: #606062;
}
p {
margin: 1px;
border-bottom: 1px solid silver;
}
p:last-child {
border-bottom: none;
}
</style>

<div class="wrapper">
<input type="text" id='textfield'>
<div id='drawer'>
</div>
</div>
`;

class TextboxWithDropdown extends HTMLElement {

constructor() {
// Always call super first in constructor
super();
// and attach the component
}

connectedCallback() {
// and when the component is mounted, do the rest to make it work
this.selectedIndex = 0;
this.filteredWordsCount = 0;
this.isDrawerOpen = false;

this.dictionary = this.getAttribute("dictionary").split(',');
this.textfield.value = this.getAttribute("value");
this.keyUp(e);
}.bind(this));
}

static get observedAttributes() {
// on attributes changed by the browser dev tools this will reflect the changes
return ["dictionary", "value"];
}

get value() {
// return the value
return this.textfield.value;
}

attributeChangedCallback(name, oldValue, newValue) {
//Custom square element attributes changed.
this.dictionary = newValue.split(',');
}

selectHighlight(i) {
this.selectedIndex = i;
}

keyUp(e) {
if(e.keyCode == 13) {
this.rowSelected(e);
return;
}
if(e.keyCode == '38' || e.keyCode == '40') {
this.arrowUpDown(e);
return;
}
if(prefix == '') {
this.selectedIndex = 0;
this.filteredWordsCount = 0;
return;
}
if(this.isDrawerOpen == true)
return;
var words = this.filterWords(prefix);
// attach the events
var c = 0;
words.map(function(row, i) {
var row = this._shadowRoot.getElementById('row-' + i);
this.selectHighlight(i);
}.bind(this));
this.rowSelected(e);
}.bind(this));
}.bind(this));
// select first row if any
if(words.length > 0)
}

arrowUpDown(e) {
if(this.selectedIndex > -1)
if(e.keyCode == '38' && this.selectedIndex > 0) {
// arrow up
this.selectedIndex --;
}
else if(e.keyCode == '40' && this.selectedIndex < this.filteredWordsCount - 1) {
// arrow down
this.selectedIndex ++;
}
e.preventDefault();
return false;
}

rowSelected(e) {
if(this.filteredWordsCount == 0)
return;
this.filteredWordsCount = 0;
this.selectedIndex = 0;
e.preventDefault();
return false;
}

//business logic comes here. Bad idea!. Separate this in a diffrent class. But for the simplicity of the example we will keep it here.
filterWords(prefix) {
prefix = prefix.toLowerCase();
var result = [];
for(var i=0; i < this.dictionary.length;i ++) {
var wordArray = this.dictionary[i].toLowerCase();
for(var j=0; j < prefix.length && j < wordArray.length; j ++) {
if(prefix[j] != wordArray[j]) {
break;
}
}
if(prefix.length == j) {
var wordRow = '<p id="row-' + result.length + '">' + this.dictionary[i] + '</p>';
result.push(wordRow);
}
}
this.filteredWordsCount = result.length;
return result;
}

}

window.customElements.define('textbox-with-dropdown', TextboxWithDropdown);```

What we just did:
– in `connectedCallback` function we set up:
`this.selectedIndex` which will point to the selected word in the drawer
`this.filteredWordsCount` storing the number of word matched
`this.isDrawerOpen`
`this._shadowRoot.innerHTML` is set up with the HTML layout that we created in the beginning of the file.
`this.textfield` is set up with the value of `value` attribute. `this._shadowRoot` is the way how we are referring to the root of the component.
`this.dictionary` stores an array of all dictionary words that we pass using the `dictionary` property.
– added event listener to the text field, which will respond on keyUp and keyDown and will manipulate the highlighted word.
– (line 56) `observedAttributes` function returns a list of the attributes that we need to observe. Ie on adding or removing words through browser’s dev tools.
– (line 61) this function is called every time when the value of `value` attribute is called.Ie when  `document.getElementById('txt1').value` is called.
– (line 66) `attributeChangedCallback` is called whenever the observed parameters that we set up in `observedAttributes` function. Once the dictionary parameter is changed we are updating `this.dictionary`
– (line 71) `selectHighlight` function is called on `mousemove` over the words in the drawer.
– (line 77) `keyUp(e)` function responds to key press and is responsible to call `rowSelected()` on enter key, or `arrowUpDown()` on button up or down. If any other key is pressed `filterWords(prefix)`is called, `prefix` is the whatever the user started to type in the textfield. Then when the new words list is returned, we attach `mousemove` event (line 101), and `click` event (line 104)
`arrowUpDown()` simply move the highlighter up or down.
`rowSelected()` is called when a word is selected either with mouse click or when enter key is pressed.

# Majority element in array

Given an array of size n, find the majority element. The majority element is the element that appears more than `⌊ n/2 ⌋` times.

You may assume that the array is non-empty and the majority element always exist in the array.

Example 1:

Input:

``` [3,2,3]
```

Output:

` 3`

Example 2:

Input:

``` [2,2,1,1,1,2,2]
```

Output:

``` 2
```

This problem was taken from Leetcode

## Solution

The solution:

Create an object (or associative array, depends of the language), iterate through all elements in the array adding them to the newly created object using the element value as a key. If element exists increase the value +1.
Keep track of mostly repeated element and return it at the end.

```var arr = [3, 3, 4, 2, 4, 2, 4, 4];

/**
* @param {number[]} nums
* @return {number}
*/
var majorityElement = function(nums) {
var elements = {};
var majorityElement = nums[0];
var majorityElementCount = 1;
for(var i in nums) {
var element = nums[i];
elements[element] = typeof elements[element] == 'undefined' ? 1 : elements[element] + 1;
if(elements[element] > majorityElementCount) {
majorityElement = element;
majorityElementCount = elements[element];
}
}
return majorityElement;
};

console.log(">>", majorityElement(arr));```

– Create an object (line 9)
– Iterate through each element in the array feeling up the object with the elements from the array where the element value would be the key of the element (line 14)
– Each time when the element exists, add + 1
– Keep track of mostly repeated element (Lines 16-17)

Could we optimize the code? Slightly. When we add + 1 we could check if the value is already greater than the length of the array / 2 and if se we know that this is the majority element because no other element could have greater value.

```...
if(elements[element] > nums.length / 2) {
return element;
}
...```

# Creating loader component and set up one CSS per brand.

branch-name:
Click To Copy

Previous solution was great but not perfect. We still add a CSS of two brands in one CSS file and loading all CSS for all brands per each component.

Could we do it better and load only the necessary CSS for each component for the particular branch ? Yers we could. The idea about bundle splitting is that one CSS file will be created per each component.

So in order to have one CSS file per brand we have to

# Create a wrapper component per each brand.

## The Home component.

We are going to move the component’s code from index.js to a new file called renderer.js and repurpose index.js to be a wrapper component, which will load brand specific sub component, that will pass the style object back to the renderer component in renderer.js. If it sounds a bit confusing don’t worry. Follow that tutorial and it will get clear.

./src/components/Home/renderer.js

```import React from 'react';

const Renderer = ({styles, title}) => {
return (
<div>
<div className={styles.wrapper}>{title}</div>
</div>
);
}

export default Renderer;```

The code in renderer file is pretty similar to that we had in index.js with one exception: we are going to pass the css as a property to this component.
And just to demonstrate how we could render different layout per each brand we are going to pass the title property as well.

Now the index.js will become our Home component wrapper, which will dynamically load either `./brands/one` or `./brands/two` sub component, which on the other hand will load our `./renderer.js` component, passing the appropriate CSS for the selected brand.

./src/components/Home/index.js

```import React from 'react';

});

});

const components = {
one,
two
}

const Home = ( {subDomain} ) => {
const Component = components[subDomain];
return (
<Component />
)
}
export default Home;```

what we just did:
– we crated a wrapper component, that will conditionally load the helper component for the current brand (lines 5 and 10)
-we render the appropriate sub component, based on the brand name.

Let’s create the helper sub components that will load the brand specific CSS and pass it to the renderer component and render it.

These components will look quite similar:

./src/components/Home/brands/one/index.js

```import React from 'react';
import styles from './styles.scss';
import Renderer from '../../renderer.js'

export default () => {
return (
<Renderer styles={styles} title="This is my home section rendered for One!" />
)
}
```

./src/components/Home/brands/two/index.js

```import React from 'react';
import styles from './styles.scss';
import Renderer from '../../renderer.js'

export default () => {
return (
<Renderer styles={styles} title="This is my home section rendered for Two!" />
)
}

```

what we just did:
– we imported brand specific CSS in each of the components (line 2)
– imported the renderer component (line 3)
– rendered the renderer component, passing the CSS and the title property (line 7)

Open the `./dist` folder and look at 1.css and 2.css contents:

./dist/1.css

`.one-wrapper{background-image:url(/dist/images/b5c0108b6972494511e73ad626d1852f-home.png);height:500px}.one-wrapper h2{color:#000}`

./dist/2.css

`.two-wrapper{background-image:url(/dist/images/a005b97826d5568577273d214dd5f89a-home.png);height:800px}.two-wrapper h2{color:#00f;font-size:50px}`

Webpack created two files with the corresponding CSS: `one-wrapper` and `two-wrapper` containing only the CSS needed for each brand.

Open the browser and give it a try. The result should be what we saw in the previous chapter, but this time only the brand specific CSS is loaded.

Nice! Now we have Webpack created these two CSS files, but the class names are `one-wrapper` and `two-wrapper` which comes from the lead folder name, which now instead of been `./Home` is `./Home/one` and `/Home/two`  What will happen if we want to make another component brand specific?

## The Greetings component

Let’s do the same changes:

./src/components/Greetings/renderer.js

```import React, { Component } from 'react';
import { connect } from 'react-redux';

const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE';

class Greetings extends Component {

constructor(props) {
super(props);
}

let newName = document.querySelector('#inputField').value;
}

let newName = el.target.value;
}

onToggleEditMode() {
}

render() {
let element = <h2 onClick={() =>{   this.onToggleEditMode()  }}>Hello:  {this.props.userName}</h2>;
if(this.props.editMode)
element = <h2>Type new name:<input type="text" id='inputField' value={this.props.userName} onChange={(el) => { this.usernameChanged(el);}} /><button onClick={() =>{ this.doneEditUsername() }}>done</button></h2>
return (
<div>
<div className={this.props.styles.wrapper}>
{element}
</div>
</div>);
}
}

const mapStateToProps = ( storeState ) => {
return {
editMode: storeState.user.editMode
}
}

const mapDispatchToProps = dispatch => {
return {
dispatch({type: TOGGLE_EDIT_MODE});
},
}
}
};

export default connect(
mapStateToProps,
mapDispatchToProps
)(Greetings);```

what we just did:
– we just moved the code from ./index.js to ./renderer.js
– we removed the CSS import since we are passing CSS as a property
– we changed the div class name to come from the passed property (line 36)

The rest is the same like in Home component.

The index component will actually look exactly the same:

./src/components/Greetings/index.js

```import React from 'react';

});

});

const components = {
one,
two
}

const Home = ( {subDomain} ) => {

const Component = components[subDomain];
return (
<Component />
)
}
export default Home;```

Let’s load different ‘home’ pictures for each brand.
Move the home picture in `./images/home.png` to `./images/one/home.png` and add another image for `./images/two/home.png` (you could either download some png or use the one in this branch)

./src/components/Greetings/brands/one/styles.scss

```.wrapper {
background-image:url('../../../../images/one/home.png');
height: 500px;
h2 {
color: black;
}
}```

./src/components/Greetings/brands/two/styles.scss

```.wrapper {
background-image:url('../../../../images/two/home.png');
height: 800px;
h2 {
color: blue;
font-size: 50px;
}
}```

Here we have to adjust the relative path to the images since this component goes two levels deeper and we moved the images into a brands folders (line 2)

And the helper sub components are the same like in Home component.

./src/components/Greetings/brands/one/index.js

```import React from 'react';
import styles from './styles.scss';
import Renderer from '../../renderer.js'

const One = () => {
return (
<Renderer styles={styles} />
)
}

export default One;
```

./src/components/Greetings/brands/two/index.js

```import React from 'react';
import styles from './styles.scss';
import Renderer from '../../renderer.js'

const One = () => {
return (
<Renderer styles={styles} />
)
}

export default One;
```

Start the server and go to http://one.localhost:3006/home and you will notice that the Home component height increased. Why this happened?

Let’s open http://one.localhost:3006/dist/1.css and look at the class names:

`.one-wrapper{background-image:url(/dist/images/b5c0108b6972494511e73ad626d1852f-home.png);height:500px}.one-wrapper h2{color:#000}`

Somehow the one-wrapper has `background-image:url(/dist/images/b5c0108b6972494511e73ad626d1852f-home.png)` and `height:500px` that belongs to the Greetings component.

Why this is happening? Because of the way how we set up class name structure in Css-Loader. If you look at webpack.base.config.js  you will see that the `localIdentName` which is the CSS `className` is constructed by adding the folder name, and the actual local identifier ‘[folder]-[local]’

./src/webpack.base.config.js

```...
// SCSS
{
test: /\.scss\$/,
use: [
{
options: {
modules: true,
localIdentName: '[folder]-[local]',
sourceMap: true
}
},
...```

But the folder name now is ‘one’ or ‘two’ for both components since it takes only the leaf folder name. Let’s fix this by

# Make brand component names unique.

Go to `src/Home/brands/one` and rename it to `src/Home/brands/OneHome` and `src/Home/brands/two` to be `src/Home/brands/TwoHome`
and do the same for the greetings component: `src/Greetings/brands/one` => `src/Greetings/brands/OneGreetings` and `src/Greetings/brands/Two` => `src/Greetings/brands/TwoGreetings`

Next let’s make the appropriate changes in both: Home and Greeting component:

./src/Home/index.js

```import React from 'react';

});

});

const components = {
one,
two
}

const Home = ( {subDomain} ) => {

const Component = components[subDomain];
return (
<Component />
)
}
export default Home;```

and

./src/Greetings/index.js

```import React from 'react';

});

});

const components = {
one,
two
}

const Home = ( {subDomain} ) => {

const Component = components[subDomain];
return (
<Component />
)
}
export default Home;```

Run the project and check /dist/3.css

`.OneHome-wrapper--t4U5b{background:#8d8dac;color:#fff;text-align:center;font-family:MyFont}`

it contains only CSS for the Home component.

# Adding a hash in CSS class names

As an extra step we could also add a hash for each class name. This will make class names unique per component, so if accidentally happened to have two components with the same names their CSS won’t colide.

This could be achieved by simply adding a `hash` directive in `localIdentName` in CSS-loader config [folder]-[local]–[hash:base64:5]

```const getEnvironmentConstants = require('./getEnvironmentConstants');
const webpack =require('webpack');

module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: [
'@babel/polyfill',
'./src/index.js',
],
output: {
filename: '[name]-bundle.js',
publicPath: '/dist/',
},
module: {
rules: [
{
test: /\.js\$/,
exclude: /node_modules/,
use: {
}
},

// SCSS
{
test: /\.scss\$/,
use: [
{
options: {
modules: true,
localIdentName: '[folder]-[local]--[hash:base64:5]',
sourceMap: true
}
},
{
options: {
plugins: () => [require('autoprefixer')()],
sourceMap: true
},
},
{
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
],
},
// images
{
test: /\.(png|jp(e*)g|svg)\$/,
use: [{
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.(woff|woff2|eot|ttf|otf)\$/,
}
]
},
plugins: [
new webpack.DefinePlugin({ 'process.env' : getEnvironmentConstants() } ),
]
};```

Run the project again and the home component should look like before. Open http://one.localhost:3006/dist/1.css and you will see how the has was appended to the class names.

branch-name:
Click To Copy

where to go from here ?

# Maximum Subarray

Given an integer array `nums`, find the contiguous subarray (containing at least one number) which has the largest sum and return its sum.

Example:

Input:

``` [-2,1,-3,4,-1,2,1,-5,4],
```

Output:

``` 6
```

Explanation:

``` [4,-1,2,1] has the largest sum = 6.
```

This problem was taken from Leetcode

The solution:

## Brut force.

The straight forward solution could be to iterate through all elements in the array and calculate the subarray values and compare them.

In the example above[-2,1,-3,4,-1,2,1,-5,4] we will do:

starting index: 1
-2 = -2
-2, 1 = -1
-2, 1, -3 = -4
-2, 1, -3, 4 = 0
-2, 1, -3, 4, -1 = -1
-2, 1, -3, 4, -1, 2 = 1
-2, 1, -3, 4, -1, 2, 1 = 2
-2, 1, -3, 4, -1, 2, 1, -5 = -3
-2, 1, -3, 4, -1, 2, 1, -5, 4 = 1

starting index: 2
1 = 1
1, -3 = -2
1, -3, 4 = 2
1, -3, 4, -1 = 1
1, -3, 4, -1, 2 = 3
1, -3, 4, -1, 2, 1 = 4
1, -3, 4, -1, 2, 1, -5 = -1
1, -3, 4, -1, 2, 1, -5, 4 = 3

starting index: 3
-3 = -3
-3, 4 = 1
-3, 4, -1 = 0
-3, 4, -1, 2 = 2
-3, 4, -1, 2, 1 = 3
-3, 4, -1, 2, 1, -5 = -2
-3, 4, -1, 2, 1, -5, 4 = 2

starting index: 4
4 = 4
4, -1 = 3
4, -1, 2 = 5
4, -1, 2, 1 = 6
4, -1, 2, 1, -5 = 1
4, -1, 2, 1, -5, 4 = 5

… and so on till the last element in the array.

So the winner clearly is 4, -1, 2, 1 = 6, but this approach will take a lot of repetitions. Interestingly there is a linear solution called: Kadane’s algorithm.

The basic idea of this algorithm is to break the array into a sets of mutually exclusive sets, calculate their sums and find the largest one.

First let’s look closely of what we are doing to find the maximum sum using brut force. We are splitting the array to a sets of all possible contiguous sub arrays and we calculate their sum. This means that:
– if the array contains only negative values we don’t really need to split the array cause the answer will be the largest value in the array. i.e. [-1,-5,-3] = -1 (the one close to 0)
– if this is a mixed array with negative and positive values the max sum of contiguous sub array will be > 0 so we could ignore any case where the sum is negative.

This way we could iterate through each element of the array `nums[i]`  where i is the index of the element in the array (starting with the first one `nums[0]`), and calculate the sum (let’s call it `max_here = max_here + nums[i]` ).
If we get a negative result we already know for sure that this is not what we are looking for and we set up `max_here` to the next element in the array `max_here = nums[i]`

So in the example above: [-2,1,-3,4,-1,2,1,-5,4]
We are starting by setting up both params to the first element in the array: `max_here =``max_so_far = nums[0]` . We are going to use `max_so_far` to store the maximum sum discovered so far, and `max_here` to calculate the maximum sum so far. Once again if the `max_sum` is negative, we just set it up to be equal to the next element in the array `nums[i]` so on the next iteration `max_sum = nums[i-1] + nums[i]`

Starting with setting up `max_here = max_so_far = nums[0] = -2`

 i nums[i] action described max_here max_so_far 1 1 `sum = max_here + nums[1]`, which is: `sum = -2 + 1 = -1` which is smaller than `nums[1]` so `max_here = nums[1] = 1` (line 10 in the code snipped below) and since `max_here > max_so_far`,  `max_so_far = max_here =1` (line 11) 1 1 2 -3 `sum = max_here + nums[2]` which is: `sum = 1 + (-3) = - 2` which is bigger than `nums[2]` which is -3 so `max_here = sum = -2`But `max_here` is smaller than `max_so_far` so `max_so_far` stays equal to 1 -2 1 3 4 `sum = -2 + 4 = 2` which is < than 4 so  `max_here = nums[4] = 4` which is > `max_so_far` so `max_so_far = max_here = 4` 4 4 4 -1 `sum = 4 - 1 = 3` > – 1 so `max_here = sum = 3` 3 4 5 2 `sum = 3 + 2 = 5` which is > than `nums[5] = 2` so `max_here = max_so_far = sum = 5` 5 5 6 1 `sum = 5 + 1 = 6` which is > than `nums[6] = 1` so `max_here = max_so_far = sum = 6` 6 6 7 -5 `sum = 6 + (-5) = 1` which is > than `nums[7] = -5` so `max_here = 1` 1 6 8 4 `sum = 1 + 4 = 5` which is > than `nums[8] = 4` so `max_here = 5` but `max_here < max_so_far` so `max_so_far` stays the same: 6 which is the maximum sum here. 5 6

```/**
* @param {number[]} nums
* @return {number}
*/
var maxSubArray = function(nums) {
var max_here = max_so_far = nums[0];

for(var i=1;i < nums.length; i ++) {
max_here = Math.max(max_here + nums[i], nums[i]);
max_so_far = Math.max(max_so_far, max_here);
}

return max_so_far;
};```

# Adding Jest and Enzyme and creating snapshot tests

branch-name:
Click To Copy

In this tutorial we will learn how to install Jest and Enzyme, and create Snaphot tests.

If you are not familiar with these tools please read the links first since we will focus mainly on installing and using the tools.

The basic idea is that we are going to create a test cases, that will render the component, and create a snapshot of it. Next time when we run the test we could compare with the snapshot, making sure that either the component is not changed, or it renders as expected.

# Setting up Jest and Enzyme.

We will need some extra packages in order to make Jest work with Enzyme.

## Installing the packages.

• enzyme – the actual enzyme testing utility.
• enzyme-adapter-react-16 – the react adapter for enzyme. There are different adapters for different React versions, and since we are using react 16 we will install this version. A full list of adapter packages could be found here
• enzyme-to-json – a serializer for the components.
`yarn add jest enzyme enzyme-adapter-react-16 enzyme-to-json --dev`

In addition we have to also install:

`yarn add babel-jest --dev`

• babel-jest – allows Jest to use babel to transpile JS.

Before using Enzyme we have to configure it first. Create file with the following contents:

src/setupTests.js

```import { configure } from 'enzyme';

This tells Enzyme, to run with React using the adaptor we just installed. Make sure this file is included before using Enzyme. Open package.json and add the following config:

./package.json

```...
},
"jest": {
"setupFiles": [
"./src/setupTests.js"
]
},
...
```

Now we are almost ready to write our first test. Header component is perfect candidate since it is not connected to the redux store.

Create new file in the `./src/components/Header` folder and let’s

`./src/components/Header/index.test.js`

```import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

describe('Testing Header component', () => {
it('renders as expected!!!', () => {
const wrapper = shallow(
);
expect(toJson(wrapper)).toMatchSnapshot();
});
});```

unfortunately if we do `yarn test` it will fail with error code, since Jest doesn’t know how to deal with anything different than Java Script.
But there is an easy fix: we could map CSS to a JS file that Jest understands. Create empty file in

./src/__mocks__/styleMock.js

and set up Jest to use the mapping:

./package.json

```...
"jest": {
"setupFiles": [
"./src/setupTests.js"
],
"moduleNameMapper": {
"\\.(css|less|scss)\$": "<rootDir>/src/__mocks__/styleMock.js"
}
},
...```

Now let’s run `yarn test` and we should see something like this:

```yarn test
yarn run v1.12.3
\$ jest
Testing Home component
✓ renders as expected!!! (15ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        2.194s
Ran all test suites.
✨  Done in 3.05s.

```

Perfect ! Our first snapshot test is done.

## Testing renderer component

src/components/Home/renderer.test.js

```import React from 'react';
import { shallow, mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import Component from './renderer';

describe('Testing Home component', () => {
it('renders as expected!!!', () => {
const wrapper = shallow(<Component styles={{}} title="MyTest" />);

expect(toJson(wrapper)).toMatchSnapshot();
expect(wrapper.contains(<div>MyTest</div>)).toBe(true);
});
});```

Also we added `expect(wrapper.contains(<div>MyTest</div>)).toBe(true);` which looks for certain things into the component.

## Testing Redux connected component.

```import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import { Provider } from 'react-redux';
import reducers from '../../reducers';
import { createStore} from 'redux';

const store = createStore(reducers, {});
let wrapper;
describe('Testing About component', () => {

beforeEach(() => {
// Runs a function before each of the tests in this file runs
wrapper = mount(
<Provider store={store}>
</Provider>
);
});

it('renders as expected', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});

it('expect to have state.userName set to John', () => {
});
});```

since we wrapped MyComponent with Provider component, we have to mount the component that will render it in full instead of doing shallow rendering (like in the previous example). Otherwise shallow will render only the Provider component.

Now the two tests could be executed together `yarn test`

``` PASS  src/components/About/index.test.js
✓ renders as expected (56ms)
✓ expect to have state.userName set to John (14ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   1 passed, 1 total
Time:        3.102s
Ran all test suites matching /.\/node_modules\/jest\/bin\/jest.js|src\/components\/About\/index.test.js/i.
```

./src/components/Greetings/renderer.test.js

```import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import reducers from '../../reducers';
import { createStore} from 'redux';
import Component from './renderer';

const store = createStore(reducers, {});
let wrapper;
describe('Testing Greetings component', () => {

beforeEach(() => {
wrapper = mount(
<Component styles={{}} store={store} />
);
});

it('renders as expected', () => {
// to snapshot test
expect(toJson(wrapper)).toMatchSnapshot();
});

it('textbox does not exist', () => {
expect(wrapper.find('input').exists()).toBe(false);
});

it('textbox exists after h2 click', () => {
// simulate click on the h2 tag trigering props change and visualizing the input text box
wrapper.find('h2').simulate('click');
expect(wrapper.find('input').exists()).toBe(true);
});

it('textbox values change properly', () => {
// text box value tests
expect(wrapper.find('input').props().value).toBe('No Name');
wrapper.find('input').props().value = 'test';
expect(wrapper.find('input').props().value).toBe('test');
});

});
```
• beforeEach – Runs a function before each of the tests in this file runs. If the function returns a promise or is a generator, Jest waits for that promise to resolve before running the test.
• here is another way of passing the store directly to the component.
branch-name:
Click To Copy

# Setting up production server.

branch-name:
Click To Copy

Developing config is adding a lot of heavy processing in order to have source mapping working and debugging easy, but we don’t need this in production. All we need is speed. Let’s create another config that we are going to use for production build.

There are different ways to achieve this. One way for example is to create a common config and one for production and one for development. Then use webpack-merge plugin to combine the configs like it was explained here , or we could simply create another Webpack config for running the production server, but then we have to manage multiple configs which is far from perfect, so let’s use the same concept like before and extend (and override) the base config with production one.

# Creating production config.

./webpack.prod.config.js

```const webpack = require('webpack');
let config = require('./webpack.base.config.js');

config.mode = "production";
config.devtool = "";

config.entry = [
'./src/index.js',
];

module.exports = config;```

also lets modify the base config to use plain JavaScript syntax since Webpack won’t know how to run it and at this point there is no Babel teanspiler to convert the code to plain JavaScript.

./webpack.base.config.js

```const getEnvironmentConstants = require('./getEnvironmentConstants');
const webpack =require('webpack');

module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: [
'@babel/polyfill',
'./src/index.js',
],
output: {
filename: '[name]-bundle.js',
publicPath: '/dist/',
},
module: {
rules: [
{
test: /\.js\$/,
exclude: /node_modules/,
use: {
}
},

// SCSS
{
test: /\.scss\$/,
use: [
{
options: {
modules: true,
localIdentName: '[folder]-[local]',
sourceMap: true
}
},
{
options: {
plugins: () => [require('autoprefixer')()],
sourceMap: true
},
},
{
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
],
},
// images
{
test: /\.(png|jp(e*)g|svg)\$/,
use: [{
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.(woff|woff2|eot|ttf|otf)\$/,
}
]
},
plugins: [
new webpack.DefinePlugin({ 'process.env' : getEnvironmentConstants() } )
]
};```

# Creating production build.

Edit package.json and add clean script to remove the `dist` folder and `build-prod` script.

./package.json

```...
"scripts": {
"start-cli": "webpack-dev-server --hot --history-api-fallback --config webpack.cli.config.js",
"start-api": "babel-node server-api.js",
"start-middleware": "babel-node server-middleware.js",
"clean": "rm -rf ./dist",
"lint": "eslint .",
"build-dev": "webpack --mode development",
"build-prod": "webpack --config webpack.prod.config.js",
},
...```

what we just did:
– we added a cleanup script `clean` that will clean up the production build directory (line 6)
– we added a production build script (line 9)

Now we could clear the `./dest` folder by running `yarn clean` then do the production build `yarn build-prod` and have production bundle ready.

# Creating Express production server.

There are different ways to serve your files once the production build is done. One way is to use nginx server which I might create a tutorial of how to set up later, or we could use the express server.

Let’s create an Express config and run a simple prod server. Create the `prod.server.js` with the following contents:

./prod.server.js

```const express = require('express');
const path = require('path')
const app = express();
const port = 8080;

app.use('/dist', express.static('dist'));
app.get('*', (req, res)=>{
res.sendFile(path.join(__dirname, 'index.html'));
})
app.listen(port, () => console.log(`Example app listening on port \${port}!`))```

what we just did:
– we created an Express server
– we told the server to serve every static file like JS, CSS, images from the `/dist` folder (line 6)
– everything else that is not matching the static content falls into ‘*’ and will serve index.html

Looks familiar? It’s pretty similar to that we did in the previous chapters.

Let’s add a production server start script:

./package.json

```"scripts": {
"start-cli": "webpack-dev-server --hot --history-api-fallback --config webpack.cli.config.js",
"start-api": "babel-node server-api.js",
"start-middleware": "babel-node server-middleware.js",
"clean": "rm -rf ./dist",
"lint": "eslint .",
"build-dev": "webpack --mode development",
"build-prod": "webpack --config webpack.prod.config.js",
"run-prod-server": "node ./prod.server.js",
"build-and-run-prod-server": "yarn clean && yarn build-prod && yarn run-prod-server"
},```

what we just did:
– we created `run-prod-server` that will simply start the express server with will statically serve the contents of the `/dist` folder where `build-prod` script is dumping the bundle.
– To make things easier we also created a new script entry (line 10) that does all necessary steps to run production server:
– calls `yarn clean` script to remove the `./dist` folder before rebuilding
– calls `yarn build-prod` to make a fresh production buid
– tells node to start using `./prod.server.js` that we just created as an entry point, which starts the Express server.

Give it a try `yarn run-prod-server` and observe the `./dist` folder. It will disappear for a brief moment, then it will re-appear with the fresh content and once you see this message in the console ‘example app listening on port 8080!’ you are ready to hit the browser url.

If everything went well, you should see the site running, using the production Express server.

# Extracting CSS in a separate files.

Right now, if we look at the `./dist` folder we will see only *.js and the font file that we added, which means that all CSS is embedded into Javascript files, which is ok for development, but far from ideal for production. Now the browser can’t cache the CSS, and we will see issues with styling the components since it will take time for the CSS to be applied. To solve this problem we have to extract the CSS from JS and load it separately.

And there is a plug-in for this called mini-css-extract-plugin. Let’s install it.

`yarn add mini-css-extract-plugin --dev`

and let’s tell Webpack to use it only with the production build:

./webpack.prod.config.js

```const webpack = require('webpack');
let config = require('./webpack.base.config.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

config.mode = "production";
config.devtool = "";

config.entry = [
'./src/index.js',
];

config.plugins = [ ... [new MiniCssExtractPlugin({
// these are optional
filename: "[name].css",
chunkFilename: "[id].css"
})],
... config.plugins
];

module.exports = config;```

what we just did:
– we replaced ‘style-loader’ with `mini-css-extract-plugin` to extract all CSS files form JS bundle (line 12)
– by default even without any parameters mini-css-extract-plugin will create two bundle types: one with the main.css and the rest per component base. Which means that each component will have their own CSS bundle, dynamically loaded when the component is rendered. For a large project this will dramatically reduce the initial CSS load.

You could play with the optional parameters: `filename` and `chunkFilename` and see how this will affect generated CSS files names. If for example you would like to rename the main file to `global-main.css` you could set `filename: "global-[name].css"` or if you want to change the chunk names you could do this: `chunkFilename: "[id].css"` . Parameters in the brackets are automatically replaced  by Miini-css-extract-plugin. [id] – will be replaced with the chunk id # for example.

Rebuild the project:

`yarn build-prod`

And let’s look at `./dist` folder. Below every JS bundle we should be able to see the corresponding CSS for this module. Now it looks better. Run the production server `build-and-run-prod-server` load the project and observe the net tab while navigating in different site sections. You will see the css files loading for each component once you navigate to a new section. But we are missing the main.css which is not loading on demans. Let’s add a tag to load it:

```<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Babel Webpack Boilerplate</title>
<body>
<div id="root"></div>
<script type="text/javascript" src="dist/main-bundle.js"></script>
</body>
</html>```

Run the production server again and the app should look like before.

But there is another problem: click to see the file content’s and you will notice that the CSS is not minified.

## Minimizing the CSS.

Let’s use optimize-css-assets-webpack-plugin

`yarn add optimize-css-assets-webpack-plugin --dev`

./webpack.prod.config.js

```const webpack = require('webpack');
let config = require('./webpack.base.config.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

config.mode = "production";
config.devtool = "";

config.entry = [
'./src/index.js',
];

config.plugins = [ ... [new MiniCssExtractPlugin({
// these are optional
filename: "[name].css",
chunkFilename: "[id].css"
})],
new OptimizeCSSAssetsPlugin({}),
... config.plugins
];

module.exports = config;```

Rebuild production and run the prod server and if you open some of the CSS file contents you will see that they are now minified.

Just what we need for production build!

branch-name:
Click To Copy

where to go from here ?

branch-name:
Click To Copy

Although Wepack already comes with two modes: development and production, It comes handy to have different environment variables for development and production and to store them in different files.

Let’s create .env file which will be our development environment variable file.

# Creating the .env file

./.env

```APP_NAME=Webpack React Tutorial
GRAPHQL_URL=http://localhost:4001/graphql```

As it looks like .env is not a standart JavaScriupt object so we can’t use the variables out of the box. We will need two modules Dotenv and Dotenv-expand.

Dotenv is module that loads environment variables from a `.env` file into `process.env`.

`yarn add dotenv dotenv-expand`

Let’s give it a try and print out `GRAPHQL_URL` in the backend. Let’s do this using server-api.js config. All that we need to do is to ‘tell’ Dotenv module to load variables into `process.env`

./src/server-api.js

```import WebpackDevServer from 'webpack-dev-server';
import webpack from 'webpack';
import config from './webpack.api.config.js';
require('dotenv').config();

console.log(">>>" + process.env.GRAPHQL_URL);

const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
hot: true,
publicPath: config.output.publicPath,
historyApiFallback: true
});
server.listen(8080, 'localhost', function() {});```

Run the project and in the backend console you will see GraphQL url printed out.

Now, let’s create `getEnvironmentConstants` helper method that will use Dotenv to load variables, and in addition we will add a filter that will load only these variables to the front end that we specify in `frontendConstants` . This way important variables that we need in the backend like passwords to the database won’t be exposed in the source code.

./getEnvironmentConstants.js

```const fs = require('fs');

// Load environment variables from these files
const dotenvFiles = [
'.env'
];

// expose environment variables to the frontend
const frontendConstants = [
'APP_NAME',
'GRAPHQL_URL'
];

function getEnvironmentConstants() {

dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});

const arrayToObject = (array) =>
array.reduce((obj, item, key) => {
obj[item] = JSON.stringify(process.env[item]);
return obj
}, {})

return arrayToObject(frontendConstants);
}

module.exports = getEnvironmentConstants;```

Once we have the object in place we could use the DefinePlugin to pass them to the frontend.

if we go back in this tutorial we will remember that we showed how to configure Webpack in three different ways: using CLI, the webpack API and the server middleware.
Now the best place to add DefinePlugin will be in webpack.base.config so all three Webpack set-ups will take advantage of it. Let’s import getEnvironmentConstants and pass it as a parameter to DefinePlugin.

./webpack.base.config.js

```import getEnvironmentConstants from './getEnvironmentConstants';
import webpack from 'webpack';

module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: [
'@babel/polyfill',
'./src/index.js',
],
output: {
filename: '[name]-bundle.js',
publicPath: '/dist',
},
module: {
rules: [
{
test: /\.js\$/,
exclude: /node_modules/,
use: {
}
},

// SCSS
{
test: /\.scss\$/,
use: [
{
options: {
modules: true,
localIdentName: '[folder]-[local]',
sourceMap: true
}
},
{
options: {
plugins: () => [require('autoprefixer')()],
sourceMap: true
},
},
{
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
],
},
// images
{
test: /\.(png|jp(e*)g|svg)\$/,
use: [{
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.(woff|woff2|eot|ttf|otf)\$/,
}
]
},
plugins: [
new webpack.DefinePlugin({ 'process.env' : getEnvironmentConstants() } )
]
};```

what we just did:
– (line 1 and 2) we imported `getEnvironmentConstants` and `Webpack` since we will need it to instantiate the plug in.
– (line 72-74) we added the plug in.

We have to do one more change in order to have the plug-in working for all Webpack configs:

./webpack.api.config.js

```const webpack = require('webpack');
let config = require('./webpack.base.config.js');

config.entry = [
'@babel/polyfill',
'./src/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080/',
];

config.plugins = [... [new webpack.HotModuleReplacementPlugin()], ... config.plugins ];

module.exports = config;```

and

./webpack.middleware.config

```const webpack = require('webpack');
let config = require('./webpack.base.config.js');

config.entry = [
'@babel/polyfill',
'./src/index.js',
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
];

config.plugins = [... [new webpack.HotModuleReplacementPlugin()], ... config.plugins ];

module.exports = config;```

what we just did:
Since we added `config.plugins` array in webpack.base.config we don’t want to override it here and lose the changes. That’s why we are merging the array using spread operator.
If you are unfamiliar with the spread operator you might read the link above. Basically what it does is to ‘spread’ two or more arrays into the current array.

```var a = [1,2,3];

var b = [...a, ...[4,5,6]];

console.log(b);

result: (6) [1, 2, 3, 4, 5, 6]```

# Accessing env variables in the front-end.

And let’s load these variables. We could replace the hardcoded GraphQL url with the one from the .env file.

And using the variables on the back end is straight forward: we just include `.env` file and use the variables, but passing them to the front end requires a little bit more effort. We have to use the DefinePlugin which will allow us to create global constants which can be configured at compile time.

./src/components/App/index.js

```import React, { Component } from 'react';
import PageLayout from '../../containers/PageLayout';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore} from 'redux';
import reducers from '../../reducers';

import styles from './styles.scss';

const store = createStore(reducers, {});
export default class App extends Component {
render() {
const GRAPHQL_URL = process.env.GRAPHQL_URL;
const client = new ApolloClient({
cache: new InMemoryCache()
});
return (
<div className={styles.appWrapper}>
<Provider store={store}>
<ApolloProvider client={client}>
<Router>
<Switch>
<Route exact path="*" component={PageLayout} />
</Switch>
</Router>
</ApolloProvider>
</Provider>
</div>
);
}
}```

And we could also print the APP name in the header section `process.env.APP_NAME`

```import React from 'react';
import { Link } from 'react-router-dom';
const styles = require('./styles.scss');
const Header = ( {title} ) => (
<div>
<div className={styles.wrapper}>
<h2>{ title } { process.env.APP_NAME } </h2>
<ul>
</ul>
</div>
</div>
);
Now, start the server using `yarn start-api` and if everything works fine you will see the “Webpack React Tutorial” in the header.