[React] Build a feature toggle devtool

If you find yourself filling out the same form over and over again, or working through a weird workflow to enable certain features in your app just to get things developed, then custom DevTools for your app will enhance your productivity. There are so many things you can do once you are enabled to write arbitrary development-only code in your app. In this lesson we'll see how we can wire that up to make it possible.

 

in App.js, there is a feature toggle to switch the logo:

import React from 'react'
import featureToggles from './feature-toggles'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {featureToggles.tacos ? (
          <span className="App-logo" role="img" aria-label="taco">
            🌮
          </span>
        ) : (
          <img src={logo} className="App-logo" alt="logo" />
        )}
        <a
          className="App-link"
          href={
            featureToggles.tacos
              ? 'https://en.wikipedia.org/wiki/Taco'
              : 'https://reactjs.org'
          }
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn about {featureToggles.tacos ? ' Tacos' : ' React'}
        </a>
      </header>
    </div>
  )
}

export default App

 

dev-tools/

--dev-tools.js

--load.js

--dev-tools.local.js

 

In app's index.js file, we call load.js to load devtool to initial the settings:

import loadDevTools from './dev-tools/load'
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

loadDevTools(() => {
  ReactDOM.render(<App />, document.getElementById('root'))
})

 

load.js:

function load(callback) {
  if (process.env.NODE_ENV === 'development') {
    import('./dev-tools')
      .then(mod => mod.install())
      .finally(callback)
  } else {
    callback()
  }
}

export default load

dev-tools.js:  Provide the UI for developer and load local devtool file

import React from 'react'
import ReactDOM from 'react-dom'

const requireDevToolsLocal = require.context(
  './',
  false,
  /dev-tools\.local\.js/,
)
const local = requireDevToolsLocal.keys()[0]
if (local) {
  requireDevToolsLocal(local)
}

async function install() {
  function DevTools() {
    return 'Hello from the devtools'
  }

  const devToolsRoot = document.createElement('div')
  document.body.appendChild(devToolsRoot)

  ReactDOM.render(<DevTools />, devToolsRoot)
}

export {install}

dev-tools.local.js: modify the settings

import featureToggle from '../feature-toggles'

featureToggle.tacos = true

 

feature-toggles.js

// APP_CONFIG is set via the `config.js` script that's in /public
const featureToggles = window.APP_CONFIG.featureToggles

export default featureToggles

config.js;

window.APP_CONFIG = {
  featureToggles: {},
}

 

Refer