Gatsby: [Discussion] Gatsby Devtools

[tsiq-swyx]

Summary

There is a redux devtools section in the docs and some old issues. But i believe the docs are outdated and also those are for working within the Gatsby repo itself, not with a Gatsby site, because gatsby sites do not have access to remotedev. (please correct me if this is wrong - i tried to simply install remotedev in my app (as well as globally) and it didnt work)

Anyway, this seems like a strange limitation. Why shouldn't Gatsby apps have the same tooling? this doesnt have to be limited to hooking into redux devtools, although we do get those for "free".

Idea list

• CLI to launch remotedev to see redux updates in browser
• see socket.io messages
• "--verbose" mode to log out all the lifecycles called by each plugin in sequence (honestly not sure if this is covered by redux but we can probably do some custom reporting)
• ???

[sw-yx]

hmm, devtools may or may not relate to the Tracing project the core team is doing. would love some guidance. https://github.com/gatsbyjs/gatsby/issues/1074

[KyleAMathews]

Sites can/should be able to access the redux devtools. I haven't tested this _forever_ though so no idea if it still works.

Tracing is somewhat unrelated. I'd like at some point if we build a data browser for your site that makes it easy to view all the site's data.

[sw-yx]

ok I do agree tracing is somewhat unrelated.

fwiw I tested using redux devtools on a -site- and it didn't work (even after trying to setup remotedev myself). I think there are a lot of assumed dependencies there that no longer exist/have been moved. didn't have a ton of time to dig into cause or fix

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[sw-yx]

may still want to keep this one open @KyleAMathews unless theres an umbrella issue somewhere for fixing the redux devtools?

[tomVlt]

Not sure it achieves your Idea List but if someone wants to see redux updates in browse, there is simple pattern. You will have data visualisation such as reducers structure, action dispatch, stop and replay updated in real time...
It works well in my own V2 boilerplate :

First Step

• Head here to grab setup config for Redux with Gatsby ssr (updated for V2)
  https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux

Second Step

• Next head here and download the Redux DevTools Extension for your web browser
  https://github.com/zalmoxisus/redux-devtools-extension

Last Step

• In your createStore config pass a compose callback with the devtools config as last argument
  you can see my own config as an example. Yours might be different depending on your needs.

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initStore = () => {
  const windowGlobal = typeof window !== 'undefined' && window

  const devtools =
  process.env.NODE_ENV === 'development' && windowGlobal.devToolsExtension
    ? window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    : f => f;

  const store = createStore(
    rootReducer,
    compose(
      applyMiddleware(thunk),
      devtools,
    )
  );

  return store;
};

export default initStore;

[sw-yx]

thanks. sad that devtools isnt a priority.

[tomVlt]

Not now due to V2 migration and that's pretty understandable...

But I'm pretty sure Gatsby community will come up in a couple of month to develop "an out of the box" solution.
They've already commit a V2 starter with Dan Abramov's Devtool version and emotion ssr together !

Meanwhile Redux-devtools-extension, as I explained above, achieves pretty much everything your are looking for, it's just an alternative to redux-remotedev which is way more stable and maintained by the way (7000+ stars, 47 contributors on github).

Since I exposed a V2 implementation you should definitely give it a try :) Cheers

[sw-yx]

totally. cheers!