magic of the dontenv

Recently i tried to solve the following problem: how to get react app to get backend Url from environment variable. The embarrassing truth is that until now my code was full of statements like this:

    fetch('http://localhost:8000/login', {
        method: "POST",
        credentials: 'include',
        headers: {
            "Content-Type": "application/json; charset=utf-8"
        },
        body: JSON.stringify( data )
    })

As you may notice - the url is hardcoded. The problem here is that this code will run only at developer environment where server running on 127.0.0.1 ("localhost") ip. But what about production environment where backend url can be http://yourappname.herokuapp.com ?

DONTENV

It appears the very cool solution for this problem is to use dotenv node plugin. Using it give us ability to define all environment specific variables in .nev file:

REACT_APP_API_HOST=http://localhost:8000

Now inside your react code you can access this variable this way:

 const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
 };
 fetch(`${process.env.REACT_APP_API_HOST}/login`, requestOptions)
        .then(handleResponse)

CREATE REACT APP

Create react app tool supports using .env files (so there is no need to install dotenv). You can create different .env files for different environments: like .env.local and .env.production.

By default - the "serve"(npm start) task will use "local", while "build" (npm run build) - will use production... Cool!

The .every method i discovered today

Looking on react-redux example i found the following line:

  if (user && requiredFields.every(key => user.hasOwnProperty(key))) {
    console.log('no need to call "fetch"')
    return null
  }

Notice the usage of "every" statement.

Every

So, what is the advantage of "every"?
consider you have the following array:

const arr = [{name:'yoyo', active:true}, {name:'momo', active:true}, {name:'bobo', active:false}]

How can you quickly know if all users are active?
So, you can loop through the array with "forEach", like this

let everybodyIsActie = true;
arr.forEach(user => {
   if(!user.active) { // if even one is not active
     everybodyIsActie = false;
   }
})
if(everybodyIsActie) {
 console.log('everybody dance now!')
}

But, much more awesome is to use "every" statement:

if(arr.every(user => user.active)) {
 console.log('everybody dance now!')
}

No need to use any variables
Unlike "forEach" (which doesnt returns enything) "every" returns true if every array item fills the condition
See you in my next post!

Playing With Css Grid - Part 2

One of most interesting features of CSSGrid - is
grid-template-areas feature. It makes you able to define layout areas and to associate the HTML element with specific layout parts.
Lets try to build following layout with css grid:

First lets divide the layout to the parts that will explain how much rows and columns each element will occupy:

.container{
  ...
  grid-template-areas:
      "nav header"
      "nav main"
      "nav footer";
}

Now We only need to 'explain' to each element - what the area it should belong to:

header{
  grid-area:header;
}

Clear and simple: