Use a "smart configuration", also known as switching between dev and prod

Author: 7coil

src/App.js

@@ -8,7 +8,7 @@ import './sass/index.css'
 import Header from './components/Header'
 import Footer from './components/Footer'
 
-import config from './config.json'
+import config from './config/index.js'
 
 class App extends Component {
   constructor (props) {

src/components/Header.js

@@ -3,7 +3,7 @@ import Background from '../images/background.jpg'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 
-import config from './../config.json'
+import config from './../config/index.js'
 
 const style = {
   backgroundImage: `url(${Background})`

src/components/ImageDrag.js

@@ -3,7 +3,7 @@ import Sortable, { SortableContainer } from 'react-anything-sortable'
 import 'react-anything-sortable/sortable.css'
 import PropTypes from 'prop-types'
 
-import config from './../config.json'
+import config from './../config/index.js'
 
 export default class ImageDrag extends Component {
   constructor (props) {

src/components/ImageStrip.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Slider from 'react-slick'
 // import { Link } from 'react-router-dom'
 
-import config from './../config.json'
+import config from './../config/index.js'
 
 export default class ImageStrip extends Component {
   render () {

src/config/development.json

@@ -0,0 +1,4 @@
+{
+  "API_URI": "http://127.0.0.1:8080/",
+  "CDN_URI": "https://terminal.ink/assets/images/"
+}

src/config/index.js

@@ -0,0 +1,4 @@
+const environment = process.env.NODE_ENV || 'development'
+
+module.exports = require(`./${environment}.json`) // eslint-disable-line
+// This episode of LinusTechTips was brought to you by `eslint-disable-line`!

src/config.json renamed to src/config/production.json

@@ -3,7 +3,7 @@ import BotList from './../components/BotList'
 import Loading from './../components/Loading'
 import ErrorBox from './../components/ErrorBox'
 
-import config from './../config.json'
+import config from './../config/index.js'
 
 export default class AllBots extends Component {
   constructor (props) {

src/routers/AllBots.js

@@ -6,7 +6,7 @@ import ImageDrag from './../components/ImageDrag'
 import Loading from './../components/Loading'
 import ErrorBox from './../components/ErrorBox'
 
-import config from './../config.json'
+import config from './../config/index.js'
 
 export default class EditBot extends Component {
   constructor (props) {

src/routers/EditBot.js

@@ -5,7 +5,7 @@ import ImageStrip from './../components/ImageStrip'
 import ErrorBox from './../components/ErrorBox'
 import Loading from './../components/Loading'
 
-import config from './../config.json'
+import config from './../config/index.js'
 
 export default class Home extends Component {
   constructor (props) {