Add Tutorial/Option to Live Reload when Developing React Components

[wdfinch]

Describe the problem feature solves When developing custom React components in adminjs applications, I constantly need to refresh the browser to see my changes. It would be nice if there were some way to easily configure live reloading or some tutorial.

Describe the solution you'd like Documentation or config options to enable live reloading.

Describe alternatives you've considered Refreshing the browser on every code change.

Acceptance criteria NA

[dziraf]

@wdfinch by live reloading do you mean some kind of websocket implementation that automatically shows new changes when creating/updating/deleteing records or just a button which reloads contents without refreshing the browser?

[wdfinch]

Thanks for the reply! Sorry I wasn't very clear. I've updated the title and details above. I was referring to adding a live reload feature when developing custom react components. When adding these components, I need to refresh the browser every time I make changes (I have nodemon restarting the server). It would be nice if the browser could just refresh on its own when I make a change.

Hot Module Replacement (HMR) would also solve this problem but might be harder to implement.

[markstreich]

This works for me:

npm install livereload

const admin = new AdminJS(
...
    assets: {
      scripts:
        process.env.NODE_ENV !== 'production'
          ? [`http://localhost:35729/livereload.js?snipver=1`]
          : [],
    },
)

....

  if (process.env.NODE_ENV === 'production') {
    await admin.initialize();
  } else {
    admin.watch();
    var server = livereload.createServer();
    server.watch(path.join(__dirname, '/.adminjs'));
  }