title: Using different API url for development and production with React and axios
body: <p>I'm building web app with React frontend and Node.js backend (API).<br>
  In React frontend I call API methods like this:  </p>
  
  <pre><code>axios({
      method: 'post',
      url: 'http://servername:9999/reports.activities',
      data: {
          user_id: 1
      }
  }).then(res =&gt; {
      this.setState(res.data);
  });
  </code></pre>
  
  <p>Sometimes I need to test API methods that is not released to production yet.<br>
  When I test backend locally, i run <code>nodemon api.js</code> on <code>localhost:9999</code>.<br>
  Every time I want to test frontend with local-running API, I have to change <code>http://servername:9999</code> to <code>http://localhost:9999</code> in my frontend code.<br>
  I think this is not the right approach.<br>
  What is the best way to use different url for development (when run <code>npm start</code> locally) and production (<code>npm build</code>)?<br>
  I was thinking of using <a href="https://github.com/motdotla/dotenv" rel="noreferrer">dotenv</a> for this purpose. Is this the right approach?<br>
  What is the best practice?</p>